06 · 設計系統：讓輸出長成你的樣子
「AI 味」是有具體成分的：紫藍漸變、圓角卡片三連、通用圖示、編出來的數字。它不是模型不行，是你沒給方向的時候它只能給平均值。
設計系統就是那個方向。選一個，配色、字型、間距、動效性格、語氣全部鎖死，後面每一次生成都繼承同一套。
一份 DESIGN.md 是什麼
一個 Markdown 檔案，把一套視覺語言寫成機器能讀的約定。官方庫裡有 152 套，每一套都是照著一個真實品牌拆的——Stripe、Linear、Vercel、Airbnb、Tesla、Notion、Apple 這類，用的是它們真實的色值和字型，不是「材料設計通用回退」。
它規定的東西大致是：
| 層 | 管什麼 |
|---|---|
| 調色盤 | 主色、輔色、語義色、中性色階 |
| 字型 | 字族、字號階梯、字重、字距 |
| 間距與網格 | 基礎間距單位、柵格、圓角、陰影 |
| 元件 | 按鈕、卡片、表單、表格長什麼樣 |
| 動效 | 時長、緩動、什麼該動什麼不該動 |
| 語氣 | 文案的人稱、句長、剋制程度 |
怎麼選
先問這份東西要讓人產生什麼反應，再選風格。不要選最好看的那個。
| 你要的效果 | 選什麼感覺的系統 |
|---|---|
| 信任、戰略、企業級可信度 | 乾淨、結構化、剋制、編輯感 |
| 能量、社群、產品勢頭 | 大膽、高飽和、高對比、有表情 |
| 技術深度、資料、研究 | 網格化、模組化、資訊密度高 |
| 面向開發者的 AI 工具 | 數字感、分層、程式碼氣質、電影感 |
這張表來自官方 PPT 教程，但它對網頁、看板、海報同樣適用。
三種用法
一、直接用庫裡的
在外掛庫裡挑一個，專案 snap 上去。之後每一次生成都自動繼承。適合你沒有既定品牌，或者要做的東西本來就該借某種氣質（比如給開發者看的東西借 Linear 的氣質）。
二、從截圖或 Figma 抽一套
這是把你自己的品牌搬進來的最快路徑：
- 把一張截圖或者一份 Figma 匯出丟進介面。
- 讓 Agent 從裡面抽出一份
DESIGN.md。 - 存到倉庫的
design-systems/<你的品牌>/下面。
存好之後，所有技能生成的東西都會長成這個樣子，不用每次在提示詞裡重複描述。
可以直接抄的提示詞：
這是我們產品的一張介面截圖。
請從裡面抽出一份完整的 DESIGN.md，包括：
1. 調色盤（主色、輔色、語義色、中性色階，給出十六進位制值）
2. 字型（字族、字號階梯、字重、行高）
3. 間距系統（基礎單位、常用間距、圓角、陰影）
4. 元件規範（按鈕、卡片、輸入框、表格的預設樣式）
5. 動效性格（時長、緩動、哪些互動該有動效）
拿不準的地方標出來，不要猜一個值填進去。三、手寫一份
如果你已經有品牌規範文件，直接改寫成 DESIGN.md 也行。它就是 Markdown，沒有魔法格式。
設計系統管不到的東西
有一層規則是任何設計系統都覆蓋不了的：可訪問性底線、動效該不該跑、狀態要不要寫全、表單錯誤怎麼提示。這些在 OpenDesign 裡是單獨一層，叫 Craft，12 條，跟品牌無關。
打個比方：設計系統決定按鈕是什麼顏色，Craft 決定這個按鈕必須有 disabled 和 loading 狀態。兩層都在，輸出才不會「好看但不能用」。
詳見 進階 / Craft。
一個實際建議
第一次用別急著抽自己的品牌。先從庫裡挑一個跟你氣質接近的跑兩次，看看設計系統到底在多大程度上改變輸出。有了這個體感之後再抽自己的，你會知道該往 DESIGN.md 裡補什麼。
下一步
07 · 跑通你的第一個產物 — 把前面六篇串成一次真的操作。