什麼是 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 時需要掌握以下技巧: 雙層架構(YAML + Markdown) :不要只給 AI 數值,要給予脈絡。在 YAML 區塊定義像 #1A1C1E 這樣的精確標記,並在 Markdown 中說明「這是主背景色,傳達科技與冷靜感」 。 遵循標準的 8 大區塊 :根據官方規範,依序定義:品牌總覽、色彩系統、字體階層、版面與留白、深度與陰影、形狀、元件樣式,以及 Do's and Don'ts 。 定義語意化標記(Semantic Tokens) :使用變數參照(如 {colors.primary} )而非寫死色碼 。這能讓 AI 知道該在主要按鈕上使用「主色」,而不是隨機挑選顏色 。 善用 Do's and Don'ts 設立護欄 :大型語言模型對於「負面指令」的反應非常好。明確告訴 AI「不要亂加額外顏色」、「不要過度裝飾」,能有效約束 AI 的發散行徑 。 搭配 CLI 工具驗證與輸出 :官方提供了 @google/design.md CLI 工具,你可以使用 lint 指令來檢查檔案是否有無效的參照或不符合 WCAG 規範的對比度,也可以使用 export 將其直接轉換為 Tailwind 設定檔 。 對不同角色的價值與實戰指南 對設計師來說:從「畫布」到「規則制定者」 DESIGN.md 並不會取代 Figma,Figma 依然是視覺探索的工具 。但對於設計師而言,這是一個改變工作交付模式的契機: 作法 :你不再只是把...
熱血,是一輩子的事! Answer is there, dig it.