一、这期视频的核心观点：AI 做 UI 的「一致性」难题，一份 DESIGN.md 就解了
视频讲的做法很直接：把某个品牌的 DESIGN.md 复制到你项目根目录，再跟 AI 编码助手说「照这份规范给我做页面」，它就能出风格一致的 UI。背后的逻辑是——AI 生成界面最大的痛点不是「写不出来」，而是「写着写着跑偏、每次都不太一样」；而一个把颜色令牌、字号阶梯、间距、圆角、组件规格、以及「哪些事不能做」都写死的 Markdown 文档，恰好是给 LLM 读的、零配置、零解析成本的「视觉宪法」。
视频没展开技术细节，本文把这份仓库实查补全：它是什么、74 个品牌怎么组织、一份 DESIGN.md 内部长什么样、以及真正落地的那一步怎么做。
二、它到底是什么：Google Stitch 提出的「设计系统即文档」
先澄清一个容易搞混的点：DESIGN.md 不是这个仓库发明的，是 Google Stitch 引入的一个概念（仓库 README 直接给了 Stitch 的 DESIGN.md 概览链接）——一份「AI 能读的纯文本设计系统文档」。仓库 VoltAgent/awesome-design-md（MIT 开源，11.8 万星，homepage 即 getdesign.md）做的是「把这个概念落到 74 个真实品牌」：从各大网站扒出并分析出 DESIGN.md，你复制其中一份进项目，AI 立刻照它出一致 UI。
仓库 README 一句话点破了分工：AGENTS.md 告诉编码 agent「怎么 build这个项目」，DESIGN.md 告诉设计 agent「这个该长什么样」——两份 Markdown 各司其职，都放在根目录即可。Markdown 是 LLM 读得最顺的格式，所以这里没有 Figma 导出、没有 JSON schema、没有任何特殊工具，这就是它最大的优点：零门槛、零解析成本。
三、仓库结构：74 个品牌 × 一份 DESIGN.md（实查 74/74）
实查仓库树（2026-09-28）：design-md/ 目录下共 74 个品牌目录、74 份 DESIGN.md，结构统一是 design-md/<品牌>/DESIGN.md（同目录再配一份 README.md）。品牌按 9 类铺开，覆盖面很广：
- AI & LLM：claude、cohere、elevenlabs、mistral.ai、ollama、replicate、runwayml、x.ai、minimax、together.ai …
- 开发者工具 / IDE：cursor、expo、lovable、raycast、superhuman、vercel、warp
- 后端 / 数据库 / DevOps：clickhouse、composio、hashicorp、mongodb、posthog、sentry、supabase、sanity
- SaaS / 生产力：cal、intercom、linear.app、notion、mintlify、resend、zapier
- 设计 / 创意：airtable、clay、figma、framer、miro、webflow
- 金融 / 加密：binance、coinbase、kraken、mastercard、revolut、stripe、wise
- 电商 / 零售：airbnb、meta、nike、shopify、starbucks
- 媒体 / 消费科技：apple、hp、ibm、nvidia、pinterest、playstation、spacex、spotify、theverge、uber、vodafone、wired
- 汽车：bmw、bmw-m、bugatti、ferrari、lamborghini、renault
换句话说，你想让 AI 出一个「像 Stripe 支付页 / 像 Vercel 官网 / 像 Apple 产品页」的界面，直接挑对应那一份复制即可。仓库还提供 在线订做——想要哪个品牌的 DESIGN.md 可以提请求（含私有订做只发给你）。
四、一份 DESIGN.md 长什么样：三层闭环（token 机器层 / 语义人类层 / 红线约束层）
扒了 Vercel、Apple 等几份样例，格式高度统一，是一个文件、三层内容的闭环：
① 文件顶部是 YAML front-matter（机器可读层），固定 8 个键：version（多为 alpha）、name、description、colors（40+ 个颜色令牌：品牌色 / 表面色 / 文字色 / 语义色 / 渐变对）、typography（13 档左右：display→button，含字体族/字号/字重/行高/字距）、rounded（9 档圆角：none→full/pill）、spacing（12 档间距：xxs 4px→section 192px）、components（约 20–30 个组件令牌：导航/按钮/卡片/表单/页脚/营销区块，再配一批 ex-* 示例组件）。
② 正文是人类可读层，## 章节通常 8–11 节，与上面的键一一对应：Overview（设计哲学 + 关键特征）、Colors、Typography、Layout（间距/栅格/容器/断点）、Elevation & Depth（阴影几级）、Shapes（圆角刻度 + 图像几何）、Components（按按钮/卡片/输入/导航/招牌组件分组）、Do's and Don'ts、Responsive Behavior（断点/触控目标/折叠策略）、Iteration Guide（怎么维护）、Known Gaps（诚实声明哪些没覆盖）。
③ 红线约束层是精华——Do's and Don'ts 把「哪些事绝对不能做」写死。例如 Vercel 那份写了 7 条 Do + 7 条 Don't（勿引入第 6 个强调色、标题勿全大写、投影勿用单一重影、渐变勿缩到图标级、字重勿超 600、两种 pill 圆角勿混用、正文勿用等宽体）；Apple 那份则规定「全网站只允许一种投影且只给产品图，卡片/按钮/文本一律不加影」「禁止第 2 个强调色」「字重 500 不用、全出血磁贴不加圆角」。正是这些负向约束，让 AI 出图不会「看着像但其实很糙」。
五、实际怎么用：复制一份进根目录 + 一句 prompt（视频说的就是这步）
落地其实就三步，比想象中轻：
- 挑品牌：到 getdesign.md 在线翻（或直接进仓库
design-md/），选一个你最想让界面「像」的品牌，比如vercel、stripe、notion； - 复制到项目根目录：把那份
DESIGN.md放到你项目根目录（跟AGENTS.md并排）。这一步视频说得很干脆——「把里面某个品牌的 DESIGN.md 复制到项目根目录」； - 跟 AI 说一句话：「照根目录这份 DESIGN.md 的规范，帮我做一个 /xxx 页面」。
因为 DESIGN.md 已经把「颜色用哪个令牌、字号走哪一档、间距 8px 基准、按钮什么样、哪些不能做」全写死，AI 不用自己猜品牌调性，出图自然一致。几个选品建议：
- 开发者向产品（后台 / 文档 / 工具站）→ 选 Vercel、Stripe、Linear、Supabase、Resend 这类「黑白 + 单一强调色 + 精确排版」的；
- 消费向 / 营销页（摄影要站出来、留白大）→ Apple、Nike、Spotify、The Verge；
- 暖调 / 亲和力强（社区、内容、友好品牌）→ Notion、Airbnb、Zapier、Mastercard。
仓库还顺带挂了两个配套 starter kit（launchkit.getdesign.md 网页、mobile-starterkit.getdesign.md 移动端），想直接跑个模板再套设计系统也行。
六、数据红线与边界
成本：MIT 协议，整仓免费、可商用、可复制；在线订做（getdesign.md/request）支持私有交付，是否另计价在站上看。
边界（务必心里有数）：① 这是「单页 / 单品牌」粒度——一份 DESIGN.md 对齐一个品牌调性，多品牌混用或一整套多页面系统，你得自己挑定一份主品牌再扩展；② 它读的是「该品牌当时的官网分析」，品牌一改视觉这份就可能过时（仓库靠持续更新追）；③ alpha 版本 + Known Gaps 章节说明它是「尽量覆盖但承认有没写的」，不是像素级还原；④ 星数是社区热度指标（README 自称曾冲进 GitHub 全球榜前 150，当前 11.8 万星），不代表每份 DESIGN.md 质量完全等同。
数据红线（2026-09-28）：仓库 star/fork/许可/创建与最后推送时间以 GitHub API 实查为准（VoltAgent/awesome-design-md · 118,296 ★ · 13,232 fork · MIT · 创建于 2026-03-31 · 最后推送 2026-09-21）；「74 个品牌 / 74 份 DESIGN.md」为实查 design-md/ 目录所得；DESIGN.md 概念由 Google Stitch 引入、仓库做 74 品牌落地为 README 自述；YAML front-matter 8 键与正文 8–11 节结构为扒 Vercel / Apple 样例实查；「复制进根目录 + 一句 prompt」为视频口播做法，与仓库 README「Copy a DESIGN.md into your project」一致。星数排名为社区热度、非质量背书，引用以实查时点为准。