把 Stripe、Vercel、Linear 的设计直接喂给 AI两周 43k Star 的神仙项目上周我在刷 GitHub Trending 的时候被一个项目整懵了——两周43,982 颗 Star。这个速度放在任何一个仓库都是炸裂的。我点进去看发现这东西的思路简单到令人发指却解决了 Vibe Coding 时代一个真实存在的痛点。仓库叫 awesome-design-md。先说问题AI 写的 UI为什么总像祖传屎山用过 Cursor、Claude Code、Lovable 的朋友都懂。你让 AI 帮你写一个页面它能写出来逻辑也对但视觉上就是……那种感觉你懂的。不是 Stripe 的那种紫是更接近紫色系某低价主题的那种。根本原因是AI 不知道你想要什么样的视觉风格。你说参考 Stripe 的风格AI 凭记忆里的印象给你拼一个差了三个身位也正常。以前的做法是截图、标注、附上 Figma 链接、写一大段设计说明…… 每次都要花半小时对齐。DESIGN.md 想解决的就是这个问题。DESIGN.md 是什么这个概念最早由Google Stitch谷歌新出的 AI 设计工具提出。一句话解释一个纯 Markdown 文件描述你项目的完整设计系统专门给 AI 读的。放在项目根目录AI 编程 Agent 打开一看就知道主色是什么各个颜色负责什么语义角色用的什么字体H1 到 body 的完整层级按钮是什么圆角卡片有没有阴影输入框 hover 态是什么颜色哪些设计是规范哪些是不能碰的禁区就像AGENTS.md告诉编码 Agent怎么构建项目DESIGN.md告诉设计 Agent项目应该长什么样。| 文件 | 谁在读 | 定义了什么 | |-------------|-----------------|---------------------| | AGENTS.md | 编码 Agent | 如何构建这个项目 | | DESIGN.md | 设计 Agent | 项目的视觉语言 |为什么是 Markdown因为 Markdown 是 LLM 读得最好的格式。没有 JSON schema 需要解析没有 Figma token 需要导出没有任何特殊工具依赖。纯文本丢进去就用。design-md/ ├── claude/ ← 温暖的编辑风格Anthropic Serif │ ├── DESIGN.md (313 行9 个部分) │ ├── README.md (网站描述 预览截图) │ ├── preview.html (亮色变量目录826 行完全独立) │ └── preview-dark.html (暗色变量目录) ├── vercel/ ← 单色精确感Geist 字体 │ ├── DESIGN.md (311 行9 个部分) │ ├── README.md │ ├── preview.html (370 行完全独立) │ └── preview-dark.html ├── stripe/ ← 金融科技优雅感sohne-var字重 300 │ ├── DESIGN.md (323 行9 个部分) │ ├── README.md │ ├── preview.html (422 行完全独立) │ └── preview-dark.html └── ...awesome-design-md直接把大厂的 DESIGN.md 都给你备好了这才是这个项目的核心价值所在。你不需要自己去提取某个网站的设计系统——别人已经帮你干好了。已收录的品牌包括AI/工具类Claude — 暖赤褐色调干净的编辑排版风格Cursor — 精致深色界面渐变 accentVercel — 黑白精准Geist 字体系Raycast — 深色 chrome鲜艳渐变 accentSupabase — 暗绿主题代码优先Linear — 极简紫色工程师审美的天花板Notion — 温暖极简衬线标题柔和表面Stripe — 标志性紫色渐变字重 300 的优雅消费科技/品牌Apple — 高级留白SF Pro电影级图像Spotify — 鲜艳绿配深色粗体字专辑艺术驱动Tesla — 极致减法全视口摄影Nike — 黑白单色超大 Futura 大写满幅摄影豪华汽车这个分类我没想到Ferrari — 黑白编辑风Ferrari Red 极度留白Lamborghini — 纯黑底金色 accentLamboType 字体Bugatti — 电影级黑色画布黑白极简巨幅展示字目前收录了70 个品牌基本覆盖了你在做产品时可能想参考的大多数设计语言。每个 DESIGN.md 里有什么项目用了 Google Stitch 的标准格式并做了扩展共 9 个章节① 视觉主题与氛围— 设计哲学、整体 Mood、密度感② 色彩方案— 每个颜色语义化名称 #hex 功能角色③ 字体规则— 字体族、完整层级表size / weight / line-height / letter-spacing④ 组件样式— 按钮、卡片、输入框、导航包含 hover/focus 状态和动效时长⑤ 布局原则— 间距系统、栅格、留白哲学⑥ 深度与层级— 阴影系统、表面层级定义⑦ 规范与禁忌— 设计护栏 典型反模式⑧ 响应式行为— 断点、触控目标、折叠策略⑨ Agent Prompt 指南— 快速颜色参考、即用 Prompt 模板第 9 章是我最喜欢的——直接给你可以 copy 的 Prompt告诉 AI agent 这个品牌的颜色 token 和关键设计决策不用自己总结。除了 DESIGN.md每个品牌还配了两个文件preview.html— 可视化色板、字体层级、按钮、卡片等组件展示浅色preview-dark.html— 同上深色版本怎么用三步30 秒搞定1. 从仓库找到你想参考的品牌目录比如 /stripe/ 2. 复制 DESIGN.md 到你项目的根目录 3. 告诉 AI Agent参考项目根目录的 DESIGN.md帮我设计一个定价页面之后不管是 Claude Code、Cursor 还是 Google Stitch读到这个文件生成的 UI 就会贴着这个设计系统走。想换风格换个 DESIGN.md 文件就行改一个文件整个项目的 AI 设计基调就变了。为什么这个东西值得关注不是因为它技术复杂——它根本不复杂就是 Markdown 文件。值得关注的是它代表的一个方向把设计系统变成 AI 可消费的格式。以前设计系统是给人用的——Figma 组件、Storybook 文档、Design Token JSON。这些格式对人类来说很好对 AI 来说不是最优解。DESIGN.md 是第一个真正以 LLM 为一类消费者设计的设计系统格式。它的出现标志着把 AI 当作设计工作流的原生参与者这件事开始有了工具层的支撑。Vibe Coding 现在能生成能跑的代码了接下来要解决的是生成好看的代码。DESIGN.md 是这个方向的一块重要拼图。一点小想法我自己在用 Claude Code 做项目的时候现在会在根目录放两个 meta 文件CLAUDE.md— 告诉 AI 怎么写代码、遵守什么规范DESIGN.md— 告诉 AI 用什么视觉语言加起来不超过 200 行 Markdown但对 AI 生成内容的质量影响是肉眼可见的。感兴趣的话仓库地址github.com/VoltAgent/awesome-design-md直接去翻你喜欢的品牌目录看看即使不用在项目里光是作为研究设计系统的参考资料也挺值得一读的。你现在做项目有没有在用类似的设计上下文来约束 AI 的输出欢迎评论区聊聊你的做法。我是顾北关注我我们下期再见相关链接https://github.com/VoltAgent/awesome-design-mdhttps://getdesign.md/lamborghini/design-mdhttps://zread.ai/VoltAgent/awesome-design-md