🎨
把设计规范装进一个 markdown，AI 照着生成一致的 UI
Awesome DESIGN.md：84 个知名网站的设计系统文件（DESIGN.md），复制进你的项目，AI agent 一句话就能"做成这样"
MIT
12.2万 Star
DESIGN.md × 84
📖 它是什么
Awesome DESIGN.md（仓库 VoltAgent/awesome-design-md）是一个DESIGN.md 文件合集——收录了 84 个知名网站（Claude、Stripe、Figma、Vercel、Cursor、Linear、Apple、Nike、Spotify、IBM、Tesla…）的"设计系统文档"。
DESIGN.md 是 Google Stitch 提出的新概念：一个纯文本的设计系统文档，专门给 AI agent 读。它就一个 markdown 文件——不用 Figma 导出、不用 JSON schema、不用特殊工具。放进项目根目录，任何 AI 编程 agent 或 Google Stitch 立刻明白你的 UI 该长什么样。类比：AGENTS.md 告诉 coding agent"怎么建项目"，DESIGN.md 告诉 design agent"项目看起来、感觉起来该怎样"。
这个仓库把真实网站的设计规范（色板、字体、组件、布局、响应式）拆成标准化的 DESIGN.md，每个文件都按 9 个 section 组织：视觉主题 / 色板与角色 / 排版规则 / 组件样式 / 布局原则 / 阴影层级 / Do's & Don'ts / 响应式 / Agent 提示词。还附带 preview.html / preview-dark.html 可视化目录（色板、字阶、按钮、卡片）。MIT 协议，GitHub 已 122,316 Star（全球排名约 #150），2026-03 建仓、仍活跃更新。
📎 GitHub：github.com/VoltAgent/awesome-design-md ｜ 官网：getdesign.md ｜ 请求定制：getdesign.md/request
✨ 核心亮点
📚
84 个设计系统
Claude/Stripe/Vercel/Figma/Apple/Nike 等真实网站的规范拆解
📄
纯 Markdown
一个 DESIGN.md，无 Figma、无 JSON schema、无特殊工具，LLM 最好读的格式
🤖
AI 原生
复制进项目根，任何 coding agent / Google Stitch 立刻懂你的 UI
🎨
真实深度
色板/token/规则/组件状态/响应式全拆解，不是表面模仿
🖥️ 环境要求
| 产物 | 一个 DESIGN.md（markdown）+ 可选 preview.html（可视化目录） |
| 使用方 | 任何能读文件的 AI coding agent（Claude Code/Cursor 等）或 Google Stitch |
| 安装 | 无安装；把 DESIGN.md 复制进项目根目录即可 |
| 读取 | Markdown，LLM 原生友好，无需解析/配置 |
| 协议 | MIT（提取的是公开可见 CSS token，不拥有站点视觉身份） |
🚀 上手步骤
⚡ 两步上手：① 把某站的 DESIGN.md 复制进项目根；② 告诉你的 AI agent"build me a page that looks like this"——它就会按这套设计语言生成视觉一致的 UI。
① 拿一份 DESIGN.md（复制或下载）
# 在 GitHub 上搜 awesome-design-md，进仓库找你要的品牌
# 或打开官网 getdesign.md，搜品牌（如 vercel / stripe / figma / claude）
# 每个品牌提供：DESIGN.md + preview.html + preview-dark.html想自定义品牌？去 getdesign.md/request 提交请求，包括私密、只发给你个人的专属 DESIGN.md。
② 放进项目根目录
# 在你的项目根目录放一个 DESIGN.md（与 AGENTS.md 并列）
your-project/
├── AGENTS.md # 告诉 coding agent 怎么建项目
├── DESIGN.md # 告诉 design agent 界面该长什么样
└── src/③ 对 AI 说"做成这样"
"Read DESIGN.md and build me a landing page that looks like this."
"Follow our DESIGN.md — colors, type, components."
"Make a pricing page in the Vercel style."你的 coding agent 会读 DESIGN.md 里的 9 个 section，生成颜色、字体、组件、布局都贴合设计语言的 UI。
④ 用 preview.html 验收（可选）
打开品牌的 preview.html / preview-dark.html，可看到色板色块、完整字阶、按钮/卡片/输入框等组件的视觉效果，和 AI 生成的成品对照。
关键信息速查
| 一句话 | 84 个知名网站的 DESIGN.md 合集，放进项目让 AI 生成匹配 UI |
| 格式 | 纯 Markdown（Google Stitch DESIGN.md 概念 + 扩展 section） |
| 每站内容 | DESIGN.md + preview.html + preview-dark.html |
| 数量 | 84 个设计系统（AI/DevTools/DB/金融/电商/消费/汽车/复古） |
| 使用 | 复制进项目根 → 对 AI 说"做成这样" |
| 定制 | getdesign.md/request 可请求任意站（含私密专属） |
| 协议 | MIT |
🖼️ 效果图与演示
DESIGN.md 放进项目，AI 生成匹配 UI（演示示意）：
84 个知名网站的设计系统 token 集合（演示示意）：
一句话"做成这样" → AI 生成匹配设计语言的 UI（演示示意）：
每个品牌自带 preview.html / preview-dark.html 可视化目录（色板、字阶、按钮、卡片），可先看效果再决定用哪套，或拿它和 AI 生成的成品对照验收。
🎯 典型玩法
🏷️ 复刻品牌风：做一版 Vercel / Stripe / Linear 风格页面，颜色字体组件都像
🛠️ 项目规范落地：把 DESIGN.md 放进你的项目根，AI 生成的每页都一致
🎨 给 AI 定义审美：不用反复"更像一点"，设计语言一次写进 markdown
🔎 设计参考库：84 套真实网站规范，当灵感库 / 学习知名产品怎么做 UI
🕹️ 复古网页：Dell(1996)/Nintendo(2001) 等，生成年代准确的复古 UI
✉️ 定制专属：getdesign.md/request 请求你想要的网站，含私密专属
📊 和同类做法比
| 口头让 AI 模仿某站 | "做成像 XX 那样"；看一次生成一次，容易跑偏、不稳定 |
| Figma / 设计 token JSON | 导出设计系统；要专门工具、要配置、LLM 读 JSON 不如 markdown |
| Awesome DESIGN.md | 复制一个 DESIGN.md 进项目；纯 markdown LLM 最好读，颜色/字体/组件/规则全拆解，AI 稳定复现一致 UI |
⚠️ 注意：提取的是各站点公开可见的 CSS token 与规范，属于"参考学习/辅助生成"，不构成对任何品牌视觉身份的归属声明；要完全复刻知名品牌请留意各自商标与品牌合规。DESIGN.md 约束的是"看起来像"，具体功能/内容仍由你的 agent 和代码决定。
原理一句话：Markdown 是 LLM 读取效率最高的文本格式。把真实网站的设计系统（色板语义角色、字体层级、组件状态、间距网格、阴影层级、响应式断点、正反例）整理成结构化的 9 段 markdown，放进项目根后，AI agent 在生成 UI 时"看到"的是完整、明确的设计约束，而不是几张截图或一句话风格，所以输出能稳定贴合设计语言。
❓ 常见问题
Q：DESIGN.md 是什么？要装什么工具吗？
它是 Google Stitch 提出的概念：一个纯文本的设计系统文档，专门给 AI agent 读。不需要安装任何东西——就是一个 markdown 文件，任何能读文件的 AI coding agent 或 Google Stitch 都直接认。
Q：和 AGENTS.md 有什么区别？
AGENTS.md 告诉 coding agent"怎么构建项目"（命令、结构、约定）；DESIGN.md 告诉 design agent"界面看起来、感觉起来该怎样"（颜色、字体、组件、布局）。两者都放项目根，分工互补。
Q：这个仓库提供什么？
84 个知名网站（Claude/Stripe/Vercel/Figma/Linear/Apple/Nike/Spotify/IBM/Tesla 等）的 DESIGN.md 文件，每个还带 preview.html 和 preview-dark.html 可视化目录。复制一份进项目根就能让 AI 按那套风格生成 UI。
Q：怎么用？
两步：① 拿一份 DESIGN.md（GitHub 仓库或 getdesign.md 下载）；② 复制进项目根，然后对 AI 说"read DESIGN.md and build me a page that looks like this"。
Q：每个 DESIGN.md 里有什么？
9 个 section：视觉主题与氛围、色板与语义角色（名字+hex+功能）、排版规则（完整层级表）、组件样式（按钮/卡片/输入/导航含状态）、布局原则（间距刻度/网格/留白）、深度与阴影、Do's and Don'ts、响应式行为、Agent 提示词指南。
Q：能定制任意网站的 DESIGN.md 吗？
能。到 getdesign.md/request 提交请求，包括私密、只发给你个人的专属 DESIGN.md。
Q：我可以改这些文件吗？
可以。仓库欢迎贡献：修正颜色、补缺失 token、改进描述；提 PR 前先开 issue 讨论。文件也完全开放给你自己增删改。
Q：免费吗？协议？
免费，MIT 协议。文件"as is"提供；token 提取自公开可见 CSS，仓库不声明对任何站点视觉身份的归属，用知名品牌风格时请自行留意商标与合规。
🎨 GitHub 搜索 VoltAgent/awesome-design-md ｜ 官网 getdesign.md
关注「AI工具匠」，获取更多 AI 工具实操教程