Google 最近开源了一项新的格式规范：DESIGN.md。对于所有正在使用 AI coding 的开发者来说，这可能是一份今年非常实用的文档。
它的核心思路很直接——通过一份 Markdown 文件把产品的 UI 设计“定死”，避免 AI 模型自作主张地输出那些带着 AI 味的默认字体、默认圆角的前端界面。说白了，就是用结构化文本让 AI 老老实实遵循你的设计语言。
目前，社区已经涌现出 70+ 家大厂的 DESIGN.md 范例，甚至出现了丢一个网站链接就能自动提取出 DESIGN.md 的开源工具——这波生态推进速度相当快。
举个例子，如果我们拿 Anthropic 自己的 DESIGN.md 来测试，它就能把一篇文章立刻转成 Anthropic 的设计风格，字体、配色、圆角都严格对齐，不再跑偏。
官方仓库在这里：https://github.com/google-labs-code/design.md
DESIGN.md 文件的结构覆盖了 9 大模块：
- 视觉主题和氛围
- 色彩调色板和语义角色
- 排版规则
- 组件样式和状态
- 布局原则和间距
- 深度和层次
- 该做和不该做
- 响应式行为
- AI 助手提示指南
实际使用中，你并不需要把所有模块都填满。只写一个颜色规范 + 字体规范 + 按钮样式的约 20 行规则，已经能让 AI 生成的 UI 一致性提升一个档次。
虽然有了这个格式，但从零开始手写一套严谨的设计规范，还是有一定门槛的。于是，社区出现了 awesome-design-md 这个开源项目，目前已经收获了 68000 颗星，甚至超过了 Google 自己 design.md 仓库的关注度。
仓库地址：https://github.com/VoltAgent/awesome-design-md/tree/main/design-md
它汇集了全球 70+ 大厂的设计规范，Stripe、Vercel、Linear、Notion、Apple、Cursor、Nike、Spotify、Tesla、SpaceX…… 基本你能想到的品牌都在里面，每个品牌还附带亮色和暗色两种预览。
在成熟的设计体系上作为起点，直接在上面改，会比从零开始快得多。比如，你可以拿 Vercel 或 Linear 的 DESIGN.md 当底板做开发者工具；参考 Shopify 的设计来规范电商页面；把 Stripe 或 Revolut 的配置改一改，金融类场景也能直接套用。
此外，已经出现了一批能够从任意网站自动提取设计语言并生成 DESIGN.md 的工具。比如这个项目：https://github.com/hyperbrowserai/hyperbrowser-app-examples/tree/main/hyperdesign
当然，具备一点操作基础的话，自己用 Claude Code、Codex 这类工具照着前面那些范例搓一个提取器也挺容易——毕竟有 few‑shot 示例，也有 DESIGN.md 的实际结构可以参考。
Google Stitch 此前还提出了 “Vibe Design” 的概念，对标的是“Vibe Coding”。你可以通过文字描述想要的视觉感受，甚至是一张截图或一个竞品的 URL，Stitch 就能帮你生成对应风格的 DESIGN.md。生成出的这份文件，就成了你项目的“设计记忆”。之后每当 Agent 要生成新页面、新组件时，它都会对照这份文件，始终保持输出的一致性。
现在的大模型不缺能力，缺的是 Harness——能够驾驭它的工具和约定。DESIGN.md 与 Cursor Rules、AGENTS.md 等理念相似，都是在尝试让人更可靠地控制大模型的输出。这种模式，或许很快就会成为一种新的行业标准。
在云栈社区，越来越多的开发者在探讨如何利用 DESIGN.md 这类规范提升 AI coding 的产出质量，欢迎一起来交流实践心得：云栈社区
发表于 1 小时前
|
查看: 4|
回复: 0
