一、这是个什么东西？先从一个场景说起
你有没有这样的经历：让 Cursor、Claude、Copilot 帮你写页面，结果生成的 UI 丑得像 2005 年的网站？按钮颜色乱七八糟，字体大小随机，间距全靠蒙？
问题不在于 AI 不聪明，而在于 AI 不知道你想要什么风格。
awesome-design-md 解决的就是这个问题。它的核心思路极其简单：
把一个叫
DESIGN.md的文件放进你的项目根目录，然后告诉 AI：「按这个风格帮我做页面」——AI 就能生成像 Stripe、Vercel、Linear 那样级别的 UI。
二、核心概念：什么是 DESIGN.md？
DESIGN.md 是由 Google Stitch 引入的一个新概念——一份用 Markdown 写成的设计系统文档。
它的特别之处在于：Markdown 是 LLM（大语言模型）读得最好的格式。没有 JSON schema、没有 Figma token 导出、没有任何特殊工具，就是一个普通的文本文件。
你可能熟悉 AGENTS.md（告诉 AI agent 怎么 build 项目），DESIGN.md 是它的设计版本：
┌─────────────────┬──────────────────┬────────────────────────────────┐
│ 文件名 │ 被谁读 │ 定义什么 │
├─────────────────┼──────────────────┼────────────────────────────────┤
│ AGENTS.md │ 代码 AI agent │ 如何构建项目（工程规范） │
│ DESIGN.md │ 设计 AI agent │ 项目应该长什么样（视觉规范） │
└─────────────────┴──────────────────┴────────────────────────────────┘
awesome-design-md 这个仓库做的事是：把 59+ 个主流品牌（Stripe、Apple、Notion、Spotify 等）的 DESIGN.md 提取出来，整理成一个开箱即用的合集。
三、项目架构一览
awesome-design-md/
├── design-md/ ← 核心：59+ 品牌设计系统
│ ├── stripe/ ← 每个品牌一个目录
│ │ └── (→ getdesign.md/stripe/design-md)
│ ├── vercel/
│ ├── notion/
│ ├── apple/
│ ├── linear.app/
│ └── ... (共 59 个品牌)
├── CONTRIBUTING.md ← 贡献指南
├── LICENSE ← MIT 开源协议
└── README.md ← 项目说明
注意：设计文件已迁移到 getdesign.md 网站托管，仓库目录作为入口索引。你可以通过
npx getdesign@latest add <品牌名>一键下载到本地。
四、每个 DESIGN.md 里有什么？
以 Vercel 的 DESIGN.md 为例，每份文件都包含 9 个标准章节：
DESIGN.md 结构
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
§1 Visual Theme & Atmosphere 视觉主题与氛围
§2 Color Palette & Roles 色板与语义化颜色角色
§3 Typography Rules 字体排版规则（完整层级表）
§4 Component Stylings 组件样式（按钮/卡片/输入框/导航）
§5 Layout Principles 布局原则（间距/栅格/留白哲学）
§6 Depth & Elevation 阴影层级系统
§7 Do's and Don'ts 设计边界（能做/不能做）
§8 Responsive Behavior 响应式断点与折叠策略
§9 Agent Prompt Guide 给 AI 的快速提示词指南
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
每个品牌目录还附带：
DESIGN.md— 设计系统文档（AI 读的那份）preview.html— 亮色模式可视化预览（色板、字阶、按钮、卡片）preview-dark.html— 暗色模式可视化预览
五、快速上手（三步走）
步骤 1：选一个你喜欢的品牌风格
先去 getdesign.md 浏览，挑一个视觉风格符合你项目调性的品牌。
品牌分类速查：
| 类别 | 代表品牌 | 适用场景 |
|---|---|---|
| 极简黑白 | Vercel、Linear、Tesla | 开发者工具、SaaS |
| 深色技术 | Cursor、Warp、ElevenLabs | IDE、终端、AI 工具 |
| 紫色高端 | Stripe、Superhuman、Kraken | 支付、金融、高端 SaaS |
| 暖色友好 | Notion、Airbnb、Zapier | 内容产品、工作流 |
| 绿色开发 | Supabase、Mintlify、Wise | 数据库、文档、金融科技 |
| 彩色活泼 | Figma、Lovable、Miro | 设计工具、协作平台 |
步骤 2：下载 DESIGN.md 到项目根目录
bash
# 方法一：CLI 一键安装（推荐）
npx getdesign@latest add stripe
# 方法二：安装其他品牌
npx getdesign@latest add vercel
npx getdesign@latest add notion
npx getdesign@latest add linear
执行后，项目根目录会出现一个 DESIGN.md 文件。
步骤 3：告诉你的 AI agent 使用它
# 在 Cursor / Claude / Copilot 里输入：
请参考项目根目录的 DESIGN.md，帮我构建一个产品落地页
就这三步。
六、实用示例
🟢 初级示例：生成一个 Stripe 风格的支付页面
场景：你在做一个 SaaS 产品，需要一个高端的定价页。
bash
# 1. 安装 Stripe 设计系统
npx getdesign@latest add stripe
然后在 Cursor 中输入：
根据 DESIGN.md，帮我创建一个定价页面组件：
- 三个套餐（Free / Pro / Enterprise）
- 使用 Stripe 的紫色渐变主色和 weight-300 的优雅字体风格
- 卡片样式用文档里描述的阴影规范
- 推荐套餐要有高亮效果
Stripe DESIGN.md 核心参数速查：
主色调：签名紫色渐变
字重风格：weight-300 优雅纤细
适用场景：支付平台、高端金融科技 UI
氛围关键词：精致、可信、优雅
🟡 进阶示例：混搭两种设计系统
场景：你想要 Vercel 的极简黑白骨架，但局部用 Stripe 的紫色渐变做 CTA 按钮。
bash
npx getdesign@latest add vercel
然后参考 Vercel DESIGN.md 的 §9 Agent Prompt Guide：
创建一个 hero 区域：
- 背景：纯白 #ffffff
- 标题：48px Geist 字体，字重 600，字间距 -2.4px，颜色 #171717
- 副标题：20px，字重 400，行高 1.80，颜色 #4d4d4d
- 主 CTA 按钮：深色背景 #171717，白色文字，6px 圆角
- 次要按钮：白色背景，用阴影代替边框（rgba(0,0,0,0.08) 0px 0px 0px 1px）
- 卡片：不用 CSS border，改用阴影叠层：
rgba(0,0,0,0.08) 0px 0px 0px 1px,
rgba(0,0,0,0.04) 0px 2px 2px,
#fafafa 0px 0px 0px 1px
Vercel 最有意思的设计技巧：他们用
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)来代替传统的 CSSborder，这让圆角更自然、过渡更平滑，是值得学习的工程细节。
🔴 高级示例：用 DESIGN.md 建立完整的组件库规范
场景：你是一个前端团队 lead，想为整个团队建立统一的 UI 规范，并让所有 AI agent 遵循。
第一步：下载最贴合产品调性的 DESIGN.md，作为团队基础规范
bash
npx getdesign@latest add linear # 适合工程师文化的产品团队
第二步：在项目里创建 DESIGN.md（基于 Linear 的，做定制化修改）
Linear DESIGN.md 的色板结构示例：
markdown
## 2. Color Palette & Roles
| Token Name | Hex | 用途 |
|---------------|-----------|------------------------|
| --color-bg | #0f0f11 | 页面背景（接近纯黑） |
| --color-fg | #f7f8f8 | 主文本 |
| --color-accent| #5e6ad2 | 品牌紫色，主要交互元素 |
| --color-muted | #8a8f98 | 次要文本、占位符 |
| --color-border| #2a2d34 | 边框、分割线 |
第三步：配合 AGENTS.md 使用，形成「工程+设计」双规范
markdown
# AGENTS.md（工程规范）
- 使用 React + TypeScript
- 组件放在 /components 目录
- **所有 UI 实现必须遵循 DESIGN.md 中的设计规范**
第四步：让 AI 生成符合规范的完整页面组件
参考 DESIGN.md 和 AGENTS.md，帮我生成一个 Dashboard 页面：
- 左侧导航（Linear 风格，极简黑色，紫色 accent 高亮激活项）
- 顶部工具栏（搜索框 + 通知图标 + 用户头像）
- 内容区：任务看板（三列：Todo / In Progress / Done）
- 每张卡片遵循文档 §4 Component Stylings 中的卡片规范
七、59 个品牌设计风格速览
仓库目前收录 59 个品牌，按行业分类：
AI & LLM 平台（12 个）
| 品牌 | 视觉特征 | 一句话描述 |
|---|---|---|
| Claude | 暖赤陶色 accent | 温暖、编辑排版感 |
| Cursor | 深色 + 渐变 | AI 代码编辑器美学 |
| ElevenLabs | 暗黑电影感 | 音波可视化氛围 |
| Ollama | 单色终端风 | 极简纯 CLI 感 |
| xAI | 纯粹黑白 | 未来主义极简 |
| Mistral AI | 紫色法式极简 | 工程师优雅 |
开发者工具（7 个）
| 品牌 | 视觉特征 | 最适合做什么 |
|---|---|---|
| Vercel | 黑白精准 + Geist 字体 | 开发者平台、部署工具 |
| Linear | 超极简 + 紫色 accent | 项目管理、工程师工具 |
| Warp | 暗色 IDE 感 | 终端、命令行工具 |
| Raycast | 深色 + 渐变 | 效率工具、launcher |
| Expo | 代码中心化暗色 | React Native、移动端 |
金融科技（7 个）
| 品牌 | 视觉特征 | 氛围 |
|---|---|---|
| Stripe | 紫色渐变 + weight-300 | 精致、高端 |
| Coinbase | 清洁蓝色 | 信任、机构感 |
| Revolut | 深色 + 渐变卡片 | 现代金融 |
| Wise | 亮绿色 | 友好、清晰 |
设计与创意（6 个）
| 品牌 | 视觉特征 | 氛围 |
|---|---|---|
| Figma | 多彩活泼 | 专业又有趣 |
| Framer | 黑色 + 蓝色 + 动态感 | 设计师首选 |
| Miro | 亮黄 accent | 协作、无限画布 |
八、DESIGN.md 文件结构深度解析
拿 Vercel 的文件作为完整案例，看看每个章节实际长什么样：
§1 视觉主题（最重要，定基调）
Vercel 的视觉是「让开发者基础设施变得不可见」的设计命题——极度克制，接近哲学层面。页面大量使用白色，文字用近黑色
#171717，制造画廊般的空旷感。
这一节告诉 AI：这个设计的精神内核是什么。
§2 色板（精确到 hex）
Primary: #171717 → 主文本、标题
White: #ffffff → 页面背景
Red: #ff5b4f → Ship（发布）工作流
Pink: #de1d8d → Preview（预览）工作流
Blue: #0a72ef → Develop（开发）工作流
颜色有语义，不是随意用的——这就是设计系统的核心价值。
§3 字体层级（完整表格）
角色 字号 字重 字间距 用途
──────────────────────────────────────────────
Display Hero 48px 600 -2.4px 最大标题
Section Head 40px 600 -2.4px 章节标题
Sub-heading 32px 600 -1.28px 卡片标题
Body Large 20px 400 normal 介绍文本
Body 18px 400 normal 正文
Caption 12px 400 normal 元数据
Mono Body 16px 400 normal 代码块
§4 组件（带状态描述）
按钮分类：
┌──────────────────────────────────────────────┐
│ Primary Dark #171717 bg, 白色文字, 6px r │
│ Primary Light 白色 bg, 阴影代边框, 6px r │
│ Pill Badge #ebf5ff, 9999px r, 状态标签 │
└──────────────────────────────────────────────┘
卡片规范：
- 背景：#ffffff
- 不用 CSS border！用阴影叠层替代
- 阴影：rgba(0,0,0,0.08) 0px 0px 0px 1px,
rgba(0,0,0,0.04) 0px 2px 2px,
#fafafa 0px 0px 0px 1px ← 内部微发光
- 圆角：8px
§7 设计边界（防止 AI 乱来）
这一节非常关键——明确告诉 AI 哪些事绝对不能做：
❌ 不能用正值 letter-spacing（Geist 永远是负值或零）
❌ 卡片不能用 CSS border（必须用阴影）
❌ 不能引入暖色（橙、黄、绿）到 UI chrome
❌ 不能把工作流颜色（红/粉/蓝）用作装饰
❌ 不能在主要 CTA 按钮上用全圆角（全圆角只给徽章用）
§9 Agent Prompt Guide（即插即用的提示词模板）
这一节直接给你可以复制的提示词：
"创建一个 hero section：白色背景。
标题 48px Geist 字重 600 字间距 -2.4px 颜色 #171717。
副标题 20px 字重 400 行高 1.80 颜色 #4d4d4d。
深色 CTA（#171717 6px 圆角 8x16px 内距）
和 ghost 按钮（白色，阴影边框 rgba(0,0,0,0.08) 0px 0px 0px 1px）。"
九、工作流程全景图
awesome-design-md 工作流
═══════════════════════════════════════════════════════════
你的需求
│
▼
┌──────────────────────────────────────────┐
│ 1. 选风格 │
│ 去 getdesign.md 浏览 69 个品牌 │
│ 按「行业分类」或「视觉关键词」筛选 │
└──────────────────┬───────────────────────┘
│
▼
┌──────────────────────────────────────────┐
│ 2. 安装 │
│ npx getdesign@latest add <品牌> │
│ → 项目根目录生成 DESIGN.md │
└──────────────────┬───────────────────────┘
│
▼
┌──────────────────────────────────────────┐
│ 3. 让 AI 读取并生成 UI │
│ Cursor / Claude / Copilot / Lovable │
│ "参考 DESIGN.md，帮我做 X 页面" │
└──────────────────┬───────────────────────┘
│
▼
┌──────────────────────────────────────────┐
│ 4. 迭代精调 │
│ 用 §9 的 Prompt 模板精确描述 │
│ 用 §7 的 Do's/Don'ts 纠错 AI │
└──────────────────────────────────────────┘
═══════════════════════════════════════════════════════════
十、如何贡献
项目目前采用**「先开 Issue 讨论，再提 PR」**的流程：
你发现某个品牌的颜色值不准确
│
▼
开一个 GitHub Issue
描述问题 + 截图对比
│
▼
等 maintainer 反馈确认
│
▼
修改 DESIGN.md（对照真实网站 CSS）
更新 preview.html / preview-dark.html
│
▼
提交 PR（附 before/after 说明）
注意：目前不接受新品牌的 PR，只接受对已有文件的质量改进。新品牌请通过 getdesign.md 的 Request 功能申请（也支持私有请求，仅交付给你）。
十一、进阶技巧：让效果更好的几个经验
1. 优先用 §9 Agent Prompt Guide 里的模板
每个 DESIGN.md 的第 9 章都有现成的提示词模板，直接复制比自己描述效果好 10 倍。
2. 先给 AI 看整个 DESIGN.md，再提需求
# 效果差的方式：
帮我做个 Stripe 风格的按钮
# 效果好的方式：
我的项目根目录有 DESIGN.md，里面是 Stripe 的设计规范。
请先读取这个文件，然后帮我做一个定价卡片组件，
严格遵循文档中 §4 Component Stylings 里的卡片规范。
3. 用 §7 Do's and Don'ts 来纠错
如果 AI 生成的结果不对，把 §7 的内容复制进去追问：
你给的按钮用了 CSS border，但 DESIGN.md §7 明确说明不能用 CSS border，
必须用阴影叠层替代。请重新生成。
4. 组合多个 DESIGN.md
你可以同时下载多个品牌的文件，让 AI 融合：
参考 vercel-DESIGN.md 的黑白布局骨架，
用 stripe-DESIGN.md 里的阴影和色彩系统，
帮我创建一个支付成功页面。
5. 把 DESIGN.md 纳入项目 CI/CD 检查
在 Code Review 中，用 AI 检查 PR 里的 UI 代码是否符合 DESIGN.md 规范，形成自动化的设计一致性保障。
十二、总结
awesome-design-md 的意义不只是「一堆 Markdown 文件的合集」，它代表了一种新的工作范式：
- 以前：设计师出 Figma 稿 → 前端像素还原 → 和设计师反复确认
- 现在：一个 DESIGN.md → AI 直接生成符合设计规范的代码
这个项目的爆火（64.2k ⭐，仅 3 周）说明社区对这个方向的认可。它最大的价值是把大厂积累多年的设计智慧，平民化地开放给所有开发者。
无论你是独立开发者、小团队还是大公司，只要你在用 AI 写前端代码，awesome-design-md + DESIGN.md 都应该成为你工具箱的标配。
推荐收藏：github.com/VoltAgent/a… | getdesign.md
许可证：MIT，可以自由用于商业项目。设计 token 均来自公开网站的 CSS 值，不涉及版权问题。
