世界上最便宜的設計師：Claude Code+ Design.md

大家好，我是 Ai 學習的老章

AGENTS.md 這玩意兒現在大家都熟了——告訴 AI 怎么構建項目

但你讓 AI 給你寫個落地頁 / 儀表盤 / 后臺，它的視覺總是和你的產品風格對不上——按鈕顏色不對、字體不對、間距不對、動效不對

Google Stitch 推了一個新概念叫 DESIGN.md——和 AGENTS.md 是兄弟文件：

文件

誰讀

定義什么

AGENTS.md

編碼 Agent

怎么構建項目

DESIGN.md

設計 Agent

項目長什么樣、什么感覺

一個純文本設計系統文檔，AI Agent 讀完就能產出風格一致的 UI——不用 Figma 導出、不用 JSON schema、不用任何特殊工具

VoltAgent 團隊搞了個 awesome 集合

github.com/VoltAgent/awesome-design-md

把市面上 73 個主流網站的 DESIGN.md 都扒下來了，可以直接 copy 到自己項目里用

思路有多簡單

按 README 的話：

? Copy a DESIGN.md into your project, tell your AI agent "build me a page that looks like this" and get pixel-perfect UI that actually matches.

把 DESIGN.md 丟項目根目錄，跟 AI 說"照這個風格做"，就完事

為什么 Markdown？因為 LLM 讀 Markdown 最順，沒東西需要 parse 或配置

倉庫已經收集了什么

倉庫按品類組織，老章掃一眼最實用的幾個分類：

AI & LLM 平臺（直接拿來抄的目標）

• Claude —— Anthropic 風格，溫暖的赤陶色調，干凈的編輯式版面

• Cohere —— 企業 AI 平臺，活潑漸變，數據密集儀表盤

• ElevenLabs —— AI 語音，暗色電影感 UI，音頻波形美學

• Mistral AI —— 法國式極簡，紫色調

• Ollama —— 終端優先，單色簡潔

• OpenCode AI —— 開發者向暗色主題

• Replicate —— 白色畫布，代碼優先

• Runway —— AI 創意工具，電影節式美學

• Together AI —— …

集合里 73 個網站基本覆蓋了 AI / 工具 / 編輯器 / 設計 / 內容 / SaaS / 個人站等大類，需要哪種感覺直接挑

每個站點的 DESIGN.md 都在 getdesign.md 這個站點上，點開就能看

DESIGN.md 里寫什么

按 Google Stitch 官方定義(stitch.withgoogle.com/docs/design-md/overview/) 大致包括：

Google Stitch 對 DESIGN.md 的官方說明頁

• 
  

  品牌定位 / 個性形容詞

• 配色（主色、輔色、語義色）

• 字體（家族、字號、字重、行高）

• 間距系統

• 圓角 / 陰影 / 邊框

• 組件示范（按鈕、卡片、表單、導航）

• 動效原則

• 整體氣質描述（"克制"、"活潑"、"電影感"…）

所有這些都用人話寫在一個 markdown 文件里，沒有任何嵌套 JSON 或 token 結構

怎么用

最簡單的玩法：

1. 在 getdesign.md 找一個你心儀的網站風格

2. 把對應的 DESIGN.md 下載到自己項目根目錄

3. 告訴 Claude Code / Cursor / Codex："基于 DESIGN.md，做一個 XX 頁面"

進階玩法：

• 混搭 ——把兩個站的 DESIGN.md 元素提煉后合并成你自己的

• 公司專用 ——給團隊所有 AI 工具配同一份 DESIGN.md， 保證多人多 Agent 出的頁面是一套

• 配 AGENTS.md 用 ——一個說怎么搭，一個說怎么看，前端項目兩份文檔夠了

這事的關鍵不在于"VoltAgent 幫你扒了 73 個網站"——而在于DESIGN.md 這個概念本身值得納入工作流

讓 AI 寫代碼靠 AGENTS.md 來對齊工程約束，讓 AI 寫界面靠 DESIGN.md 來對齊視覺約束——一前一后，讓 AI 做的事更可預測

對個人開發者來說，最大的解放是：不用每次都把 Figma 鏈接、品牌指南、配色細節嚼爛喂給 AI——一份 DESIGN.md 全搞定

制作不易，如果這篇文章覺得對你有用，可否點個關注。給我個三連擊：點贊、轉發和在看。若可以再給我加個，謝謝你看我的文章，我們下篇再見！