5.6 让 AI 记住你的设计规范
本节目标：理解如何通过项目文档（DESIGN_SYSTEM.md）和社区 Skills 让 AI 自动遵守设计规范，实现设计一致性。
小明的新烦恼
小明用 shadcn/ui 做了几个页面后，发现了一个问题。
第一次让 AI 创建登录页面时，他说"用 shadcn/ui 的组件"，AI 照做了。第二次让 AI 创建用户列表页面时，他又说了一遍"用 shadcn/ui 的组件"。第三次、第四次……每次都要重复这句话。
更麻烦的是，AI 有时候会"忘记"。明明上一个页面用的是蓝色主题，这个页面突然变成了紫色。明明说好了按钮圆角是 8px，AI 这次给了 12px。你得像监工一样盯着它，生怕它又自由发挥。
老师傅看出了他的困扰："你遇到的问题，本质上是AI 没有记忆。每次对话，它都是从零开始。你需要一个办法，让 AI 一次性记住你的设计规范，以后不用反复提醒。"
设计规范的困境
小明回想起来，他确实没有明确的设计规范。他只是凭感觉在调整——这个按钮圆一点，那个卡片方一点；这里用蓝色，那里用绿色。结果做出来的页面虽然每个单独看都还行，但放在一起就显得很乱，像是好几个人做的。
老师傅说："这就是没有设计系统的后果。你需要先定义规则，然后让 AI 遵守规则。"
什么是设计系统？ 简单说，就是一套关于"长什么样"的标准。比如：
- 颜色：主色是哪个蓝？成功用哪个绿？错误用哪个红？
- 间距：组件之间隔多远？内边距多大？
- 圆角：按钮用多大的圆角？卡片呢？
- 阴影：卡片要不要阴影？多深？
- 字体：标题多大？正文多大？用粗体还是常规？
这些看起来很琐碎，但正是这些细节决定了你的产品看起来是"专业"还是"业余"。大厂的设计团队会花几个月时间打磨这套规范，然后强制所有设计师和开发者遵守。
但你是一个人，没有设计团队，怎么办？
从"反复提醒"到"一劳永逸"
老师傅告诉小明，有一个办法可以让 AI 自动遵守设计规范，不需要每次都提醒——把规范写成 Skills。
还记得第二章讲过的 Skills 吗？它本质上是一份"给 AI 看的说明书"。你可以把项目的设计规范、组件使用方法、约束条件都写进去，然后告诉 AI 加载这个 Skill。从此以后，AI 就会自动按照你的规范来生成代码。
小明有点懵："可是我不知道怎么定义设计规范啊。"
老师傅笑了："你已经有了。"
你已经有了设计规范
老师傅让小明打开项目里的 tailwind.config.js 文件。这个文件是 Tailwind CSS 的配置文件，里面定义了项目的颜色、间距、圆角等基础样式。
"看，这就是你的设计规范。" 老师傅指着文件说，"Tailwind 的配置本身就是一套设计系统。你只需要把这些信息整理一下，告诉 AI '只能用这些颜色、这些间距'，它就不会乱来了。"
小明恍然大悟。他一直以为设计规范是什么高深的东西，原来就是把 Tailwind 配置里的内容翻译成人话，告诉 AI "你只能用这些"。
第一步：让 AI 扫描生成设计规范
小明问："我要一个个去看 Tailwind 配置，然后手动整理成文档吗？"
老师傅笑了："当然不用。你有 AI 啊，让它帮你扫描。"
老师傅告诉小明，可以直接让 AI 并行扫描项目中的关键文件，自动生成设计规范文档。具体来说，让 AI 同时读取：
tailwind.config.js- 提取颜色、间距、圆角、阴影等设计 tokenssrc/components/ui/目录 - 列出已安装的 shadcn/ui 组件- 现有页面代码 - 分析实际使用的样式模式
然后让 AI 把这些信息整理成一份 DESIGN_SYSTEM.md 文档。
小明试了一下，对 AI 说："请并行扫描 tailwind.config.js 和 src/components/ui 目录，分析项目的设计规范，生成一份 DESIGN_SYSTEM.md 文档。文档要包含：颜色系统、间距系统、圆角、阴影、字体规范、可用组件列表。"
AI 很快就生成了一份完整的设计规范文档。文档里清楚地列出了：
颜色系统：从 Tailwind 配置中提取的所有颜色定义，包括主色、辅助色、状态色、文本色。
间距系统：项目中实际使用的间距值，比如组件内边距、组件间距、页面边距的标准值。
圆角和阴影：不同类型组件使用的圆角大小和阴影深度。
可用组件：扫描 src/components/ui/ 目录后，列出了所有已安装的 shadcn/ui 组件，包括 Button、Card、Form、Input、Select、Dialog、Table 等。
老师傅说："看，这就是 AI 的价值。它能快速扫描整个项目，提取出设计模式，比你手动整理快多了。而且它不会漏掉任何东西。"
第二步：创建项目 Skill
有了 DESIGN_SYSTEM.md 文件后，怎么让 AI 自动遵守呢？
老师傅说："最好的办法是创建一个项目专属的 Skill。"
小明有点懵："Skill 不是社区提供的通用最佳实践吗？我也能创建自己的 Skill？"
老师傅笑了："当然可以。Skills 不仅可以是通用的（比如 frontend-design），也可以是项目特定的。你可以为这个项目创建一个 Skill，把设计规范封装进去。"
为什么要创建 Skill 而不是直接在 CLAUDE.md 里写？
老师傅解释说，Skills 有个很重要的特性叫"渐进式加载"：
- Skill 的描述（name + description）：永远在 context 里，告诉 AI "这个项目有设计规范"
- Skill 的详细内容：只在 AI 需要时才加载，不会一直占用 context
而如果你把整个 DESIGN_SYSTEM.md 的内容写进 CLAUDE.md，那每次对话都会占用大量 context，即使你只是在修改一个后端 API。
小明让 AI 帮他创建了一个项目 Skill：
# AI 会帮你创建这样的结构
.claude/skills/my-project-design/
├── SKILL.md # 核心说明
└── references/
└── DESIGN_SYSTEM.md # 扫描生成的设计规范SKILL.md 的内容很简单：
---
name: my-project-design
description: 本项目的设计规范和组件库约束。当需要创建或修改 UI 组件时使用。包含 Tailwind 配置、shadcn/ui 组件清单、自定义组件说明、B 端表单/表格规范。
---
# 项目设计规范
本项目使用 shadcn/ui + Tailwind CSS。
## 何时阅读详细规范
创建或修改 UI 组件时，请阅读 [DESIGN_SYSTEM.md](references/DESIGN_SYSTEM.md)，了解：
- 可用的颜色、间距、圆角等 design tokens
- 已安装的 shadcn/ui 组件清单
- 自定义业务组件（如 DataCard）
- B 端场景的特殊约束（表单分组、表格操作确认等）老师傅说："看，SKILL.md 只有几行，告诉 AI '这个项目有设计规范，需要时去读 references/DESIGN_SYSTEM.md'。这样 AI 在写后端代码时不会被设计规范占用 context，但在写前端代码时会自动加载详细规范。"
第三步：让 Skill 自动触发
创建好 Skill 后，小明发现一个神奇的现象：他不需要每次都说"请遵循设计规范"，AI 会自己知道。
当他说"创建一个用户列表页面"时，AI 会自动：
- 看到
my-project-designSkill 的 description："当需要创建或修改 UI 组件时使用" - 判断"创建用户列表页面"属于"创建 UI 组件"
- 自动加载这个 Skill
- 读取 references/DESIGN_SYSTEM.md
- 按照规范生成代码
老师傅说："这就是 Skills 的价值。你不需要记住每次都要提醒 AI，AI 会根据任务类型自动加载对应的 Skill。"
定期更新：让规范保持最新
随着项目越做越大，小明会不断添加新组件、调整设计规范。怎么保持 DESIGN_SYSTEM.md 文档的更新呢？
老师傅说："定期让 AI 重新扫描一次就行。"
比如每次添加了新组件后，让 AI 重新扫描 src/components/ 目录，更新 references/DESIGN_SYSTEM.md。或者修改了 Tailwind 配置后，让 AI 重新提取设计 tokens。
这个过程很快，几秒钟就能完成。AI 会对比新旧版本，只更新变化的部分，保留你手动添加的说明和约束。
小明发现，这种"让 AI 扫描生成"的方式比手动维护文档轻松多了。他不需要记住每个细节，只需要定期让 AI 刷新一下，Skill 里的文档就能保持最新。
社区的力量：通用 Skills
小明创建了项目专属的 Skill 后，又想到一个问题："我这个 Skill 只对这个项目有效。有没有一些通用的前端开发最佳实践，可以在所有项目中使用？"
老师傅说："有。社区已经有人把常见技术栈的最佳实践整理成了通用 Skills。你可以直接安装使用。"
项目 Skill vs 通用 Skill：
- 项目 Skill（如
my-project-design）：项目特定的设计规范、自定义组件、业务约束 - 通用 Skill（如
frontend-design）：shadcn/ui 使用指南、Tailwind 最佳实践、响应式设计模式
两者可以同时使用。当你创建 UI 组件时，AI 会同时加载：
frontend-design- shadcn/ui 使用指南、Tailwind 最佳实践、响应式设计my-project-design- 这个项目的特定设计规范
比如 Anthropic 官方提供的 frontend-design Skill，里面包含了 shadcn/ui 的组件使用指南、Tailwind CSS 的最佳实践、响应式设计模式、无障碍支持等内容。
安装方法很简单，一条命令就行：
npx skills add https://github.com/anthropics/skills --skill frontend-design安装后，AI 会在需要时自动加载这个 Skill。你不需要每次都手动提醒"用 shadcn/ui""遵循最佳实践"，AI 会自己知道。
老师傅说："通用 Skill 解决'怎么做'的问题，项目 Skill 解决'做成什么样'的问题。两者结合，AI 既知道最佳实践，又知道你的项目规范。"
B 端场景的特殊需求
小明的项目是一个后台管理系统，属于典型的 B 端应用。他发现 B 端和 C 端（面向普通用户的应用）的设计需求很不一样。
C 端追求"好看"，B 端追求"好用"。C 端可以有炫酷的动画，B 端要的是"快速完成任务"。C 端可以简化功能，B 端往往需要"一个页面塞下几十个字段"。
老师傅说："B 端的设计规范和 C 端不同。你需要在规范里加上 B 端特有的约束。"
比如：
表单规范：B 端表单经常有几十个字段。要求字段分组（用 Card 包裹），每组有清晰的标题。必填字段标红星。所有字段都要有 Zod 校验。提交按钮必须有 loading 状态。
表格规范：B 端表格要支持排序、分页、筛选。操作列的按钮要有二次确认（特别是删除操作）。表格要有空状态提示。
权限控制：B 端应用通常有复杂的权限系统。不同角色看到的页面不同。在设计规范里要说明"所有页面都要考虑权限控制，隐藏用户无权访问的功能"。
把这些 B 端特有的规范写进 DESIGN_SYSTEM.md 后，AI 生成的代码就会自动符合 B 端的使用习惯。
从"监工"到"导演"
小明按照老师傅的建议，完成了三个步骤：
- 让 AI 扫描项目，生成 DESIGN_SYSTEM.md
- 创建项目 Skill（
my-project-design），把 DESIGN_SYSTEM.md 放到 references/ 目录 - 安装通用 Skill（
frontend-design）
整个过程只花了十几分钟。
从那以后，他发现 AI 生成的代码一致性明显提高了。不用再盯着它"这里的颜色不对""那里的圆角不对"，AI 自己就会按规矩来。他从"监工"变成了"导演"——只需要说"创建一个用户列表页面"，AI 就会自动：
- 使用
frontend-design的最佳实践（响应式设计、无障碍支持） - 遵循
my-project-design的项目规范（正确的颜色、间距、组件） - 生成符合项目风格的高质量代码
更重要的是，这个过程是可重复的。每次项目有变化，他只需要让 AI 重新扫描一次，更新 Skill 里的 references/DESIGN_SYSTEM.md，规范就会自动更新。他不需要手动维护一份复杂的设计规范文档，AI 会帮他做这件事。
老师傅说："这就是 AI 时代的设计系统。以前需要设计团队花几个月建设的东西，现在让 AI 扫描几秒钟就能生成。你定义规则，AI 执行规则。你不需要懂 CSS 的每个细节，但你需要知道'我的产品应该长什么样'。这是你的产品，你说了算。"
团队协作：一次创建，全员同步
小明问："如果是团队开发，每个人都要创建一次 Skill 吗？"
老师傅说："不用。把 .claude/skills/my-project-design/ 目录提交到 Git 仓库，其他人拉取代码就能用。"
这就是 Skills 的好处。以前团队协作时，设计规范可能只存在于设计师的脑子里，或者散落在各种文档里。开发者不知道该用什么颜色、什么间距，只能凭感觉写。
现在有了项目 Skill，所有人的 AI 都会自动加载同一份规范，生成的代码自然就风格一致了。新人加入团队，不需要花时间学习设计规范，AI 会自动帮他遵守。
老师傅说："这就是 Skills 的力量。规范不再是口口相传，而是封装在 Skill 里，AI 可以自动触发和加载。团队越大，这个价值越明显。"
小结
小明学到了：
- 不需要手动整理设计规范，让 AI 并行扫描代码库自动生成 DESIGN_SYSTEM.md
- 创建项目 Skill 是优先选择，把 DESIGN_SYSTEM.md 作为 references 文件，实现渐进式加载
- Skill 会自动触发，AI 根据任务类型自动加载对应的 Skill，不需要每次提醒
- 通用 Skill + 项目 Skill，前者提供最佳实践，后者提供项目规范
- 定期重新扫描，保持 Skill 中的设计规范文档与代码库同步
- 团队协作更简单，把 Skill 提交到 Git，全员自动同步
老师傅说："VibeCoding 的核心是'你定规则，AI 执行'。Skills 就是定规则的最佳方式。你不需要手动整理设计规范，让 AI 扫描代码库，它会自动提取出设计模式。然后把这些规范封装成 Skill，AI 就会在需要时自动加载和遵守。"
小明点点头。他终于理解了为什么大厂要花那么多时间建设设计系统——不是为了好看，而是为了一致性。而在 AI 时代，设计系统的建设成本大幅降低了。以前需要设计团队几个月的工作，现在让 AI 扫描几秒钟就能完成。但设计系统的价值反而更大了，因为它不仅约束人，还能约束 AI。
实践建议
- 让 AI 并行扫描 tailwind.config.js 和 src/components/ 目录，自动生成 DESIGN_SYSTEM.md
- 创建项目 Skill（如
my-project-design），把 DESIGN_SYSTEM.md 放到 references/ 目录 - 在 SKILL.md 中写清楚触发条件（"当需要创建或修改 UI 组件时使用"）
- 安装通用 Skills（如
frontend-design），提升 AI 的前端代码质量 - 每次添加新组件或修改配置后，让 AI 重新扫描更新 Skill 中的文档
- 把
.claude/skills/目录纳入 Git 管理，团队成员自动同步
下一步
你已经掌握了 UI/UX 的核心知识。接下来，第六章会讲数据持久化——如何让你的应用"记住"用户的数据。