世界上最便宜的设计师：Claude Code + Design.md

原文链接：https://mp.weixin.qq.com/s/5WiRmtuRxUPJUC-qoFbXnA 作者：老章很忙 发布时间：2026-05-22

摘要

Google Stitch 提出的 DESIGN.md 概念——一个纯文本设计系统文档，放在项目根目录，AI Agent 读完就能产出风格一致的 UI。和 AGENTS.md（管工程约束）成兄弟文件，一个说怎么搭、一个说怎么看。VoltAgent 团队搞了 awesome-design-md 仓库，扒了 73 个主流网站的 DESIGN.md 可直接复制使用。

核心概念

AGENTS.md 和 DESIGN.md 的分工：

文件	谁读	定义什么
AGENTS.md	编码 Agent	怎么构建项目
DESIGN.md	设计 Agent	项目长什么样、什么感觉

为什么用 Markdown？LLM 读 Markdown 最顺，没东西需要 parse 或配置。

DESIGN.md 里写什么

按 Google Stitch 官方定义，包括：

• 品牌定位 / 个性形容词
• 配色（主色、辅色、语义色）
• 字体（家族、字号、字重、行高）
• 间距系统
• 圆角 / 阴影 / 边框
• 组件示范（按钮、卡片、表单、导航）
• 动效原则
• 整体气质描述（"克制"、"活泼"、"电影感"...）

全部用人话写在 markdown 文件里，没有嵌套 JSON 或 token 结构。

仓库已收集的品类

github.com/VoltAgent/awesome-design-md 按品类组织，已扒 73 个网站：

AI & LLM 平台（最实用）

• Claude — Anthropic 风格，温暖赤陶色调，编辑式版面
• Cohere — 企业 AI 平台，活泼渐变，数据密集仪表盘
• ElevenLabs — AI 语音，暗色电影感 UI，音频波形美学
• Mistral AI — 法国式极简，紫色调
• Ollama — 终端优先，单色简洁
• OpenCode AI — 开发者向暗色主题
• Replicate — 白色画布，代码优先
• Runway — AI 创意工具，电影节式美学
• Together AI — ...

覆盖 AI / 工具 / 编辑器 / 设计 / 内容 / SaaS / 个人站等大类。

使用方式

基础玩法

1. 在 getdesign.md 找心仪网站风格
2. 下载对应 DESIGN.md 到项目根目录
3. 告诉 Claude Code / Cursor："基于 DESIGN.md，做一个 XX 页面"

进阶玩法

• 混搭：把两个站的 DESIGN.md 元素提炼合并成自己的
• 公司专用：团队所有 AI 工具配同一份 DESIGN.md，保证多人多 Agent 输出风格统一
• 配 AGENTS.md 用：前端项目两份文档就够了

关键评价

核心不在于"VoltAgent 帮你扒了 73 个网站"，而在于 DESIGN.md 这个概念本身值得纳入工作流。

让 AI 写代码靠 AGENTS.md 对齐工程约束，让 AI 写界面靠 DESIGN.md 对齐视觉约束——一前一后，让 AI 做的事更可预测。

对个人开发者最大的解放：不用每次都把 Figma 链接、品牌指南、配色细节嚼烂喂给 AI，一份 DESIGN.md 全搞定。

原文关键段落

Copy a DESIGN.md into your project, tell your AI agent "build me a page that looks like this" and get pixel-perfect UI that actually matches.

把 DESIGN.md 丢项目根目录，跟 AI 说"照这个风格做"，就完事。