04 · 從截圖抽一套品牌系統

速覽

產出	一份 DESIGN.md
用時	30 分鐘（加上校驗大概一小時）
型別	「Design System」
價值	全書投入產出比最高的一次操作

為什麼先做這個

一次投入，之後每一次生成都受益。

抽完之後，你不用再在每個提示詞裡描述「我們的主色是什麼、字型用什麼、圓角多大」。所有技能生成的東西都自動長成你們家的樣子。

準備素材

按精度從高到低：

素材	精度	說明
Figma 檔案匯出	最高	帶變數、樣式、元件命名
現有的品牌規範文件	高	直接改寫成 DESIGN.md 即可
產品介面截圖（多張）	中	多張能覆蓋更多元件和狀態
官網截圖（一張）	低	通常只有營銷頁的樣式

有 Figma 就用 Figma。只有截圖的話，儘量多給幾張——一張列表頁、一張表單頁、一張詳情頁，覆蓋的元件型別不一樣。

提示詞

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

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

1. 調色盤
   - 主色、輔色
   - 語義色：成功、警告、錯誤、資訊
   - 中性色階，從最淺到最深，每一級給十六進位制值
   - 每個顏色標註它在截圖裡出現在什麼位置、佔多大面積

2. 字型
   - 字族（能識別就寫名字，識別不出來描述特徵並給回退棧）
   - 字號階梯，每一級標註用途
   - 字重、行高、字距

3. 間距系統
   - 基礎單位
   - 常用間距值
   - 圓角、陰影（給具體數值）

4. 元件規範
   - 按鈕：主要、次要、文字型，每種的預設、hover、focus、disabled
   - 輸入框：預設、聚焦、錯誤、停用
   - 卡片、表格、標籤的預設樣式

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

6. 語氣（如果截圖裡有足夠的文案）
   - 人稱、句長、正式程度

重要：
- 拿不準的地方明確標出來，不要猜一個值填進去
- 截圖裡看不到的（錯誤態、空態、深色模式）列成待補清單，不要編
- 主色的使用比例要寫清楚：它是大面積背景色還是隻用於行動按鈕

為什麼這麼寫

「不要猜一個值填進去」 是這份提示詞最重要的一句。不加的話，你拿到的是一份看起來很完整、有一半是虛構的規範。虛構的部分會在後面每一次生成裡持續生效，而且你不知道哪些是虛構的。

「主色的使用比例」單獨拎出來說，是因為這是抽取時最容易出錯的一項。很多品牌的主色只用在行動按鈕上，佔頁面面積不到 2%。抽出來的系統如果把它當成大面積背景色，生成的頁面會被品牌色淹掉。

「每個顏色標註它在截圖裡出現在什麼位置」 讓你能核對。看到「#0055FF —— 主要按鈕背景、連結文字」你能立刻判斷對不對。

校驗

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

1. 用新系統生成一個頁面（拿 案例 01 的提示詞就行）。
2. 跟你們真實的介面並排放。
3. 重點看這四項：

項	常見偏差
主色使用比例	被當成大面積背景色
標題和正文的字號比	階梯被壓扁，對比不夠
卡片圓角	差 2 到 4 px，觀感明顯不同
按鈕高度和內邊距	偏胖或偏瘦

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

存放

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

提交進 git。之後這份檔案跟著倉庫走，團隊裡每個人都用同一套。

驗收清單

• [ ] 所有顏色都有十六進位制值，沒有「深藍色」這種描述
• [ ] 主色的使用場景和比例寫清楚了
• [ ] 字號階梯每一級都標了用途
• [ ] 按鈕和輸入框的各個狀態都有
• [ ] 待補清單存在（說明它沒有編造看不到的部分）
• [ ] 做過對照測試
• [ ] 已提交進倉庫

變體

補深色模式

這份 DESIGN.md 目前只有亮色。請補一套深色模式的色值。

要求：
- 不是簡單反轉。中性色階要重新設計，深色下的層次靠亮度差而不是陰影
- 主色在深色背景上的對比度要過 WCAG AA
- 語義色（成功/警告/錯誤）在深色下也要保持可識別
- 標註哪些顏色兩個模式共用，哪些各有一套

從競品抽（做研究用）

這是 [某產品] 的介面截圖。抽一份 DESIGN.md 出來，用於分析。

額外分析：
1. 他們的視覺決策解決了什麼問題
2. 哪些做法值得借鑑，哪些是他們特定場景才成立的
3. 如果我們的產品是 [描述]，這套系統裡哪些不適用

抽競品的系統用於學習和分析是正常的設計研究。直接拿去用是另一回事，注意商標和視覺識別的邊界。

多客戶管理

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

同一份技能在不同系統下跑，方法論複用，品牌各自獨立。

常見問題

它說識別不出字型。

正常。截圖裡的字型經常識別不出來。讓它描述特徵（襯線/無襯線、字寬、字重、有沒有特殊的字形），然後你自己填名字，或者給一個回退棧。

顏色抽出來跟設計稿對不上。

截圖有壓縮和色彩管理的影響。有 Figma 或者原始規範的話以那個為準，截圖只用來補元件規範。

抽出來太籠統。

給的截圖不夠。補幾張覆蓋不同元件的圖，尤其是有表單、有表格、有狀態提示的頁面。

相關

• 進階 · 設計系統 — 更完整的說明
• 快速上手 · 設計系統 — 基礎概念
• 案例 05 · Figma 轉程式碼