大家好，我是 Ai 學(xué)習(xí)的老章

AGENTS.md 這玩意兒現(xiàn)在大家都熟了——告訴 AI 怎么構(gòu)建項目

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

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

文件

誰讀

定義什么

AGENTS.md

編碼 Agent

怎么構(gòu)建項目

DESIGN.md

設(shè)計 Agent

項目長什么樣、什么感覺

一個純文本設(shè)計系統(tǒng)文檔，AI Agent 讀完就能產(chǎn)出風(fēng)格一致的 UI——不用 Figma 導(dǎo)出、不用 JSON schema、不用任何特殊工具

VoltAgent 團隊搞了個 awesome 集合

github.com/VoltAgent/awesome-design-md

把市面上 73 個主流網(wǎng)站的 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 說"照這個風(fēng)格做"，就完事

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

倉庫已經(jīng)收集了什么

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

AI & LLM 平臺（直接拿來抄的目標(biāo)）

• Claude —— Anthropic 風(fēng)格，溫暖的赤陶色調(diào)，干凈的編輯式版面

• Cohere —— 企業(yè) AI 平臺，活潑漸變，數(shù)據(jù)密集儀表盤

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

• Mistral AI —— 法國式極簡，紫色調(diào)

• Ollama —— 終端優(yōu)先，單色簡潔

• OpenCode AI —— 開發(fā)者向暗色主題

• Replicate —— 白色畫布，代碼優(yōu)先

• Runway —— AI 創(chuàng)意工具，電影節(jié)式美學(xué)

• Together AI —— …

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

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

DESIGN.md 里寫什么

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

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

• 
  

  品牌定位 / 個性形容詞

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

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

• 間距系統(tǒng)

• 圓角 / 陰影 / 邊框

• 組件示范（按鈕、卡片、表單、導(dǎo)航）

• 動效原則

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

所有這些都用人話寫在一個 markdown 文件里，沒有任何嵌套 JSON 或 token 結(jié)構(gòu)

怎么用

最簡單的玩法：

1. 在 getdesign.md 找一個你心儀的網(wǎng)站風(fēng)格

2. 把對應(yīng)的 DESIGN.md 下載到自己項目根目錄

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

進階玩法：

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

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

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

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

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

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

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