58 个主流网站的 UI 设计规范现在开源了，复制进项目 AI 直接按风格来

大家好，我是 Immerse

专注分享 AI 玩法、独立开发与AI 出海的 AGI 实践者，更多干货欢迎关注公众号 #沉浸式AI 或访问 yaolifeng.com

你可能已经见过 AGENTS.md 了——放在项目根目录，告诉 AI coding agent 怎么构建这个项目。Google Stitch 最近提出了一个平行概念：DESIGN.md，同样是纯文本 Markdown 文件，放在项目根目录，但专门告诉 AI agent 这个项目的 UI 该长什么样。

没有 Figma 导出，没有 JSON schema，没有任何专有格式。就是一个普通的 Markdown 文件，里面写清楚颜色、字体、组件样式、间距规则，然后扔给任意支持的 AI coding agent，它就知道按什么风格出 UI 了。

VoltAgent 开了一个叫 awesome-design-md 的仓库，把 58 个真实网站的 DESIGN.md 文件整理进来了——Vercel、Linear、Stripe、Supabase、Notion 这些常见的开发者工具网站都在里面。不用自己从头写，直接把你想模仿的那个复制进项目就行。

仓库地址：https://github.com/VoltAgent/awesome-design-md

DESIGN.md 里有什么

每个文件都按 Stitch 规范的格式组织，分 9 个部分：

1. 视觉主题和氛围——整体设计哲学，比如"cinematic dark UI"或"warm minimalism"
2. 色板和语义命名——每个颜色对应的 hex 值和用途，background/foreground/accent 这类
3. 字体规则——字体家族和完整的字号层级表
4. 组件样式——按钮、卡片、输入框、导航栏的具体样式和状态
5. 布局原则——间距比例、网格、空白的用法
6. 阴影和层级——卡片阴影、浮层层级这类
7. Do's and Don'ts——设计上明确不能做的事
8. 响应式行为——断点、触控目标尺寸、折叠策略
9. Agent Prompt Guide——面向 AI 的快速颜色参考和现成 prompt

每个网站除了 DESIGN.md 本身，还配了两个 HTML 预览文件——preview.html 和 preview-dark.html，直接在浏览器打开就能看到色板、字号层级、按钮、卡片这些样式。不用运行任何东西，直接眼看。

合集里有哪些网站

按类目整理：

AI 和机器学习

• Claude：暖土红色调，干净的编辑风格排版
• Mistral AI：法式简约，紫色调
• ElevenLabs：暗色电影质感，音频波形视觉语言
• Ollama：命令行优先，黑白为主
• RunwayML：暗色电影 UI，适合媒体密集型布局
• Replicate：干净白色画布，代码优先

主要的分类

怎么用

用法非常直接。

选好你想模仿的网站，把对应的 DESIGN.md 复制进你的项目根目录，然后告诉 agent "按这个风格来"就行。

如果你用 Cursor 或 Claude Code，直接在对话里说"参考 DESIGN.md 里的设计规范"，agent 会自己去读。

也可以在请求里显式引用，比如"按 DESIGN.md 里的 Vercel 风格构建这个登录页"。

如果你在用 Google Stitch，DESIGN.md 是它的原生格式，直接识别。

仓库里还提供了一个在线申请入口 getdesign.md/request，可以提交申请让他们给你制作某个指定网站的 DESIGN.md，包括私密版本只交付给你这种。

合集的实际价值在哪

过去如果你想让 AI coding agent 生成特定风格的 UI，要么给它截图，要么手写一大段样式描述，要么就接受它按自己理解来——结果通常很随机。

DESIGN.md 解决的是"风格对齐"这件事。

Markdown 是 LLM 读起来最顺的格式，里面的颜色、字体、间距都是精确值，agent 可以直接用，不需要再猜。

从实用角度说，最有意思的场景是：你在做 side project，想要"看起来像 Linear 的那种极简开发者工具风格"，不需要雇设计师，也不需要自己研究 Linear 的 CSS，直接把他们的 DESIGN.md 复制进去，然后让 agent 按这个规范来。

值不值得关注取决于你用 AI coding agent 的频率。

如果你只是偶尔让 agent 帮你补一段逻辑，意义不大。

但如果你在用 agent 搭 UI，这个东西能省不少来回调整的时间。