Google开源了一个新的格式规范：DESIGN.md。对于所有在用AI coding的人来说，这可能是今年最实用的东西之一。

这是一个把产品UI设计定死的文件约束。避免模型自己去搞一些AI味儿、默认字体、默认圆角的前端设计。

DESIGN.md是什么

把产品UI设计定死的一个Markdown文件。避免AI生成"默认字体、默认圆角"的同质化界面。

Google官方开源地址：https://github.com/google-labs-code/design.md

包含9大模块

模块	说明
视觉主题和氛围	整体风格定位
色彩调色板和语义角色	主色、辅色、功能色定义
排版规则	字体、字号、字重规范
组件样式和状态	按钮、输入框等组件规范
布局原则和间距	网格、间距、边距规则
深度和层次	阴影、层级、卡片规范
该做和不该做	正反示例
响应式行为	移动端、平板、桌面适配
AI助手提示指南	如何让AI理解设计意图

不需要全写满。 写一个颜色规范加字体规范加按钮样式，大概20行，已经能让AI生成的UI一致性提升非常多了。

awesome-design-md：70+大厂设计规范

自己做有门槛，但有现成的。

https://github.com/VoltAgent/awesome-design-md/tree/main/design-md

这个仓库汇聚了70+全球大厂的设计规范：

品牌	适用场景
Stripe	金融支付类界面
Vercel	开发者工具
Linear	SaaS管理后台
Notion	文档协作
Apple	高端消费品
Nike	运动品牌
Spotify	音乐流媒体
Tesla	汽车科技感
SpaceX	航天科技风

每个品牌附一个亮色预览和一个暗色预览。

使用建议：

• 做开发者工具 → 用Vercel或Linear
• 做电商页面 → 参考Shopify
• 做金融产品 → 参考Stripe或Revolut
• 做高端品牌 → 参考Apple或Nike

在成熟的设计体系做起点，直接在上面改。比从零开始快太多了。

自动提取工具

还有一类工具可以从任意网站自动提取设计语言，生成DESIGN.md：

https://github.com/hyperbrowserai/hyperbrowser-app-examples/tree/main/hyperdesign

不过这类工具，自己用Codex、Claude Code搓一个也挺容易的。

vibe design：设计领域的vibe coding

Google Stitch之前提出了"vibe design"的概念，对标vibe coding。

通过描述想要的视觉感觉：

• 可以是文字描述
• 可以是截图
• 甚至可以是一个竞品的URL

Stitch帮你生成DESIGN.md。

和CLAUDE.md的关系

现在的大模型已经不缺能力了，缺的是Harness。

文件	作用
CLAUDE.md	项目开发规范和上下文
AGENTS.md	Agent行为规则
DESIGN.md	UI设计约束
SOUL.md	Agent人格设定

这些都是类似的尝试：让人可以更好地驾驭住大模型。

可能成为新行业标准

DESIGN.md跟CLAUDE.md、AGENTS.md一样，都是试图解决同一个问题：

怎么让AI的输出保持一致性、可控性、可预测性？

随着AI coding越来越普及，这类约束文件可能会成为一个新的行业标准。

写在最后

vibe coding让人可以快速写代码，vibe design让人可以快速定设计。

两者结合，AI生成完整应用的能力会大幅提升——前提是你有清晰的设计规范喂给它。

建议：

1. 先去awesome-design-md仓库看看有没有适合你的设计规范
2. 选一个最接近的作为起点
3. 根据你的品牌调性微调
4. 丢给AI，让它按这个规范生成界面

这可能是今年最值得学的一个Markdown格式。