什麼是 DESIGN.md？

什麼是 DESIGN.md？

DESIGN.md 是由 Google Stitch 推出的一種開源格式，專門用來讓 AI 撰寫程式的 Agent（如 Claude Code、Cursor、Windsurf 等）理解專案的設計系統 。它可以被理解為視覺設計領域的 AGENTS.md 。

它的核心精神在於將設計視為嚴謹的邏輯與系統工程。這份文件結合了機器可讀的 YAML 設計標記（Design Tokens）與人類可讀的 Markdown 說明文字 。YAML 負責給予 AI 精確的數值（例如色碼、字級），而 Markdown 則賦予這些數值語意和使用情境 。

---

DESIGN.md 的核心設計方法與技巧

要讓 AI Agent 完美遵循品牌邏輯，撰寫 DESIGN.md 時需要掌握以下技巧：

1. 雙層架構（YAML + Markdown）：不要只給 AI 數值，要給予脈絡。在 YAML 區塊定義像 #1A1C1E 這樣的精確標記，並在 Markdown 中說明「這是主背景色，傳達科技與冷靜感」 。

2. 遵循標準的 8 大區塊：根據官方規範，依序定義：品牌總覽、色彩系統、字體階層、版面與留白、深度與陰影、形狀、元件樣式，以及 Do's and Don'ts 。

3. 定義語意化標記（Semantic Tokens）：使用變數參照（如 {colors.primary}）而非寫死色碼 。這能讓 AI 知道該在主要按鈕上使用「主色」，而不是隨機挑選顏色 。

4. 善用 Do's and Don'ts 設立護欄：大型語言模型對於「負面指令」的反應非常好。明確告訴 AI「不要亂加額外顏色」、「不要過度裝飾」，能有效約束 AI 的發散行徑 。

5. 搭配 CLI 工具驗證與輸出：官方提供了 @google/design.md CLI 工具，你可以使用 lint 指令來檢查檔案是否有無效的參照或不符合 WCAG 規範的對比度，也可以使用 export 將其直接轉換為 Tailwind 設定檔 。

---

對不同角色的價值與實戰指南

對設計師來說：從「畫布」到「規則制定者」

DESIGN.md 並不會取代 Figma，Figma 依然是視覺探索的工具 。但對於設計師而言，這是一個改變工作交付模式的契機：

• 作法：你不再只是把設計稿丟過牆，而是將腦中的「設計邏輯」轉譯成一份視覺合約 。透過設定明確的元件狀態、網格系統與視覺規範，你確保了即使是 AI 生成的畫面，也完全符合你的品牌氣質 。

• 價值：降低了溝通成本。你不需要再對著畫面抓漏、要求工程師把按鈕向左移 2px，因為基礎的設計品質已經被文件鎖定了。

💻 對開發者來說：實現極致的 Vibe Coding

當開發模式轉向由 AI 處理基礎設施與程式碼生成時，DESIGN.md 是拼圖的最後一塊。

• 作法：直接將這份 Markdown 檔案放入專案根目錄。當你使用 Claude Code 或 Cursor 等工具下達 Prompt 時，只需說：「請依專案中的 DESIGN.md 建立定價頁面」 。

• 價值：徹底消滅了「功能寫得很快，但 UI 像拼裝車」的痛點 。開發者不需要自己通靈字體大小或 padding，AI 會自動讀取並套用設計系統，讓你專注於架構與業務邏輯的開發 。

🏢 對老闆 / 產品負責人來說：加速驗證與統一品牌體驗

對於需要快速推動產品上線的管理者來說，時間與一致性就是成本。

• 作法：在開發初期（如打造 MVP 或建立 C2M 平台前端），直接引入或生成一份符合商業調性的 DESIGN.md 。讓整個跨職能團隊（行銷、設計、開發）都以這份文件為視覺基準 。

• 價值：極大地縮短了產品開發週期，減少反覆修改畫面的浪費 。它能確保無論是 SaaS 後台、活動行銷頁還是電商結帳流程，都能維持高度的品牌專業感，而不需要每次都動用龐大的設計與前端資源從零刻畫 。