夜雨聆风有个事情我观察了大半年，一直没找到合适的机会说。
直到前天晚上，我随手在一个空文件夹里建了一个 design.md，往 Claude Code 里扔了一句"帮我建个设置页面"，然后愣在屏幕前看了整整三十秒。
出来的页面。颜色对。间距对。圆角值对。连阴影该不该出现都对了。
说实话，我第一反应是有点懵的。
不是"卧槽 AI 真牛"，是"妈的，原来之前那么多乱七八糟的输出，是因为我没说清楚"。
这不是 AI 突然变聪明了。是我终于把自己的品味写成了文档。
你的 AI 设计师，现在在用别人的设计系统
先说清楚一件事：你团队里跑着的 Cursor、Claude Code、Windsurf、v0、Lovable、Figma Make——它们每天都在读文件。
读什么文件？
离它最近的那个。
如果你没给它们一个 design.md，它们就自己找。最接近的替代品是什么？Tailwind 的默认配置。蓝色主键、灰色边框、居中卡片布局——业界最无聊的默认值。
这不是 AI 的审美问题。
这是你团队的设计系统缺失问题。
design.md 不是新东西，它的血统很深
这套玩法的源头是 Anthropic 的 claude.md。
Claude Code 每次启动之前，先读项目根目录下的 claude.md——那个文件定义了项目的整体上下文：做什么、不做什么、技术栈偏好、代码规范。
然后这套逻辑迅速扩散：
Cursor 加了 .cursorrules。Windsurf 加了 .windsurfrules。OpenAI 给 Codex 标准化的规范叫 AGENTS.md。开源社区把各种约定统一成了一个社区共识：根目录下的 markdown 文件，AI 会自动读取。
底层逻辑很简单——AI 不需要一个 JSON schema 或者编译好的配置文件。它需要的是一个人类能读懂、模型能解析的文档。Markdown 是目前满足这个条件的最便宜、最持久的介质。
所以问题不是"要不要写"，而是"要写几个"。
design.md 和 CLAUDE.md，分工很清晰
经验告诉我，至少需要两个文件：
CLAUDE.md（或 AGENTS.md）——项目的全局大脑。定义产品语言、受众、商业模式、文件结构、技术栈、什么该做、什么不该做、什么情况下 AI 应该拒绝执行。
design.md——视觉系统。定义颜色 token、语义色名、字体层级、间距规则、组件结构、交互状态、可访问性约束、什么图标能用、什么时候可以用阴影、什么时候绝对不行。
有一个判断规则很有用：这条规则是关于"长什么样"的，还是关于"怎么运作"的？
看起来的问题 → design.md。运作的问题 → CLAUDE.md。
边界清晰，分工就不会乱。
一个 design.md 模板，今晚就能用
这里是一个接近完整的骨架，适合大多数产品团队：
第一部分：品牌定位
Brand Name: Acme StudioVoice: 冷静、克制、实用Avoid: 渐变背景、玻璃拟态、烂大街的 SaaS 紫色、霓虹色、阴影滥用三行。Avoid 那行值最高。
第二部分：颜色系统
ColorSemantic- bg: #FAFAF7 (暖调米白，默认背景)- surface: #FFFFFF (卡片、弹窗)- text: #111111- text-muted: #555555- border: #E5E1DA- accent: #C45A3D (赤陶色，克制使用)- success: #2E7D5A- error: #B43E3ERules- 禁用纯黑，用 #111111 代替- 禁用纯白作为页面背景，用 bg 代替- accent 每屏最多一个元素，最多两个- 深色模式仅反转 bg 和 text，accent 保持不变带规则的颜色 token 比裸色值有用得多。规则里藏的是品味。
第三部分：字体层级
Type- Display: Inter 600, 48px, line-height 1.1, tracking -0.02em- H1: Inter 600, 32px, line-height 1.2- H2: Inter 600, 24px, line-height 1.3- H3: Inter 600, 18px, line-height 1.4- Body: Inter 400, 16px, line-height 1.6- Caption: Inter 400, 14px, line-height 1.5- Mono: Berkeley Mono 400，仅用于代码和 schemaRules- 单屏不超过三种字号- 禁用斜体，用字重或颜色做强调第四部分：组件规范
ComponentsButton- 圆角: 8px- 垂直内边距: 14px- 横向内边距: 20px- 状态: default / hover(加深8%) / focus(2px accent ring) / disabled(50% opacity)- 变体: primary(accent背景+白字) / secondary(纯边框) / ghost(纯文字)Card- 圆角: 12px- 内边距: 24px- 边框: 1px solid border token- 默认无阴影。点击类卡片仅在 hover 时加阴影。Input- 边框和圆角与卡片保持一致- focus ring: 2px accent，禁止阴影- 错误状态: 边框变为 error token，提示文字在下方格式是固定的：组件名 → 解剖结构 → 状态 → 变体。不在这个格式里的内容，默认不构建。
第五部分：可访问性与深色模式
Accessibility- 所有交互元素有可见的 focus ring- 色彩对比: WCAG 2.1 AA 最低标准，正文达到 AAA- 移动端触控区域最小 44px- 颜色不作为唯一信号，配合图标、文字或形状使用Dark mode- 反转 bg 和 text token- surface 从 #FFFFFF 变为 #1A1A1A- border 从 #E5E1DA 变为 #2A2A2A- 其余 token 保持不变整个文件就这五部分。一页纸不到。今晚能写完。
写 design.md 的七个坑
第一：塞太满。超过两页的 design.md 是负担，不是资产。AI 会失去焦点。只保留对视觉有决定性影响的那几条。
第二：把品牌调性写进 design.md。"我们的品牌是温暖有趣的"不属于设计文件，属于项目上下文。去 CLAUDE.md 里写，design.md 只管能看见的东西。
第三：复制 Figma 样式而不是描述意图。"使用 Figma 里的 H1 样式"对 AI 没用——AI 打不开 Figma。写实际数值。
第四：跳过 "Avoid" 那行。负向约束比正向约束更锋利。"不要用渐变"比"用纯色"更有效。先告诉 AI 不是什么，它会更精确地做对。
第五：不进 Git 管理。design.md 不 review，就会像没人 review 的组件库一样漂移。把它放进 PR 流程，每次改设计同时改文档。
第六：一个文件装所有。团队大了、品牌要演进的时候，单一文件会变成合并噩梦。超过两页就拆成 design.md、brand.md、components.md 三文件。
第七：写完不更新。每半年审计一次。AI 的输出是文件的镜像——输出看起来不对，文件就不对。
今天晚上就能验证这个逻辑
不需要等一个正式项目准备好。
mkdir design-testcd design-test# 写一个 design.md，用上面的模板# 打开 Claude Code 或者 Cursor# 输入: "用 design.md 里的规则建一个设置页面"看 AI 给你返回什么。
第一次就能达到品牌 90% 的准确度。不是因为 AI 突然变聪明了，是因为你终于把自己的品味写清楚了。
设计系统的宿主正在转移
这是整个变化里最安静、最深的一次迁移。
以前，设计系统住在 Figma 里，然后翻译成代码给工程师用。翻译总是有损耗的——设计师的意图到了代码里变了形。
从 2026 年开始，设计系统住在代码里。Figma 文件变成一个查看器。
design.md 是新的源文件。每个 AI 都在读它。每个组件都在遵守它。每个页面输出的 token 都是对的，因为 token 是输入，不是输出。
大多数团队还没注意到这个变化。
注意到的那批团队，正在用更少的人、更快的速度、做更一致的产品。这个差距会逐年扩大。
工作很小。打开项目。新建 design.md。写五个部分。提交。
明天，你代码库里所有的 AI，都会知道你的品牌长什么样。
这就是全部了。
如果您正在学习AI Agent，想利用Coze/dify/n8n做一些RPA方面的工作流搭建，欢迎在评论区留言或入群交流！
喜欢本篇内容请给我们点个在看
欢迎【关注】&【星标】&【转发】
