最近在 GitHub 上看到一個非常有趣的專案 — awesome-design-md，已經累積超過 10 萬顆星。這個專案收集了 73 個知名網站的 DESIGN.md 文件，涵蓋從 Apple、Stripe 到 Tesla、Nike 等各大品牌的設計系統。
什麼是 DESIGN.md？
DESIGN.md 是 Google Stitch 推出的一個新概念：一個純文字格式的設計系統文件，專門讓 AI 代理讀取，據此生成視覺一致的使用者介面。
它本質上就是一個 Markdown 檔案。不需要匯出 Figma、不需要 JSON schema、不需要特殊工具。把檔案丟進專案根目錄，任何 AI 程式碼代理或 Google Stitch 就能立刻理解你的 UI 應該長什麼樣子。Markdown 是大型語言模型最容易讀取的格式，完全不需要額外解析或設定。
專案中有一個很好的對照表：
| 檔案 | 讀取者 | 定義內容 |
|---|---|---|
AGENTS.md | 程式碼代理 | 如何建構專案 |
DESIGN.md | 設計代理 | 專案的視覺外觀與風格 |
收藏了哪些品牌？
專案收錄了超過 70 個知名品牌的 DESIGN.md，按類別整理如下：
AI 與大型語言模型平台
- Claude — 溫暖的赤陶色調、乾淨的編輯式佈局
- OpenCode AI — 以開發者為中心的暗色主題
- Ollama — 終端為先的單色簡約風格
- xAI — 極簡主義、未來感的單色設計
- Replicate — 潔白畫布、以程式碼為核心
開發者工具與 IDE
- Cursor — 流線型暗色介面、漸層強調色
- Vercel — 黑白精準、Geist 字體
- Raycast — 深色金屬質感、鮮豔漸層
- Warp — 現代終端、區塊式命令 UI
後端、資料庫與 DevOps
- Supabase — 暗色翡翠綠主題、程式碼優先
- Sentry — 暗色儀表板、資料密集
- PostHog — 活潑的刺蝟品牌、開發者友善
電商與零售
- Airbnb — 溫暖珊瑚色、攝影驅動
- Nike — 單色 UI、超大寫字母
- Stripe — 標誌性紫色漸層、優雅的字重
汽車品牌
- Tesla — 極致減法、電影級全視口攝影
- Ferrari — 明暗對比黑白編輯風格、極度簡約
- Lamborghini — 真黑畫布、金色強調
甚至還有復古網頁系列 — 1996 年的 Dell 和 2001 年的 Nintendo.com，讓 AI 代理能生成那個年代的懷舊風格介面。
每個 DESIGN.md 裡有什麼？
每個文件都遵循 Stitch DESIGN.md 規範，並包含擴展章節：
- 視覺主題與氛圍 — 情緒、密度、設計哲學
- 色彩配置與角色 — 語意命名 + 色碼 + 功能用途
- 排版規則 — 字體族、完整層級表
- 元件樣式 — 按鈕、卡片、輸入框、導覽列及其各狀態
- 佈局原則 — 間距系統、格線、留白哲學
- 景深與層次 — 陰影系統、表面層級
- 宜與忌 — 設計護欄與反模式
- 響應式行為 — 斷點、觸控目標、折疊策略
- 代理提示指南 — 快速色彩參考、即用提示詞
每個品牌還包含兩個預覽檔案：preview.html（亮色版）和 preview-dark.html（暗色版），視覺化展示色票、字階、按鈕和卡片。
實際範例：Claude 的 DESIGN.md
以 Claude 為例，其 DESIGN.md 詳細描述了 Anthropic 的設計語言：
- 基底色調：溫暖的奶油色畫布（#faf9f5），刻意避開其他 AI 品牌常用的冷灰色
- 品牌強調色：赤陶珊瑚色（#cc785c），用於所有主要 CTA 按鈕
- 字體組合：Copernicus 衬線字體（標題）搭配 StyreneB 無襯線字體（內文），營造文學出版物的質感
- 表面模式：奶油色基底 → 奶油色卡片 → 深色產品展示，交替使用創造節奏感
文件中甚至包含了「宜與忌」章節，例如：「不要使用冷灰色或純白作為畫布底色，奶油色才是品牌」、「不要在 serif 標題上使用粗體，Copernicus 700 讀起來太張揚」。
為什麼這個專案重要？
這個專案解決了一個 AI 輔助開發中的核心痛點：如何讓 AI 生成的 UI 保持視覺一致性。
過去我們只能靠口頭描述或提供參考截圖，AI 生成的結果往往與品牌風格不符。現在只要把 DESIGN.md 丟進專案，AI 代理就能精確掌握色彩、字體、元件和佈局規則，生成符合設計語言的介面。
對前端開發者和設計師來說，這是一個強大的工具：
- 快速原型：複製品牌 DESIGN.md，告訴 AI 生成頁面，即可獲得符合設計語言的成果
- 品牌一致性：AI 不再自由發揮，而是遵循明確的設計 token 和規則
- 降低溝通成本：設計文件從 Figma 截圖變成 AI 可直接讀取的結構化 Markdown
如何使用？
- 從 GitHub 倉庫 選擇一個品牌的 DESIGN.md
- 複製到你的專案根目錄
- 告訴你的 AI 代理使用它來生成 UI
也可以透過 npx getdesign@latest add [品牌名] 快速安裝，或到 getdesign.md 請求特定網站的 DESIGN.md。
結語
awesome-design-md 展現了 AI 時代設計工作的新可能。當設計系統從設計工具的專屬格式轉變為 AI 可理解的純文字文件，設計與工程的邊界將進一步模糊。這不是要取代設計師，而是讓設計決策能更精準地傳遞到每個像素。
如果你正在使用 AI 輔助前端開發，絕對值得收藏這個專案。
發佈留言