先说一个项目，它最近在GitHub上相当火，火到101,105个Star，全球排名冲到#150左右。这个项目叫awesome-design-md，做的事其实很简单：把74个知名品牌的视觉系统，每个提炼成一个DESIGN.md文件。你把这个文件丢进项目根目录，AI Agent就知道该怎么写UI了。

这背后有个很现实的痛点。你让AI写一个页面，它写出来了。功能没问题，但长得像所有AI生成的页面一样，圆角、渐变、紫蓝配色、Inter字体。能用，但没有品牌感，没有辨识度。

你可以花半小时写prompt描述你要的风格，但每次都要重复。你也可以用Figma导出design token，但那需要Figma技能和导出工具链。

VoltAgent团队做了第三种方案。他们干了一件很干脆的事：把74个知名网站的视觉系统，每个提炼成一个DESIGN.md文件。你把其中一个丢进项目根目录，AI Agent就知道该怎么做了。

一句话定位

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解决了「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文件就够了。