給AI寫一份"UI說明書"，就能生成和任何大牌網站一樣風格的界面

這個思路來自 Google Stitch 提出的 DESIGN.md 概念——一個純文本的設計系統文檔，AI Agent 讀完之後就知道這個項目的 UI 該長什麼樣。

VoltAgent 做的事是：把 72 個知名網站的設計系統全部提煉成了 DESIGN.md 文件，放到 GitHub 上開源。

DESIGN.md 是什麼

就是一個 Markdown 文件。沒有 Figma 導出，沒有 JSON Schema，沒有任何特殊工具。

扔到項目根目錄，告訴你的 AI 編程助手"按照這個風格幫我做一個頁面"，它就能生成視覺上高度一致的 UI。

邏輯上和 AGENTS.md 是一對：

AGENTS.md — 告訴 AI 怎麼構建項目（工程規範）
DESIGN.md — 告訴 AI 項目應該長什麼樣（設計規範）

每個文件包含什麼

每份 DESIGN.md 都按照固定結構提煉了 9 個維度：（1）視覺主題與氛圍（設計哲學、信息密度）

（2）色板與語義角色（顏色 + Hex + 用途定義）

（3）字體規則（字族、完整層級表）

（4）組件樣式（按鈕、卡片、輸入框，含各狀態）

（5）佈局原則（間距尺度、網格、留白哲學）

（6）層次與陰影（投影系統、表面層級）

（7）Do's & Don'ts（設計護欄和反例）

（8）響應式行爲（斷點、觸摸目標）

（9）Agent Prompt 指南（顏色速查表 + 現成 prompt）

非常有用！

Vibe Coding 時代最大的痛點之一是：AI 生成的 UI 視覺質量參差不齊，風格混亂，和你想要的差一截。

DESIGN.md 本質上是在給 AI 裝一個"美學約束"——不是靠 prompt 裏描述顏色，而是直接把完整的設計語言餵給它。

這個項目把別人已經驗證過的、被市場認可的設計系統，變成隨手可取的文件。

現在覆蓋的網站

72 個，橫跨主流 AI、開發工具、金融科技、電商、汽車、媒體： Claude（暖陶磚色調）、Cursor（暗色+漸變）、Vercel（黑白精準）、Stripe（紫色漸變+字重 300）、Linear（超極簡+紫色）、Notion（溫暖極簡+襯線標題）、Figma（多色+活潑）、Spotify（暗色+綠色+專輯封面驅動）、Tesla（激進減法+全視口攝影）、Ferrari（黑白高對比+極度稀疏）……

甚至還有 Dell 1996 年的老網站設計——讓 AI 生成復古 UI 也行。

項目地址：github.com/VoltAgent/awesome-design-md