大家好，我是若风。
你让 AI 写一个页面，它写出来了。功能没问题，但长得像所有 AI 生成的页面一样，圆角、渐变、紫蓝配色、Inter 字体。能用，但没有品牌感，没有辨识度。
你可以花半小时写 prompt 描述你要的风格，但每次都要重复。你也可以用 Figma 导出 design token，但那需要 Figma 技能和导出工具链。
VoltAgent 团队做了第三种方案。他们把 74 个知名网站的视觉系统，每个提炼成一个 DESIGN.md 文件。你把其中一个丢进项目根目录，AI Agent 就知道该怎么做了。
101,105 个 Star。GitHub 全球排名 #150 左右。
一句话定位
awesome-design-md 是一个 curated collection，收录了 74 个品牌的 DESIGN.md 文件。每个文件用 Markdown 格式描述一个品牌的设计系统，包括颜色、字体、间距、圆角、组件规则。把文件丢进项目，AI coding Agent 就能生成匹配该品牌视觉风格的 UI。MIT 协议。
DESIGN.md 是什么
这个格式不是 VoltAgent 发明的，是 Google Stitch 引入的概念。README 里的解释很到位。
DESIGN.md 是一个纯文本的设计系统文档，AI Agent 读了之后能生成视觉一致的 UI。它就是一个 Markdown 文件，不需要 Figma 导出，不需要 JSON schema，不需要任何特殊工具链。丢到项目根目录，任何 AI coding Agent 或 Google Stitch 都能理解你的 UI 应该长什么样。
README 有一张对比表把这件事说清楚了。
| 文件 | 谁读它 | 它定义什么 |
|---|---|---|
| AGENTS.md | coding Agent | 项目怎么构建 |
| DESIGN.md | design Agent | 项目怎么看起来和感觉 |
这个对比是整个项目的核心理念。AGENTS.md 解决了「agent 怎么写代码」的问题，DESIGN.md 解决「agent 怎么设计 UI」的问题。两者对称，一个管功能，一个管视觉。
为什么用 Markdown 而不是 JSON 或 YAML？README 有一句话，「Markdown is the format LLMs read best, so there's nothing to parse or configure.」LLM 读 Markdown 最自然，不需要额外的解析层。这个判断是对的，你在 prompt 里放一段 JSON 和放一段 Markdown，LLM 对 Markdown 的理解准确度明显更高。
74 个品牌覆盖了什么
从 design-md/ 目录看，74 个品牌可以分成几类。
科技公司:Apple、Google(Meta)、Vercel、Linear、Figma、Framer、Cursor、Raycast、Notion、Slack、Stripe、Shopify、Supabase、Sentry。这是 SaaS 和开发工具的主力军，设计系统成熟，被前端社区广泛参考。
AI 公司:Claude、Cohere、Mistral、x.ai、Together.ai、Ollama、Replicate、Runway、ElevenLabs、Minimax。2026 年 AI 产品的设计语言正在快速分化，每家都有自己的视觉态度。
金融:Coinbase、Kraken、Revolut、Wise、Binance。金融产品对信任感和数据展示的要求很高，设计系统有独特约束。
消费品牌:Airbnb、Uber、Spotify、Nike、Starbucks、Pinterest。消费者面对的产品，设计更注重情感和亲和力。
汽车:BMW、BMW M、Bugatti、Ferrari、Lamborghini、Tesla、Renault。汽车品牌的设计语言有强烈的实体感，和 Web UI 形成有趣的跨域映射。
复古系列:Dell (1996)、Nintendo (2001)、Wired。这是 README 里提到的「Saturday series」，从 1990 年代的网页提取设计系统。丢一个进去，让 AI 生成复古 UI。这是个很有创意的用法。
每个品牌目录下有一个 DESIGN.md 和一个 README.md,总共 74 × 2 = 148 个文件。
一个 DESIGN.md 里有什么
以 Airbnb 的 DESIGN.md 为例，它的 frontmatter 先用一段密度极高的文字描述整体气质，「A warm, generous consumer marketplace anchored on a clean white canvas and Airbnb Rausch (#ff385c)」。一句话就抓住了 Airbnb 的视觉灵魂，白色画布 + Rausch 红。
然后分几个大 section:
Colors ,按用途分类。品牌色(primary #ff385c、active #e00b41、disabled #ffd1da)、表面色(canvas #ffffff、surface-soft #f7f7f7)、文字色(ink #222222、body #3f3f3f、muted #6a6a6a)、发丝线和边框。每个色值都精确到 hex，不是泛泛说「浅灰」。
Typography,按层级分。display-xl 28px/700,display-lg 22px/500,title-md 16px/600,body-md 16px/400。每个级别都标了 fontFamily、fontSize、fontWeight、lineHeight、letterSpacing。Airbnb 用的是 Airbnb Cereal VF 字体，fallback 是 Circular 和系统字体。
Layout,间距系统、网格和容器、留白哲学。
Elevation,阴影层级。
Components,按钮、卡片等组件的具体规则。
这些信息不是随手编的，是从 Airbnb 官网的 CSS 里提取的真实值。README 里明确说了，「extracted design tokens represent publicly visible CSS values」。
怎么用
使用方式简单到让人怀疑是不是漏了什么。两步。
第一步，把某个品牌的 DESIGN.md 复制到你的项目根目录。
第二步，告诉 AI Agent，「build me a page that looks like this」。
就这样。没有配置文件，没有 CLI 工具，没有依赖安装。
这就是 Markdown 格式的优势。AI Agent 天然能读 Markdown，不需要中间层翻译。DESIGN.md 里的每个色值、每个字号、每个圆角，Agent 都能直接理解并应用到生成的 UI 里。
issue #247 请求 shadcn/ui 的 DESIGN.md，#131 请求 Cloudflare 的，#376 请求 Ant Design 的。社区在用 issue 投票决定下一个该分析哪个品牌。issue #47 请求 ChatGPT 的 DESIGN.md，说明用户想要 OpenAI 的视觉风格做参考。getdesign.md 网站还接受付费的私有 DESIGN.md 请求，这是 VoltAgent 的商业化路径。
11,674 个 Fork 说明什么
11,674 个 Fork 对于一个纯 Markdown 合集来说是个惊人的数字。对比 ai-job-search 的 6,244 Fork(那个有代码需要定制),awesome-design-md 全是 Markdown，为什么要 Fork？
因为用户在改。他们 Fork 之后，把 DESIGN.md 改成自己的品牌色、自己的字体、自己的间距。一个 Airbnb 的 DESIGN.md，Fork 之后把 primary 从 #ff385c 改成自己品牌的色值，就是一个专属的设计系统文件。
这和 ai-job-search 的 Fork-and-Own 模式是同一个逻辑。用户不是在 Fork 一个工具，是在 Fork 一个模板,然后改成自己的。
和 emilkowalski/Skills 的关系
这篇和之前拆过的 emilkowalski/Skills 形成了一对互补关系。
emilkowalski/Skills 解决的是「agent 写 UI 时的动画和交互决策」。它给的是规则集，easing 怎么选、动画时长多长、什么场景该不该加动画。
awesome-design-md 解决的是「agent 写 UI 时的视觉风格决策」。它给的是设计 token，什么颜色、什么字体、什么圆角、什么间距。
两者合在一起，就是一套完整的「AI agent UI 设计知识」。DESIGN.md 管「长什么样」，emilkowalski/Skills 管「怎么动」。一个静态一个动态，一个视觉一个交互。
这种分工也反映了设计系统本身的两层结构。设计师定义视觉系统(colors、typography、layout),交互工程师定义动效系统(motion、transitions、gestures)。两个项目恰好对应了这两个角色。
这件事的深层含义
我觉得 awesome-design-md 最值得思考的不是一个具体的 hex 值，而是一个格式选择，用自然语言描述设计系统，是 AI 时代的设计 token 格式。
传统的设计 token 用 JSON 或 YAML 格式存储，需要专门的工具链消费。Style Dictionary、Theo、Figma Tokens 这些工具，把 token 从设计工具导出到代码可用的格式。这条链路很长，每一步都可能有信息损失。
DESIGN.md 用自然语言 + Markdown 描述设计系统。它不只是一个 token 列表，还包含了设计哲学、原则、上下文。Airbnb 的 DESIGN.md 不只是说「primary color: #ff385c」，它说「Airbnb Rausch, the single brand voltage that carries every primary CTA」。这句话告诉 Agent 不只是用什么色，还有这个色在什么场景用、为什么用。
这种「带语义的设计描述」比纯 token 列表更适合 AI 消费。因为 LLM 理解语义，不理解 JSON 的 key-value 对。当你告诉 Agent「这个色是品牌电压色，用在所有主 CTA 上」，它比看到 {"primary": "#ff385c"} 更知道该怎么用。
如果你在做 AI 辅助 UI 开发，值得把 1-2 个 DESIGN.md 下载看看它们的结构。就算你不用这些现成的品牌文件，学会用「带语义的 Markdown」描述你的设计系统，会让你的 AI Agent 产出质量明显提升。
这是 vibe coding 时代的 design system。不需要 Figma 插件，不需要 token 管道，一个 Markdown 文件就够了。