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 立即理解

对比：

📊 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 个完整的设计规范章节：

📁 每个站点包含

• 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/