Awesome DESIGN.md：10 天 39K 顆星，AI 編碼時代的設計系統怎麼用一個 Markdown 檔搞定

Q: DESIGN.md 的準確度如何？能直接用在生產環境嗎？

awesome-design-md 的色票、字型和間距不保證 100% 準確。實務上比較適合當快速原型的起點，正式上線前需要人工對照原始設計規範調整。

Q: 除了 Google Stitch，哪些 AI 編碼工具支援 DESIGN.md？

任何能讀 Markdown 的 LLM 工具都支援，包括 Claude Code、Cursor、Lovable、Bolt.new、v0 等。Google Stitch 原生內建讀取和生成，其他工具需要手動把檔案放進專案。

Q: 我該自己寫 DESIGN.md 還是用 awesome-design-md 的現成版本？

如果是建自己品牌的產品，建議用 Google Stitch 從網站自動抽取再手動修正。如果只是做原型或 demo，直接用 awesome-design-md 的現成版本比較快。

Awesome DESIGN.md 是一個收錄 55 個以上知名網站設計系統的開源專案，用純 Markdown 格式讓 AI 編碼工具直接讀取並生成一致的 UI。2026 年 3 月 31 日上線，截至 4 月 10 日已累積超過 39,000 顆 GitHub 星星和 5,000 個 Fork，是 2026 年第二季成長最快的開源專案之一。

這個專案解決的問題很具體：你用 Claude Code 或 Cursor 寫程式的時候，要求「幫我做一個像 Stripe 風格的定價頁」，AI 通常會生出一個看起來還行但跟 Stripe 實際風格差很遠的東西。色票不對、字型不對、間距不對。DESIGN.md 就是要填這個落差。

DESIGN.md 是什麼？跟 AGENTS.md 差在哪？

DESIGN.md 的概念最早來自 Google Stitch。2026 年 3 月 19 日，Google Labs 把 Stitch 從一個實驗性 AI UI 生成工具升級成完整的「vibe design」平台，其中一項新功能就是 DESIGN.md 支援——一個用 Markdown 寫的設計系統描述檔，AI 讀了之後就知道你的品牌該長什麼樣。

用一個類比就能理解它的定位：

檔案	讀者	定義內容
AGENTS.md	編碼 Agent	怎麼建構專案
DESIGN.md	設計 Agent	專案該長什麼樣
README.md	人類開發者	專案是什麼

Markdown 是 LLM 最擅長讀的格式，不需要解析器、不需要特殊工具、不需要設定。把 DESIGN.md 丟進專案根目錄，任何 AI 編碼工具都能直接用。

VoltAgent 做了什麼

VoltAgent 是一個 AI Agent 框架的開發團隊。他們在 Google 發布 DESIGN.md 概念後的 12 天（3 月 31 日），就推出了 awesome-design-md，把 55 個以上知名網站的設計系統抽取出來，整理成標準化的 DESIGN.md 格式。

每個網站的資料夾結構是這樣的：

design-md/
└── stripe/
    ├── DESIGN.md          # 設計系統（AI 讀這個）
    ├── preview.html       # 視覺預覽（亮色）
    └── preview-dark.html  # 視覺預覽（暗色）

涵蓋的網站橫跨多個產業：

類別	代表網站
AI 工具	Claude、Cursor、Ollama、Replicate、Together AI
SaaS	Figma、Notion、Linear、Miro、Intercom
開發者工具	Vercel、Expo、PostHog、Raycast、Resend
金融科技	Stripe、Coinbase、Revolut、Wise、Kraken
汽車	BMW、Ferrari、Lamborghini、Renault、Tesla
大型科技	IBM、SpaceX、Spotify、Uber

每個 DESIGN.md 檔案遵循 Google Stitch 的標準格式，包含：視覺主題與氛圍描述、色票（含語意命名）、字型層級、元件樣式（含各種狀態）、版面原則、高度系統、設計護欄。

成長數據：10 天 39K 星是怎麼來的

先看時間線：

日期	事件
2026/3/19	Google Stitch 發布重大更新，引入 DESIGN.md 概念
2026/3/19	Figma 股價當天跌 8.8%，相關 Twitter 討論超過 1,590 萬次瀏覽
2026/3/31	VoltAgent 發布 awesome-design-md
2026/4/3	三天內累積 4,385 顆星
2026/4/7	突破 35,000 顆星，推出 getdesign.md 網站
2026/4/10	達到約 39,600 顆星、5,000 個 Fork

日均成長約 3,900 顆星。這個速度在開源專案裡很罕見，通常只有重大產品發布（像 DeepSeek 或 Manus AI）才會有類似數字。

成長背後有幾個推力。第一，Google Stitch 的發布創造了巨大的討論量和搜尋需求，awesome-design-md 直接搭上了這波浪潮。第二，這個專案的使用門檻極低——一行 curl 指令就能把任何設計系統拉進你的專案。第三，vibe coding 已經是開發者圈子裡的主流話題，DESIGN.md 自然成了 vibe design 的對應物。

getdesign.md：從開源走向商業化

值得注意的是，VoltAgent 已經開始把 GitHub 上的 DESIGN.md 內容遷移到自家的 getdesign.md 網站。在 GitHub 上點進 Cursor、Framer、SpaceX 等熱門品牌的資料夾，會看到一行「Design system details have been moved to: https://getdesign.md/...」的訊息。

這個操作暗示了幾件事：第一，VoltAgent 已經在用 README 裡的「1M+ view」流量優勢招攬贊助商。第二，getdesign.md 可能會發展成付費服務，提供「私人定製 DESIGN.md」的付費請求已經在 GitHub 上公開列出。第三，開源引流、付費變現的路徑跟 21st.dev 的 UI 元件庫模式類似。

社群怎麼看

Twitter/X 上的反應以正面為主。GitHub Projects 官方帳號發文介紹後引發大量轉發，日本開發者社群也在 Threads 上分享了使用心得。LobeHub 技能市集已經收錄了 awesome-design-md 作為可安裝的 Agent 技能。

不過也有質疑的聲音。Threads 上有使用者留言表示「充其量讓 AI 產出更一致，搞不好只會更笨」，指出 DESIGN.md 抽取的色票和間距可能跟實際設計系統有出入，用了反而可能導致「content rot」（內容劣化）。GitHub Issues 頁面目前有超過 340 個 issue，多數是社群請求新增特定網站的 DESIGN.md，但也有部分是回報色票錯誤或 token 描述不精確的問題。

CONTRIBUTING.md 裡有一條值得注意的規則：VoltAgent 不接受社群提交的 DESIGN.md PR，只接受改善現有檔案的 PR。這表示品質控制集中在核心團隊（目前只有 4 位貢獻者），也可能跟維護 getdesign.md 的內容獨佔性有關。

實務上怎麼用

使用方式分兩種。如果你只要一個品牌的設計系統：

# 例：拿 Vercel 的設計系統
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/vercel/DESIGN.md

下載後放進專案根目錄，然後跟你的 AI 編碼工具說：

Build me a landing page hero section. Follow the DESIGN.md in the project root for all styling decisions.

Claude Code、Cursor、Lovable 和 Google Stitch 都能讀 DESIGN.md。Google Stitch 原生支援，其他工具則是透過 LLM 的 Markdown 理解能力。

如果你想替自己的網站生成 DESIGN.md，Google Stitch 提供了從任意 URL 自動抽取設計系統的功能。不過根據實際使用者回報，這個功能目前還不太穩定，有時候會跑出「hit a temporary technical limit」的錯誤訊息。

Google Stitch 的脈絡：設計工具戰爭

理解 awesome-design-md 的爆發需要放進 Google Stitch 的大脈絡裡看。

Stitch 最早在 2025 年 5 月的 Google I/O 上以實驗專案亮相（前身是 Google 收購的 Galileo AI），當時只能根據文字描述生成單一 UI 畫面。2026 年 3 月 19 日的更新把它變成了完全不同的產品：可以同時生成最多 5 個互相連結的畫面、支援語音指令即時修改設計、引入 DESIGN.md 做跨專案的設計一致性、還能一鍵匯出到 Figma。

市場反應很直接：Figma 股價在 Stitch 更新發布的當天跌了 8.8%，隔天再跌 4%，2026 年累計跌幅約 35%。Stitch 目前免費使用，標準模式（Gemini 2.5 Flash）每月 350 次生成、進階模式（Gemini 2.5 Pro）每月 50 次。

DESIGN.md 在這個脈絡裡是 Stitch 最有長期策略價值的功能。短期來看它只是一個設計系統的匯入匯出格式，但長期來看，如果 DESIGN.md 成為 AI 編碼和 AI 設計工具的通用標準，Google 就在設計工具市場拿到了一個類似 Markdown 在文件格式市場的定位——不是靠鎖定來綁使用者，而是靠開放標準來圍堵競爭對手。

DESIGN.md 跟 Figma Design Token 有什麼不同？

Figma 的 Design Token 用 JSON 格式，需要外掛才能匯出，主要給前端工程師用。DESIGN.md 用純 Markdown 寫，LLM 可以直接讀，不需要任何工具鏈。兩者不互斥：DESIGN.md 可以包含 Figma Token 的資訊，但用自然語言描述，讓 AI 更容易理解設計意圖而非只是數值。

DESIGN.md 的準確度如何？能直接用在生產環境嗎？

awesome-design-md 的 README 寫得很清楚：這些不是官方設計系統，色票、字型和間距不保證 100% 準確。實務上比較適合當快速原型的起點，正式上線前還是需要人工對照原始設計規範調整。

awesome-design-md 是誰維護的？會持續更新嗎？

VoltAgent 團隊維護，目前只有 4 位核心貢獻者。考量到 getdesign.md 的商業化方向和贊助模式已經建立，持續更新的可能性蠻高。但社群不能直接提交新的 DESIGN.md，只能改善既有檔案。

除了 Google Stitch，哪些 AI 編碼工具支援 DESIGN.md？

任何能讀 Markdown 的 LLM 工具都支援。Claude Code、Cursor、Lovable、Bolt.new、v0 等都可以。差別在於 Google Stitch 原生內建了 DESIGN.md 的讀取和生成，其他工具需要你手動把檔案放進專案。

我該自己寫 DESIGN.md 還是用 awesome-design-md 的現成版本？

如果你是在建自己品牌的產品，建議用 Google Stitch 從你的網站自動抽取，再手動修正。如果你只是需要快速做原型或 demo，直接用 awesome-design-md 的現成版本比較快。

引用來源

Author Insight

我們團隊替客戶做設計專案時，設計一致性一直是最花時間的痛點。工程師用 Claude Code 可以在 10 分鐘內生出功能完整的頁面，但接下來要花兩倍時間調顏色、字型和間距來符合品牌規範。DESIGN.md 的出現讓這個流程縮短了大約六成。

不過，我對 awesome-design-md 的長期價值有保留。抽取別人的設計系統來用，在原型階段很方便，但真正上線的產品不該用別人的設計語言。DESIGN.md 更大的價值在於格式本身——每個品牌都應該維護自己的 DESIGN.md，讓內部的 AI 工具和外部的代理商都能用。

如果你的團隊正在導入 AI 編碼工具，把品牌設計系統整理成 DESIGN.md 是投入產出比最高的一件事。不確定怎麼開始的話，歡迎跟 Tenten 團隊預約諮詢，我們可以根據你現有的 Figma 或 CSS 檔案，幫你建立第一版 DESIGN.md。

The ultimate organizer who keeps projects on schedule, within budget, and moving smoothly from start to finish.