02 · 設計系統：152 套品牌，或者你自己的

設計系統是 DESIGN.md——一份把視覺語言寫成機器可讀約定的 Markdown。官方庫裡 152 套，都是照著真實品牌拆的。

快速上手第 6 篇 講了它是什麼和怎麼選。這一篇講怎麼真正把它變成你自己的資產。

官方庫為什麼值錢

每一套預設都取一個真實品牌——Stripe、Linear、Vercel、Airbnb、Tesla、Notion、Apple 這類——按同一套標準 schema 拆解：真實的品牌色值、真實的字型、真實的間距。不是「材料設計通用回退」。

這個差別在輸出上很明顯。給一個通用系統，你得到的是「一般的現代 UI」。給一個品牌級系統，你得到的是有具體氣質的東西——因為色值、字重、圓角這些參數本來就是被某個設計團隊推敲過的。

抽出你自己的一套

這是投入產出比最高的一步。一次投入，之後每次生成都受益。

從截圖抽

最快的路徑。一張產品截圖，或者你們官網的一屏。

這是我們產品的一張介面截圖。

請從裡面抽出一份完整的 DESIGN.md，包含：

1. 調色盤
   - 主色、輔色、語義色（成功/警告/錯誤/資訊）
   - 中性色階，從最淺到最深，給出十六進位制值
   - 每個顏色標註它在截圖裡出現在哪

2. 字型
   - 字族（能識別出來就寫具體名字，識別不出來寫特徵）
   - 字號階梯，標註每一級用在什麼地方
   - 字重、行高、字距

3. 間距系統
   - 基礎單位
   - 常用間距值
   - 圓角、陰影

4. 元件規範
   - 按鈕（主要/次要/文字，各狀態）
   - 卡片、輸入框、表格的預設樣式

5. 動效性格
   - 時長、緩動
   - 哪些互動該有動效

拿不準的地方明確標出來，不要猜一個值填進去。
截圖裡看不到的部分（比如錯誤態、空態），列成待補清單。

最後兩句是關鍵。不加的話，它會把沒看到的部分也編出來，你拿到的是一份看起來很完整但有一半是虛構的規範。

從 Figma 抽

如果有 Figma 檔案，匯出之後同樣丟進去。Figma 匯出帶的資訊比截圖多——變數、樣式、元件命名都在，抽出來的 DESIGN.md 精度更高。

存到哪

your-project/
└── design-systems/
    └── your-brand/
        └── DESIGN.md

存好之後，所有技能生成的東西都會長成這個樣子，不用每次在提示詞裡重複描述品牌。

怎麼驗證抽得對不對

抽完別急著用。做一次對照測試：

1. 用新抽的系統生成一個頁面。
2. 跟你們真實的產品介面並排放。
3. 看這四項：主色的使用比例、標題和正文的字號比、卡片圓角、按鈕的高度和內邊距。

這四項最容易抽偏。尤其是主色使用比例——很多品牌的主色其實只用在行動按鈕上，但抽出來的系統經常把它當成大面積背景色用。

不對就直接改 DESIGN.md，它是 Markdown，手改比重抽快。

一套系統管不到的地方

DESIGN.md 決定長什麼樣，決定不了什麼算合格。

按鈕是什麼顏色，設計系統說了算。按鈕必須有 disabled 和 loading 狀態，這是 Craft 說了算。兩層分開是有意的——換品牌的時候，品質底線不應該跟著變。

詳見 04 · Craft。

多品牌怎麼辦

接客戶專案的話，每個客戶一套：

design-systems/
├── client-a/DESIGN.md
├── client-b/DESIGN.md
└── our-own/DESIGN.md

切換是切一個目錄。同一份技能在不同系統下跑，出來的東西氣質完全不同，但結構和品質是一致的。

這是這套架構在實際專案裡最實用的一點：你的方法論可以複用，客戶的品牌各自獨立。

常見坑

坑	表現	怎麼辦
一次抽完就用	生成出來跟真產品有明顯差距	做對照測試，改 DESIGN.md
主色用得太滿	頁面被品牌色淹了	在系統裡明確寫主色的使用比例和場景
只抽了亮色模式	暗色下一片糊	抽的時候明確要求兩套色值
字型寫了個不存在的名字	渲染時回退成預設字型	用能拿到的字型，或者寫清楚回退棧
每個專案重抽一次	浪費	抽一次存進倉庫，跨專案複用

相關

• 快速上手 · 設計系統 — 基礎概念和怎麼選
• 實戰 · 從截圖抽一套品牌系統 — 完整走一遍
• 04 · Craft — 品牌覆蓋不了的那一層