BAOYU-DESIGN // SYSTEM ANALYSIS

它其實就是 Anthropic 官方 claude.ai/design 設計引擎的本地移植版——由宝玉（@dotey / GitHub: JimLiu）打包成任何檔案型 agent 都能跑的 Agent Skill。核心是「用 HTML 當媒材產出設計稿」的一整套方法論。

SOURCE · github.com/JimLiu/baoyu-design · LOCAL ~/.claude/skills/baoyu-design · AUTHOR @dotey · RESKIN celestial-command-hud

00Skeleton — layered load骨架：一次進場的分層載入

Skill 不是一份大 prompt，而是「一個入口 + 一堆按需載入的檔案」。實際運作時模型依序讀：

LOAD SEQUENCE4 STAGES

01SKILL.md — entry orchestration只負責「該讀哪些檔」。判斷 harness、判斷任務類型，把對應檔案指過去。SKILL.md

02system-prompt.md — craft SSOT全部的 craft 準則：排版、色彩、React+Babel 慣例、避免 AI slop、CJK 字型堆疊。這份就是「預設長相」的根源。system-prompt.md

03references/<harness>.md — env tools只有四種能力因環境而異：問問題、預覽、截圖、除錯。Claude Code 讀 claude.md。references/claude.md

04built-in-skills/*.md — per taskwireframe / hi-fi / deck / mobile / doc / video 各一份，用到才讀。built-in-skills/hi-fi-design.md · …

輸出永遠是自包含的 HTML（HTML entry + 幾個 .jsx，React 18.3.1 + Babel standalone 瀏覽器直譯，不需 build step）。偏好 CSS 變數當 token、flex/grid gap 排版——為了讓後續「可被可靠地編輯」。

01Design-system definition它怎麼「定義」一套 design system

答案：design system 是一個 code-first、token-first 的資料夾，被一支可攜的 Node 編譯器掃描後，產出可被別的專案載入的 JS bundle。磁碟上用「根目錄 marker」辨識身分：

KIND	ROOT MARKER	MEANING
design system	`_ds_manifest.json`	自我描述的可消費系統（編譯器寫的）
project	`_d_meta.json`	消費者；綁定的系統放在 _ds/<slug>/

一套系統由四種東西組成，編譯器只認結構、不認名字：

① TOKENS

全域 CSS ＋其 @import closure 裡的每個 --*。正則抽取、依值分類（color/spacing/shadow/other），可用 /* @kind */ 覆寫。

② COMPONENTS

<Name>.jsx ＋同目錄 <Name>.d.ts（props 契約）。有 .d.ts 才有契約與 starting-point 資格。

③ @dsCard

HTML 第一行的標記 → preview 縮圖卡。

④ @startingPoint

opt-in 的起始畫面/元件，消費端 picker 拿它當種子。

compile-design-system.mjs 掃完吐出生成檔（絕不手改）：_ds_bundle.js（掛到 window.<Namespace>）、_ds_manifest.json、_adherence.oxlintrc.json（強制只能用系統 token 的 lint）、preview.html。

SUMMARY01

「定義一套 DS」＝寫 CSS 變數當 tokens ＋寫 React 元件配 .d.ts ＋標好 @dsCard / @startingPoint，再跑編譯器把它變成一包 window.<Namespace> 的 JS。是編譯出來、以 token 為地基的元件庫，不是一份風格描述文件。

02Why every output looks the same為什麼產出看起來都一樣

▲ ROOT CAUSE

你沒有綁任何 design system。沒綁定時，模型 100% 照 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 …
"NEVER converge on the same choices across generations."

它會收斂，是因為你沒給它可以發散的依據：沒有參考 App、沒指定 tone、沒有品牌色/字型、沒有 design system。缺了 design context，就退回安全預設值——SKILL.md 也明講「沒有設計脈絡就開工，必然做出弱設計」。

03Three levers to change the look怎麼換一套設計：三個槓桿

依「持久度 / 一致性」由強到弱。想每次不一樣又互相一致 → 用 1；想這一次特別 → 用 2＋3。

綁一套真的 design system最根本 · 可重用

從 Figma .fig / GitHub repo / 現成 HTML 匯入，或自己 author；編譯後 import-design-system.mjs 拉進 _ds/<slug>/，模型讀 _ds_prompt.md 當強制視覺契約——只能用該套 token 白名單與 window.<Namespace> 元件。（← 本頁就是這樣做的。）

開案下明確美學方向一次性 · 快

在需求裡指定一個「極端 tone」＋差異化重點（例如「editorial 風、襯線大標、黑白配朱紅、不要圓角」），觸發 frontend-design.md 的 bold-direction 路徑。

餵參考素材品質影響最大

提供參考 App／截圖／品牌色／字型。WebFetch 只回文字不回版面，「想長得像某網站」要直接給截圖。（本頁的 HUD 樣貌就源自一張鋼彈00 Veda 終端截圖。）

SHORTEST PATH · NEXT PROMPT→

/baoyu-design 幫我做一個 X 的 dashboard。
  · 用 designs/<某個已編譯的 DS>        ← 槓桿 1
  · 風格走 brutalist / 深色 / 等寬字     ← 槓桿 2
  · 參考這幾張截圖 / 這個 repo           ← 槓桿 3

此頁由 celestial-design-system（namespace CelestialDesignSystem_b3872d）驅動——匯入為 _ds/celestial-design-system/，全部視覺僅用其 var(--*) token 白名單構成。設計語彙取自使用者提供的鋼彈00 電影 AI-OS 控制台截圖；主色 #0186d1（OKLCH L59.8 C0.149 H244.4），把動畫的青綠強調色換成此藍。
來源 repo：github.com/JimLiu/baoyu-design（宝玉 @dotey）。