awesome-design-md：直接拿走 73 份 DESIGN.md，3 步生成品牌同款 UI
【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md
让 AI 生成的页面总差股"自家味道"？awesome-design-md 收录了 73 份 DESIGN.md，本文讲清拿哪份、放哪、怎么写自己的。
DESIGN.md 到底管什么？
DESIGN.md 是 Google Stitch 提出的一种纯 Markdown 设计系统文档：AI Agent 读完它，就能生成风格一致的 UI。没有 Figma 导出，没有 JSON Schema，就是一个谁都能读的文本文件。仓库里还住着另一个容易混淆的"兄弟"：
| 文件 | 谁来读 | 管什么 |
|---|---|---|
AGENTS.md | 编码 Agent | 项目怎么构建（"怎么做"） |
DESIGN.md | 设计 Agent | 界面长什么样（"长啥样"） |
说白了：一个管施工，一个管装修，各干各的。
怎么拿一份来用？
三步跑通：
- 拉仓库：
git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md- 放对位置：把目标品牌的
DESIGN.md拷到项目根目录，无需解析、无需配置。 - 一句话开工：对 Agent 说 "build me a page that looks like this"，它会自己读取设计令牌（tokens）和规则。
73 份文档去哪挑？
所有文件都在design-md/目录下，一品牌一文件夹：每个文件夹固定两个文件——DESIGN.md是设计系统本体（Agent 真正读的），README.md是站点的简要说明。合集按行业分成 8 大类、覆盖 70+ 品牌，按口味挑几份：
- 🎨 开发者工具：Vercel、Linear
- 🎵 流媒体与创意：Spotify、Figma
- 💳 金融科技：Stripe、Coinbase
- 🚗 汽车：Tesla、Ferrari
- 🕰 复古怀旧：Dell 1996
完整分类清单在 README.md，按需自取。
怎么写才算好？
通读这 73 份文档，写法其实就两种。
编号式（Spotify 派）：正文用 1–9 编号章节顺序推进——Visual Theme & Atmosphere、Color Palette & Roles、Typography Rules、Component Stylings、Layout Principles、Depth & Elevation、Do's and Don'ts、Responsive Behavior、Agent Prompt Guide——纯 Markdown 散文描述，结构一目了然。
令牌式（Linear / Stripe 派）：文件头部放一段 YAML frontmatter，定义 colors、typography、rounded、spacing、components 等令牌，正文改用{colors.primary}这类引用代替反复出现的色值。改一处令牌、全局生效，Agent 也不会拿错色：
--- name: Linear-design-analysis colors: primary: "#5e6ad2" canvas: "#010102" ink: "#f7f8f8" surface-1: "#0f1011" ---想自己写一份，照这张自检清单过一遍：
- 开头写"设计人格"：2–3 句散文讲清设计哲学。Spotify 直接点出"内容优先的黑暗"——UI 退进阴影，让专辑封面成为唯一色彩来源。
- 色板：名字、色值、用途一个都不能少。Spotify Green
#1ed760只给播放按钮和主 CTA，绝不装饰；#121212是最深背景；#f3727f仅用于错误。 - 字体给一张完整层级表：角色、字号、字重、行高、字间距、用途逐行列全；再注明字重策略（Spotify 只用 700/400 两档）和开源替代（专有字体加载不了时，用 Inter、Geist Sans）。
- 组件写全状态，间距圆角给刻度：按钮默认 / hover / pressed / focus 逐一给值；间距从 4px 或 8px 基础单位往上排，圆角从 4px 徽章排到 9999px 胶囊。
- 禁令 + 即用型提示词：Don'ts 直接砍掉跑偏——Spotify 明令 ❌ 装饰性使用品牌绿；第 9 章还附可复制的现成 prompt，把文档升级成工具。
容易踩的坑有哪些？
⚠️ 写自己的 DESIGN.md 前，先看这四条：
- 只写虚词不写数值："深色高级感"对 Agent 没有信息量，要写
#121212、24px 模糊阴影。 - 同一色值散落硬编码：改一处漏一处，用令牌式引用收口。
- 只写"能做什么"不写"不能做什么"：没有 Don'ts，AI 容易自由发挥。
- 忘记字体 fallback：专有字体加载失败时，Agent 需要一个明确的替代选择。
一张表记住
| 要点 | 一句话 |
|---|---|
| 是什么 | 纯 Markdown 设计系统文档，AI Agent 的"视觉规范" |
| 怎么用 | 拷到项目根目录，让 Agent 读取后生成页面 |
| 两种写法 | 编号式（Spotify）/ 令牌式（Linear） |
| 质量关键 | 语义化色板、完整字体表、组件状态、Don'ts |
| 资源入口 | design-md/目录，73 个品牌任选 |
项目遵循 MIT 协议，贡献指南见 CONTRIBUTING.md。挑一份合眼缘的品牌风格放进项目，让 Agent 开工吧 🎯
【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
