在使用 AI 辅助 B 端系统开发时，经常遇到样式不一致的问题。比如：颜色深浅不一，间距松紧各异，按钮圆角这里是 4px，那里变成了 6px。这通常是因为只给了 AI Figma 链接或截图，它能还原当前页面，但不知道整个项目的统一设计规则。
解决这个问题的一个有效方法是：让 AI 给自己写一份 Design.md。
Design.md 是什么
Design.md 是放在项目根目录的 Markdown 设计系统文档。它以人和 AI 都能理解的结构化文本，记录产品的视觉规范、组件规则和交互原则。
一个典型的 Design.md 由两层构成：
1. YAML 层：精确 Token
文件顶部用 --- 包裹，记录颜色、字号、间距、圆角等精确数值：
---
colors:
primary: "#507AFE"
success: "#52C41A"
text-primary: "#222222"
typography:
base-size: "14px"
heading: "16px"
spacing:
input-height: "32px"
border-radius: "3px"
---这一层解决"明确"的问题：AI 不需要再猜测颜色或间距值。
2. Markdown 层：设计原则
用自然语言记录设计原则、组件规则和禁止项：
- 组件规则：Modal 用于确认操作，Drawer 用于查看详情且不混用
- 禁止项：不使用非标准色（如 #FF5D5D），必填项不放在右侧等
与设计 Skill 的区别
很多人会使用设计相关的 Skill（如 design-skill, ui-skill 等），但 Design.md 有独特的优势：
| 特性 | Design.md | 设计 Skill |
|---|---|---|
| 来源 | 项目沉淀，随代码演进 | 通用，非项目定制 |
| 维护 | 低，AI 自动生成/校验 | 高，需人工维护 Prompt |
| 上下文 | 高，基于存量系统分析 | 低，仅基于当前截图 |
| 适用范围 | 单项目专属 | 跨项目通用 |
苏米注：Design.md 的核心价值在于它沉淀了项目的"隐性知识"。通用 Skill 无法替代项目特定的历史决策，而 Design.md 恰好弥补了这一环。
B 端设计师如何使用
1. 让 AI 反向提取 Design.md
面对存量系统，先让 AI 分析现有的 Figma 文件或截图，反向生成一份 Design.md 初稿：
请基于提供的页面截图，提取当前项目的颜色、字体、间距和组件使用规则，
生成一份 Design.md 放在项目根目录。2. 人工校验与迭代
AI 提取的数值需要设计师确认： - 主色是否准确？ - 间距 Token 是否覆盖了 80% 的场景？ - 组件规则是否有遗漏？
3. 集成到开发流
在后续迭代中，只需在 Prompt 中追加："读取 Design.md 并基于其规则生成新模块”。
4. 校验与修复
生成完成后，让 AI 校验输出是否合规：
请读取 Design.md，校验刚生成的代码是否使用了正确的颜色、字体和间距，
并修正不一致的地方。
总结
Design.md 不是设计规范的替代品，而是"设计上下文的载体"。它让 AI 知道"在这个项目里，应该怎么做设计"。
苏米注：与其抱怨 AI"乱写样式"，不如给它一份清晰的规则。Design.md 就是让 AI 从"猜设计"变成"读设计"的关键一步。