48K Star倉庫：66個設計系統讓AI寫前端不再醜

🎨 解決 AI 寫前端 UI 醜的問題：awesome-design-md

AI 寫前端最頭疼的問題是什麼？UI 太醜。AI Agent 生成的前端界面往往缺乏設計感，顏色搭配混亂，佈局不協調。

awesome-design-md 這個倉庫徹底解決了這個問題：提供 66 個 DESIGN.md 文件，讓你的 AI Agent 直接生成像素級精確的 UI。

🎯 什麼是 DESIGN.md？

DESIGN.md 是 Google Stitch 引入的新概念：

• 純文本設計系統：用 Markdown 文件定義 UI 設計規範
• LLM 最容易理解：Markdown 是 LLM 最擅長的格式
• 無需 Figma：不需要導出設計文件、不需要 JSON schema
• 即插即用：放到項目根目錄，AI Agent 立即理解

對比：

文件	誰來讀	定義什麼
AGENTS.md	Coding Agents	如何構建項目
DESIGN.md	Design Agents	項目應該如何呈現

📊 66 個設計系統

awesome-design-md 提供了66 個現成的 DESIGN.md 文件，覆蓋各個領域：

AI 公司

• Claude、OpenAI、Cohere、ElevenLabs、Mistral AI、xAI 等
• Google Gemini、Together AI、VoltAgent 等

開發者工具

• Vercel、Cursor、Raycast、Warp、Lovable、Expo
• Supabase、Sentry、Linear、PostHog、Sanity 等

金融科技

• Stripe、Coinbase、Binance、Revolut、Wise
• Kraken、Airtable 等

品牌網站

• Apple、Tesla、Nike、BMW、Ferrari、Lamborghini
• Spotify、Airbnb、Pinterest、Uber、The Verge 等

設計工具

• Figma、Framer、Miro、Webflow、Notion 等

🚀 使用方法

三步即可：

# 1. 复制 DESIGN.md 到项目根目录
# 比如：复制 vercel/DESIGN.md 到你的项目

# 2. 告诉 AI Agent 使用这个设计
"用 DESIGN.md 的设计规范，帮我生成一个首页"

# 3. AI Agent 生成像素级精确的 UI

就這麼簡單！AI Agent 會自動：

• 讀取 DESIGN.md 的顏色規範
• 應用正確的字體和字號
• 使用正確的間距和佈局
• 生成符合設計系統的組件

📝 DESIGN.md 包含什麼？

每個 DESIGN.md 包含9 個完整的設計規範章節：

章節	內容
1. 視覺主題	氛圍、密度、設計哲學
2. 顏色規範	語義名稱 + Hex + 功能角色
3. 字體規則	字體族、完整層級表
4. 組件樣式	按鈕、卡片、輸入框、導航等狀態
5. 佈局原則	間距比例、網格、空白哲學
6. 深度層級	陰影系統、表面層級
7. 規範指南	設計護欄和反模式
8. 響應式	斷點、觸摸目標、摺疊策略
9. Agent 提示	快速顏色參考、現成提示詞

📁 每個站點包含

• DESIGN.md：設計系統文檔（AI Agent 讀取）
• preview.html：視覺預覽（顏色、字體、組件）
• preview-dark.html：深色模式預覽

💡 示例設計系統

幾個經典示例：

Vercel

• 黑白精準、Geist 字體
• 極簡主義、代碼優先

Apple

• 大量留白、SF Pro 字體
• 電影級圖片、高級感

Stripe

• 標誌性紫色漸變
• weight-300 優雅感

Tesla

• 極簡減法設計
• 電影級全屏攝影、Universal Sans

📝 總結

awesome-design-md 徹底改變了 AI 寫前端的方式：

• 66 個現成的 DESIGN.md 文件
• 覆蓋 AI 公司、開發者工具、金融、品牌等領域
• 純 Markdown 格式，LLM 最容易理解
• 三步即可：複製 → 放到項目 → AI 生成完美 UI
• Google Stitch 概念，官方支持

從此，AI 寫前端不再醜了。

GitHub：https://github.com/VoltAgent/awesome-design-md

Google Stitch：https://stitch.withgoogle.com/docs/design-md/overview/