Component Playground 拆解Hallmark 讓代碼成為頁(yè)面主內(nèi)容的預(yù)覽頁(yè)【免費(fèi)下載鏈接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/hal/hallmark打開任何一個(gè)組件庫(kù)官網(wǎng)你都會(huì)發(fā)現(xiàn)沒(méi)有大 Banner、沒(méi)有營(yíng)銷文案只有可運(yùn)行的預(yù)覽 一段可復(fù)制的代碼交替排列。這種結(jié)構(gòu)在 Hallmark 的 21 種宏結(jié)構(gòu)中有一個(gè)正式名字Component Playground組件游樂(lè)場(chǎng)。Hallmark 是一個(gè)為 Claude Code、Cursor、Codex 打造的拒絕 AI 味設(shè)計(jì)技能design skill而這種代碼即內(nèi)容的預(yù)覽頁(yè)正是它最擅長(zhǎng)自動(dòng)生成的頁(yè)面形態(tài)之一。本文帶你一次看懂Component Playground 是什么、它背后的 5 條設(shè)計(jì)規(guī)則、什么時(shí)候該用它以及如何一句話讓 AI 幫你寫出來(lái)。一、Component Playground 是什么宏結(jié)構(gòu)Hallmark 寫頁(yè)面不靠感覺(jué)。它動(dòng)手前會(huì)先從 21 種命名好的頁(yè)面結(jié)構(gòu)宏結(jié)構(gòu)里挑一個(gè)再按那張指紋生成整頁(yè)。第 21 號(hào)就是 Component Playground官方定義一句話交互式代碼 預(yù)覽塊就是頁(yè)面的主內(nèi)容。每一塊預(yù)覽一個(gè)組件并展示如何復(fù)制粘貼走人。它的完整指紋定義在 21-component-playground.md拆開就是 5 個(gè)要素要素規(guī)則標(biāo)題直接用分類標(biāo)簽Buttons、Forms、Cards、Layouts正文預(yù)覽塊 代碼塊交替排列常帶 Tab 切換框架React / Vue / …分隔分類色帶 示例之間的水平線按鈕每個(gè)代碼塊都有 Copy 按鈕復(fù)制成功時(shí)靜默不彈任何提示圖片沒(méi)有——預(yù)覽本身就是圖片注意最后一條Component Playground 是 Hallmark 宏結(jié)構(gòu)里少數(shù)明確寫著 Image: none 的結(jié)構(gòu)。跑起來(lái)的組件就是視覺(jué)素材這正是代碼成為頁(yè)面主內(nèi)容的含義。二、預(yù)覽頁(yè)背后的 5 條設(shè)計(jì)規(guī)則 從這份定義里可以提煉出任何代碼即內(nèi)容頁(yè)面都該遵守的 5 條規(guī)則1. 預(yù)覽在前代碼在后先讓讀者看到組件長(zhǎng)什么樣、能點(diǎn)能動(dòng)再給代碼。順序反過(guò)來(lái)先代碼后效果是文檔站不是 Playground。2. 復(fù)制按鈕要靜默成功復(fù)制成功不需要 Toast、不需要?jiǎng)赢嫅c祝。文件原文寫得很直白Copy button on every code block (silent success)。少打擾是工具頁(yè)的基本修養(yǎng)。3. 用分類標(biāo)簽當(dāng)標(biāo)題不用 Our Awesome Components 這種營(yíng)銷式大標(biāo)題直接Buttons/Forms/Cards。標(biāo)簽即導(dǎo)航掃一眼就知道頁(yè)面有什么。4. Tab 切換框架不跳轉(zhuǎn)頁(yè)面React、Vue、Svelte 的寫法用頁(yè)內(nèi) Tab 切換讀者的心流不斷。5. 不加任何裝飾無(wú) Hero 插畫、無(wú)漸變大圖、無(wú)滾動(dòng)動(dòng)效文件里明確寫了Reveal: none。Playground 是工具不是舞臺(tái)——裝飾會(huì)稀釋這塊代碼能不能用這個(gè)核心信息。三、什么時(shí)候該用 Component Playground官方給出的適用與禁用場(chǎng)景非常干脆?適合設(shè)計(jì)系統(tǒng)、組件庫(kù)、代碼片段站、框架文檔Reach for it for design systems, component libraries, code-snippet sites, framework documentation?不適合營(yíng)銷頁(yè)Avoid for marketing pages. Playground is utility, not pitch.參考標(biāo)桿shadcn/ui、Tailwind UI、Once UI、MUI demos、Framer Motion examples。反過(guò)來(lái)說(shuō)如果你要做的是讓訪客掏錢的落地頁(yè)應(yīng)該用 Hallmark 的其他宏結(jié)構(gòu)比如 Stat-Led大數(shù)字開場(chǎng)或 Workbench產(chǎn)品截圖主導(dǎo)。比如下面這張 SaaS 頁(yè)就是典型的營(yíng)銷頁(yè)形態(tài)——有主張、有 CTA、有社會(huì)證明和 Playground 的工具氣質(zhì)正好相反四、開場(chǎng)文案用真實(shí)示例代替空口承諾宏結(jié)構(gòu)文件特意附了 3 條 Component Playground 的開場(chǎng)樣例要求你模仿的是一種具體性tangibleTry it inline. Then take it home.—— 兩個(gè)短命令句Every example is editable. Every output is real.—— 聲明 證據(jù)成對(duì)出現(xiàn)Fromnpm installto your first chart in eight lines.—— 點(diǎn)名步驟數(shù)給出可驗(yàn)證的承諾規(guī)律只有一條開場(chǎng)就落到一個(gè)能動(dòng)手的真實(shí)例子上而不是喊口號(hào)。這也是它區(qū)別于普通營(yíng)銷 Hero 的文案指紋。五、如何讓 Hallmark 幫你寫出預(yù)覽頁(yè) ?1. 一行命令安裝技能npx skills add nutlope/hallmark也可以克隆倉(cāng)庫(kù)后手動(dòng)復(fù)制 SKILL.md 和 references/ 到對(duì)應(yīng)目錄git clone https://gitcode.com/GitHub_Trending/hal/hallmark2. 寫一個(gè)工具氣質(zhì)的 brief直接在 Claude Code / Cursor / Codex 里描述需求例如Build a component library site for my design system: buttons, inputs, cards — each with a live preview, copyable code with a Copy button, and framework tabs. Audience: frontend developers. Tone: technical.如果 brief 含糊Hallmark 會(huì)先問(wèn)三個(gè)問(wèn)題Audience / Use case / Tone你回復(fù)一句 go ahead 它就自己推斷并公開說(shuō)明推斷結(jié)果不會(huì)悶頭猜。3. 讀取 CSS 里的指紋印章生成后CSS 文件第一行必有一行印章注釋/* Hallmark · macrostructure: Component Playground · ... */。它的作用是讓下一次運(yùn)行自動(dòng)換一個(gè)不同的宏結(jié)構(gòu)——同一個(gè)項(xiàng)目里連續(xù)兩頁(yè)不會(huì)用同一種形狀。這套輪換規(guī)則定義在 macrostructures.md完整的 21 種結(jié)構(gòu)索引也在這里。4. 交付前過(guò) 69 道AI 味檢查頁(yè)面交付前Hallmark 會(huì)跑一遍 69 道門的 slop-test反 AI 味檢查任何一門沒(méi)過(guò)就返工重寫。規(guī)則全集在 slop-test.md。它不止檢查視覺(jué)還包括不能編造 47% 轉(zhuǎn)化率 這類虛構(gòu)數(shù)據(jù)、移動(dòng)端 320/375/414/768px 四種寬度必須全部可用等。六、寫在最后Component Playground 是 Hallmark 21 種宏結(jié)構(gòu)里最反營(yíng)銷的一種沒(méi)有大圖、沒(méi)有口號(hào)、沒(méi)有動(dòng)效代碼和預(yù)覽本身就是內(nèi)容。它教給我們的不只是組件庫(kù)官網(wǎng)長(zhǎng)什么樣而是一種判斷力當(dāng)頁(yè)面的目的是讓人把代碼帶走而不是讓人掏錢時(shí)一切裝飾都應(yīng)該讓位給可運(yùn)行、可復(fù)制的真實(shí)示例。即使不用 Hallmark這 5 條規(guī)則也值得直接抄進(jìn)你的組件站。 延伸閱讀21-component-playground.md — Component Playground 宏結(jié)構(gòu)完整定義macrostructures.md — 21 種宏結(jié)構(gòu)索引與輪換規(guī)則recipes.md — 8 個(gè)可直接粘貼的示例 briefsite/_tests/README.md — Hallmark 生成的 8 個(gè)測(cè)試頁(yè)說(shuō)明【免費(fèi)下載鏈接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/hal/hallmark創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考