Skill 解析 · Claude Code
它其實就是 Anthropic 官方 claude.ai/design 設計引擎的本地移植版 —— 由宝玉（@dotey / GitHub: JimLiu）打包成任何檔案型 agent 都能跑的 Agent Skill。核心是「用 HTML 當媒材產出設計稿」的一整套方法論。
來源 · github.com/JimLiu/baoyu-design · 安裝於本機 ~/.claude/skills/baoyu-design · 作者 @dotey（宝玉）
Skill 不是一份大 prompt，而是「一個入口 + 一堆按需載入的檔案」。實際運作時模型會依序讀：
輸出永遠是自包含的 HTML（通常是一個 HTML entry + 幾個 .jsx，用 React 18.3.1 + Babel standalone 在瀏覽器直譯，不需 build step）。它偏好用 CSS 變數當 token、用 flex/grid gap 排版，就是為了讓後續「可被可靠地編輯」。
答案：design system 是一個 code-first、token-first 的資料夾，被一支可攜的 Node 編譯器掃描後，產出可被別的專案載入的 JS bundle。
所有東西都平放在 designs/ 底下，用「根目錄有沒有某個 marker 檔」來區分身分，不是看資料夾名字：
| 身分 | 根目錄 marker | 意義 |
|---|---|---|
| Design System | _ds_manifest.json | 自我描述的可消費系統（編譯器寫的） |
| 一般專案 | _d_meta.json | 消費者；綁定的系統放在 _ds/<slug>/ |
glob designs/*/_ds_manifest.json 就只會撈到「被 author 的系統」，不會誤中被消費的副本（那些在深一層）。這就是它「不維護索引檔、每次靠 glob 即時發現」的設計。
全域 CSS（styles.css/tokens.css… 其一）＋它 @import 進來的所有檔案。編譯器用正則抽出每個 --var 宣告，還能讀 /* @kind color */ 註解做分類；@font-face 也從這個 closure 讀。
任意目錄下的 <Name>.jsx/.tsx ＋ 同目錄 <Name>.d.ts（props 契約）。有 .d.ts 才有 props 契約、adherence 規則、起始點資格。
在任何 .html 第一行放 <!-- @dsCard group=… -->，preview 頁就會把它當一張卡片渲染。元件目錄需要一張來當縮圖。
opt-in 的「起始畫面 / 起始元件」。消費端的 picker 會拿它當種子。沒標記，編譯器就忽略。
node <skill>/agents/compile-design-system.mjs designs/<project>編譯器（ds-core.mjs 是零寫入的共用 parser）掃完之後吐出這些生成檔（絕不手改）：
| 產出 | 作用 |
|---|---|
_ds_bundle.js | 把所有元件編譯打包，掛到 window.<Namespace> 上供別的頁面用 |
_ds_manifest.json | namespace、components、tokens、cards、startingPoints、CSS closure 路徑 |
_adherence.oxlintrc.json | lint 規則 —— 強制頁面只能用系統的 token，不准亂發明 |
preview.html | 單檔互動式檢視頁（跑 build-preview.mjs） |
.d.ts ＋ 標好 @dsCard/@startingPoint，然後跑編譯器把它變成一包 window.<Namespace> 的 JS。它是編譯出來的、以 token 為地基的元件庫，不是一份風格描述文件。這是最關鍵的一題，而且原因很單純。
system-prompt.md ＋ frontend-design.md 的預設 craft 準則走 —— 而那套準則就是一個收斂點。所以每次生成都往同一個「Claude Design 家族長相」靠。諷刺的是，frontend-design.md 自己白紙黑字要求發散：
Tone: Pick an extreme — brutally minimal, maximalist chaos,
retro-futuristic, luxury/refined, editorial/magazine,
brutalist/raw, art deco/geometric …
"NEVER converge on the same choices across generations."它會收斂，是因為你沒給它可以發散的依據：沒有參考 App、沒有指定 tone、沒有品牌色/字型、沒有 design system。缺了 design context，它就退回安全的預設值 —— SKILL.md 也明講「沒有設計脈絡就開工，必然做出弱設計」。
依「持久度 / 一致性」由強到弱排序。想要每次都不一樣、又互相一致 → 用 1；想要這一次特別 → 用 2＋3。
先取得一套系統 —— 可從 Figma .fig GitHub repo 現成 HTML 匯入，或自己 author。編譯後，在你的專案裡匯入一份自包含副本：
node <skill>/agents/import-design-system.mjs <dsDir> <projectDir> --primary它會把系統同步進 <project>/_ds/<slug>/，並生成 _ds/<slug>/_ds_prompt.md —— 這份就是關鍵：模型每次設計前都要讀它，並把它當成強制視覺契約。裡面含綁定宣告、bundle 接線、完整 guide、每個元件的用法節錄、以及准用的 var(--*) token 白名單。之後每個頁面都只能用這套的 tokens 與 window.<Namespace> 元件組出來，不准自己發明色彩/字型/元件。
結果 換系統 = 換一個 _ds/，長相整個變，而且同系統下所有頁面一致。
在需求裡就指定一個「極端 tone」＋差異化重點。例如：「editorial/magazine 風、襯線大標、黑白配一個朱紅、不要圓角卡片」。這會觸發 frontend-design.md 的 bold-direction 路徑，把它從預設值拉開。
提供參考 App／截圖／品牌色／字型。system-prompt 明說參考素材「對品質影響最高，要主動要」。注意：WebFetch 只回文字不回版面，「想長得像某網站」要直接給截圖。也可以把現成 HTML/GitHub 當 design source 匯入。
與其抱怨長得一樣，不如在第一句就給脈絡。任一即可，越多越準：
/baoyu-design 幫我做一個 X 的 dashboard。
· 用 designs/<某個已編譯的 design system> ← 槓桿 1
· 風格走 brutalist / 深色 / 等寬字為主 ← 槓桿 2
· 參考這幾張截圖 / 這個 repo ← 槓桿 3沒有任何一項時，它就只能給你「那個一直重複的樣子」。
驗證方式：本文所有機制均直接讀取本機 ~/.claude/skills/baoyu-design/ 的 SKILL.md、system-prompt.md、built-in-skills/{create-design-system,use-design-system,frontend-design}.md、agents/lib/ds-core.mjs 而來，非記憶推測。
來源 repo：github.com/JimLiu/baoyu-design（作者宝玉 @dotey）—— 它是 Anthropic claude.ai/design 引擎的本地 Agent Skill 移植。