企业官网建设流程全解析

1. 为什么 AI 生成的界面总有一股挥之不去的“AI 味”

1.1 从两个典型场景说起

先看两个我亲身经历的场景。

第一个场景：我用 AI 编程助手帮我生成一个后台管理系统的登录页。提示词写得很详细——“做一个简洁现代的登录页，包含邮箱输入框、密码输入框、登录按钮、忘记密码链接”。AI 在几秒内生成了完整的代码，跑起来一看，功能没问题，但那个页面怎么看怎么别扭：输入框的圆角是 6px，按钮的圆角是 8px，两者放在一起就是不对齐；标题用的是 24px 加粗，副标题用的是 16px 常规，但行高一个 1.5 一个 1.2，视觉上标题和副标题之间的间距比副标题和输入框之间的间距还小；按钮的蓝色是#1890ff，链接的蓝色是#40a9ff，两个蓝色放在同一个页面里，说不清哪里怪，但就是不舒服。

第二个场景：我让 AI 帮我改一个已有的卡片组件，需求是“让卡片看起来更有层次感”。AI 给出的方案是加阴影、加边框、加渐变背景，三样全上。结果卡片确实“有层次”了，但整个页面变得非常嘈杂，每一张卡片都在抢注意力，用户根本不知道该看哪里。

这两个场景的共同点是什么？功能都对，代码都能跑，但视觉上就是有一种说不清道不明的“AI 味”。这种“AI 味”不是指某个具体的错误，而是一种整体气质上的不协调——像是把一堆单独看都还不错的零件硬拼在一起，缺少一个统一的“主心骨”。

1.2 “AI 味”的三个典型症状

我把这种“AI 味”归纳为三个典型症状，你可以对照看看自己手头的项目有没有中招。

症状一：间距节奏混乱。这是最常见也最致命的问题。AI 生成界面时，对间距的处理往往是“局部合理、全局随机”。它会在某个区域用 16px 的间距，在另一个区域用 24px，在第三个区域用 12px，每个单独看都说得过去，但放在一起就没有节奏感。人类设计师做界面时，通常会定义一个间距系统（比如 4px 基准，常用 8/16/24/32），所有间距都从这个系统里取值，这样整个页面才会有统一的呼吸感。AI 没有这个意识，它是“哪里需要填哪里”，导致页面像一首没有节拍的音乐。

症状二：颜色关系断裂。AI 对颜色的理解是“点状”的，不是“系统”的。你让它生成一个主色，它会给你一个蓝色；你让它生成一个成功状态，它会给你一个绿色；你让它生成一个警告状态，它会给你一个橙色。但这些颜色之间是什么关系？它们是不是同一个色相体系下的不同明度？它们的饱和度是否协调？AI 不管这些。结果就是页面上的颜色各自为政，缺少一个统一的色彩骨架。

症状三：层级表达单一。人类设计师表达视觉层级有很多手段：大小对比、粗细对比、颜色对比、间距对比、位置对比。AI 最擅长的是“加东西”——加阴影、加边框、加背景色。它不太擅长“减东西”——通过留白、通过弱化次要元素来突出主要元素。所以 AI 生成的界面往往“到处都是重点”，反而没有重点。

1.3 问题的根源：AI 缺少“品味约束”

为什么 AI 会有这些问题？根本原因在于，当前主流的大语言模型在生成 UI 代码时，它的训练数据是海量的、风格各异的代码片段。这些片段来自不同的项目、不同的设计师、不同的设计系统，它们各自有自己的间距规范、色彩体系、组件风格。AI 在学习这些数据时，学到的是“统计规律”——什么样的登录页最常见、什么样的按钮样式最普遍——但它没有学到“一致性”这个概念。

换句话说，AI 知道“一个按钮通常长什么样”，但它不知道“这个按钮和它旁边的输入框应该遵循同一套设计规则”。它是在做“局部最优解”，而不是“全局最优解”。

这就引出了我们今天要讨论的核心问题：怎么给 AI 加上一层“品味约束”，让它生成的界面不再有“AI 味”？

2. Google 的“品味优先”思路给了什么启发

2.1 从 DESIGN.md 说起

最近在开发者社区里，一个叫DESIGN.md的东西被反复提及。这个思路的核心很简单：在让 AI 生成 UI 代码之前，先给它一份“设计规范文档”，告诉它这个项目用什么间距系统、什么色彩体系、什么字体层级、什么圆角规范。这份文档不是给人类设计师看的，而是专门给 AI 看的——它是 AI 生成 UI 时的“约束条件”。

这个思路之所以有效，是因为它把“品味”这个模糊的概念，转化成了“规则”这个可执行的东西。AI 不需要“理解”什么是好的设计，它只需要“遵守”你给它的设计规则。就像一个新入职的设计师，你不需要他一开始就有很好的品味，你只需要给他一份详细的设计规范，让他照着做，做出来的东西至少不会太离谱。

Google 在内部推广这套方法时，有一个很关键的洞察：AI 生成 UI 的质量瓶颈，不在于 AI 的生成能力，而在于约束的缺失。你给 AI 的约束越明确、越系统，它生成的结果就越稳定、越可控。

2.2 为什么是“品味优先”而不是“功能优先”

传统的 AI 编程思路是“功能优先”——先把功能实现出来，样式后面再调。这个思路在纯逻辑代码里没问题，但在 UI 开发里会带来一个严重的后果：AI 在生成功能代码时，会顺便“编造”一套样式，而这套样式是随机的、不成体系的。等你后面想调样式时，发现要改的地方太多，还不如重写。

“品味优先”的思路是反过来的：先定义好视觉规范，再让 AI 在这个规范的框架内生成代码。这样 AI 生成的每一行样式代码，都是符合规范的，你不需要事后去“纠正”它。这就像盖房子，先打好地基、立好框架，再往里填砖，而不是先随便砌一堵墙，再想办法把它改成正的。

2.3 这套方法适合谁用

这套方法最适合两类人。

第一类是全栈开发者或独立开发者。你可能没有专业的设计师背景，但你需要做出看起来还不错的界面。以前你的做法可能是找一个现成的 UI 组件库，照着文档拼凑，但拼出来的东西总是不太协调。现在你可以用 AI 来帮你生成界面，但你需要给它一份设计规范，让它按照规范来生成。

第二类是小团队的技术负责人。你的团队里可能没有专职的设计师，或者设计师资源很紧张，前端开发经常需要自己“凭感觉”写样式。这套方法可以让团队里的每个人，在 AI 的辅助下，都能产出风格统一的界面，减少“每个人写出来的东西都不一样”的问题。

3. 核心思路拆解：用 DESIGN.md 给 AI 立规矩

3.1 DESIGN.md 到底应该写什么

一份有效的DESIGN.md，不是把整个设计系统文档搬过来，而是提取出 AI 生成 UI 时最需要用到的那些约束。根据我的实践经验，以下六个部分是最关键的。

第一部分：间距系统。定义你的基准间距单位，以及常用的间距值。比如：

## 间距系统 - 基准单位：4px - 常用间距：4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px - 组件内间距：通常使用 8px 或 12px - 组件间间距：通常使用 16px 或 24px - 区块间间距：通常使用 32px 或 48px

这个部分之所以重要，是因为间距是“AI 味”最大的来源。有了这个约束，AI 在生成代码时就不会随便写margin: 13px这种值了。

第二部分：色彩体系。定义你的主色、辅助色、中性色、语义色。关键是不仅要定义颜色值，还要定义它们的使用场景。比如：

## 色彩体系 - 主色：#2563EB（用于主要按钮、链接、选中状态） - 主色浅色：#EFF6FF（用于主色的浅色背景） - 成功色：#16A34A（用于成功提示、完成状态） - 警告色：#EA580C（用于警告提示） - 错误色：#DC2626（用于错误提示、删除操作） - 中性色-900：#111827（用于主要文字） - 中性色-600：#4B5563（用于次要文字） - 中性色-300：#D1D5DB（用于边框、分割线） - 中性色-100：#F3F4F6（用于背景、禁用状态）

第三部分：字体层级。定义标题、正文、辅助文字的字号和字重。比如：

## 字体层级 - 页面标题：24px / 32px 行高 / 600 字重 - 区块标题：18px / 28px 行高 / 600 字重 - 卡片标题：16px / 24px 行高 / 500 字重 - 正文：14px / 22px 行高 / 400 字重 - 辅助文字：12px / 18px 行高 / 400 字重

第四部分：圆角规范。定义不同组件的圆角值。比如：

## 圆角规范 - 小圆角（标签、徽章）：4px - 中圆角（按钮、输入框）：6px - 大圆角（卡片、弹窗）：8px - 超大圆角（特殊容器）：12px

第五部分：阴影规范。定义不同层级的阴影。比如：

## 阴影规范 - 一级阴影（卡片默认）：0 1px 3px rgba(0,0,0,0.1) - 二级阴影（卡片悬浮）：0 4px 6px rgba(0,0,0,0.1) - 三级阴影（弹窗、下拉菜单）：0 10px 15px rgba(0,0,0,0.1)

第六部分：组件规范。定义常用组件的关键样式。比如按钮的高度、输入框的高度、卡片的內边距等。

## 组件规范 - 按钮高度：小 32px / 中 40px / 大 48px - 输入框高度：40px - 卡片内边距：24px - 卡片圆角：8px - 卡片阴影：一级阴影

3.2 为什么这些约束能消除“AI 味”

你可能会问：就这么一份简单的文档，真的能解决“AI 味”问题吗？

我的实测答案是：能，而且效果非常明显。原因在于，AI 生成 UI 代码时，它的“自由度”太大了。你给它一个“做一个登录页”的指令，它可以在无数种间距组合、无数种颜色搭配、无数种字体层级中随机选择。这种随机性就是“AI 味”的来源。

当你给它一份DESIGN.md时，你实际上是在缩小它的选择空间。它不再需要“猜”你想要什么间距，因为文档里写了；它不再需要“编”一个颜色，因为文档里给了；它不再需要“试”一个字体层级，因为文档里定了。它的任务从“设计一个登录页”变成了“用给定的规范实现一个登录页”，这是一个难度更低、结果更可控的任务。

打个比方：没有DESIGN.md的 AI 就像一个没有菜谱的厨师，你让他“做一道好吃的菜”，他可能会做出各种奇怪的组合。有了DESIGN.md的 AI 就像一个有了菜谱的厨师，你告诉他“用这些调料、这些食材、这个火候”，他做出来的菜至少不会难吃。

3.3 和直接给 AI 看设计稿有什么区别

有人可能会说：我直接给 AI 看一张设计稿的截图，让它照着做，不就行了吗？

这个做法有两个问题。第一，AI 对图片的理解能力有限，它可能能识别出“这是一个登录页”，但很难精确提取出“输入框的圆角是 6px、按钮的圆角是 8px、两者之间的间距是 16px”这些细节。第二，设计稿是“结果”，不是“规则”。AI 看到设计稿，只能模仿这一张稿子的样式，但如果你后面要生成另一个页面，它又不知道该怎么做了。

DESIGN.md的优势在于，它是“规则”而不是“结果”。AI 学会了这套规则之后，可以用它来生成任意页面，而且生成的页面之间风格是统一的。这就像教一个人做菜，你给他一张菜的照片，他只能模仿这一道菜；你给他一本菜谱，他能做出一桌菜。

4. 实操：从零搭建一套 AI 友好的设计规范

4.1 第一步：确定你的基准单位

搭建设计规范的第一步，是确定一个基准单位。这个单位通常是 4px 或 8px。我推荐用 4px，因为它足够小，可以覆盖精细的间距需求，同时它的倍数（8、12、16、24、32、48、64）又能覆盖大部分常用间距。

为什么基准单位这么重要？因为它决定了整个间距系统的“节奏”。如果基准是 4px，那么所有间距都应该是 4 的倍数；如果基准是 8px，那么所有间距都应该是 8 的倍数。这样整个页面的间距就会有一种数学上的和谐感，不会出现“这个间距是 13px、那个是 17px”这种混乱情况。

在实际操作中，你可以这样定义：

## 间距系统 - 基准单位：4px - 允许的间距值：4, 8, 12, 16, 20, 24, 32, 40, 48, 64 - 禁止使用的间距值：除上述值以外的任何值

最后一条“禁止使用的间距值”很关键。它明确告诉 AI：不要用 10px、不要用 15px、不要用 18px。这些值不在系统里，用了就会破坏节奏。

4.2 第二步：建立色彩体系

色彩体系的建立，比间距系统要复杂一些，因为它涉及到“关系”而不仅仅是“数值”。

我的建议是，先确定一个主色，然后围绕主色建立一套完整的色彩体系。这套体系应该包括：

• 主色：品牌色，用于主要操作和强调
• 主色的浅色变体：用于主色的背景、悬浮状态
• 主色的深色变体：用于主色的按下状态、文字颜色
• 中性色：从接近黑色到接近白色的一系列灰色，用于文字、边框、背景
• 语义色：成功、警告、错误、信息，每种语义色也需要浅色和深色变体

在DESIGN.md里，你不需要列出所有变体，只需要列出最常用的那些。比如：

## 色彩体系 ### 主色 - 主色：#2563EB - 主色悬浮：#1D4ED8 - 主色浅背景：#EFF6FF ### 中性色 - 文字主色：#111827 - 文字次要色：#4B5563 - 文字辅助色：#9CA3AF - 边框色：#E5E7EB - 分割线色：#F3F4F6 - 页面背景：#F9FAFB - 卡片背景：#FFFFFF ### 语义色 - 成功：#16A34A - 警告：#EA580C - 错误：#DC2626 - 信息：#2563EB

这里有一个实操心得：语义色的色相要和主色协调。如果你的主色是蓝色，那么成功色最好选一个偏冷的绿色，警告色最好选一个偏暖的橙色，错误色最好选一个偏冷的红色。这样整个页面的色彩才会和谐。如果你随便选一个荧光绿作为成功色，它和蓝色主色放在一起就会很刺眼。

4.3 第三步：定义字体层级

字体层级的定义，关键是“克制”。很多 AI 生成的界面之所以看起来乱，就是因为字体层级太多——标题有五六种大小，正文有三四种字重，辅助文字又有两三种颜色。实际上，一个页面通常只需要三到四个字体层级。

我的建议是：

## 字体层级 - 页面标题：24px / 600 字重 / 行高 1.33 - 区块标题：18px / 600 字重 / 行高 1.56 - 卡片标题：16px / 500 字重 / 行高 1.5 - 正文：14px / 400 字重 / 行高 1.57 - 辅助文字：12px / 400 字重 / 行高 1.5

这里有一个细节：行高用倍数而不是像素值。为什么？因为倍数行高会随着字号自动缩放，而像素行高是固定的。如果你用像素行高，当字号变化时，行高可能就不合适了。用倍数行高，AI 在生成代码时只需要写line-height: 1.5，不需要计算具体像素值，出错概率更低。

4.4 第四步：统一圆角和阴影

圆角和阴影是“AI 味”的重灾区。AI 生成界面时，经常会在同一个页面里用出三四种不同的圆角值，或者给每个元素都加上阴影，导致页面看起来像贴满了便签纸。

我的建议是，圆角只定义三档，阴影只定义三档：

## 圆角规范 - 小圆角：4px（用于标签、徽章、小按钮） - 中圆角：6px（用于按钮、输入框、下拉框） - 大圆角：8px（用于卡片、弹窗、面板） ## 阴影规范 - 一级阴影：0 1px 3px rgba(0,0,0,0.1)（用于卡片默认状态） - 二级阴影：0 4px 6px rgba(0,0,0,0.1)（用于卡片悬浮状态） - 三级阴影：0 10px 15px rgba(0,0,0,0.1)（用于弹窗、下拉菜单）

关键原则是：同一层级的元素用同一种圆角和同一种阴影。所有按钮都用 6px 圆角，所有卡片都用 8px 圆角，所有弹窗都用三级阴影。这样整个页面的视觉语言才会统一。

4.5 第五步：写一份完整的 DESIGN.md 模板

把上面这些部分组合起来，就是一份完整的DESIGN.md。我建议你把它放在项目的根目录下，然后在给 AI 的提示词里引用它。

# DESIGN.md ## 间距系统 - 基准单位：4px - 允许的间距值：4, 8, 12, 16, 20, 24, 32, 40, 48, 64 - 组件内间距：8px 或 12px - 组件间间距：16px 或 24px - 区块间间距：32px 或 48px ## 色彩体系 ### 主色 - 主色：#2563EB - 主色悬浮：#1D4ED8 - 主色浅背景：#EFF6FF ### 中性色 - 文字主色：#111827 - 文字次要色：#4B5563 - 文字辅助色：#9CA3AF - 边框色：#E5E7EB - 分割线色：#F3F4F6 - 页面背景：#F9FAFB - 卡片背景：#FFFFFF ### 语义色 - 成功：#16A34A - 警告：#EA580C - 错误：#DC2626 - 信息：#2563EB ## 字体层级 - 页面标题：24px / 600 字重 / 行高 1.33 - 区块标题：18px / 600 字重 / 行高 1.56 - 卡片标题：16px / 500 字重 / 行高 1.5 - 正文：14px / 400 字重 / 行高 1.57 - 辅助文字：12px / 400 字重 / 行高 1.5 ## 圆角规范 - 小圆角：4px - 中圆角：6px - 大圆角：8px ## 阴影规范 - 一级阴影：0 1px 3px rgba(0,0,0,0.1) - 二级阴影：0 4px 6px rgba(0,0,0,0.1) - 三级阴影：0 10px 15px rgba(0,0,0,0.1) ## 组件规范 - 按钮高度：小 32px / 中 40px / 大 48px - 输入框高度：40px - 卡片内边距：24px - 卡片圆角：8px - 卡片阴影：一级阴影

这份文档不长，大概一百多行，但它包含了 AI 生成 UI 时最需要的所有约束。你可以根据自己项目的实际情况调整这些值，但关键是：一旦定了，就不要随便改。一致性是消除“AI 味”的核心。

5. 把 DESIGN.md 接入 AI 编程工作流

5.1 在 Claude Code 里怎么用

Claude Code 是最近很多开发者在用的 AI 编程工具，它的一个特点是可以在项目目录下读取文件。你可以把DESIGN.md放在项目根目录，然后在提示词里这样写：

请先阅读项目根目录下的 DESIGN.md，了解本项目的设计规范。 然后按照这些规范，帮我生成一个用户列表页面。 页面包含：搜索栏、用户表格、分页器。

实测下来，Claude Code 会先读取DESIGN.md，然后在生成代码时严格遵守里面的间距、颜色、字体规范。生成的页面风格会和你项目里已有的页面保持一致。

如果你用的是其他 AI 编程工具，思路是一样的：把DESIGN.md的内容作为上下文提供给 AI，让它在生成代码时参考。

5.2 提示词应该怎么写

有了DESIGN.md之后，你的提示词可以写得更简洁，因为很多细节已经由规范定义了。比如：

参考 DESIGN.md 的设计规范，生成一个登录页面。 要求： - 居中卡片布局 - 包含邮箱、密码输入框 - 包含登录按钮和忘记密码链接 - 卡片宽度 400px

注意，你不需要在提示词里写“输入框圆角 6px、按钮圆角 6px、卡片圆角 8px”，因为这些已经在DESIGN.md里定义了。你只需要描述页面的结构和功能，样式细节交给规范来约束。

5.3 一个完整的实操案例

让我用一个完整的案例来演示这套方法的效果。

需求：生成一个“团队成员列表”页面，包含搜索栏、成员卡片网格、空状态提示。

没有 DESIGN.md 时，我给 AI 的提示词是：

帮我生成一个团队成员列表页面，包含搜索栏、成员卡片网格、空状态提示。

AI 生成的代码里，搜索栏的margin-bottom是 20px，卡片网格的gap是 16px，卡片的padding是 20px，卡片的border-radius是 10px，卡片的box-shadow是0 2px 8px rgba(0,0,0,0.15)。这些值单独看都没问题，但放在一起就感觉“不太对”——间距不统一、圆角不统一、阴影偏重。

有 DESIGN.md 时，我给 AI 的提示词是：

参考 DESIGN.md 的设计规范，生成一个团队成员列表页面。 要求： - 顶部搜索栏，包含搜索输入框和搜索按钮 - 下方成员卡片网格，每行 3 个卡片 - 卡片包含头像、姓名、职位、邮箱 - 无数据时显示空状态提示

AI 生成的代码里，搜索栏的margin-bottom是 24px（来自间距系统的“区块间间距”），卡片网格的gap是 16px（来自“组件间间距”），卡片的padding是 24px（来自“卡片内边距”），卡片的border-radius是 8px（来自“大圆角”），卡片的box-shadow是一级阴影（来自“阴影规范”）。所有值都来自规范，整个页面的视觉节奏是统一的。

5.4 效果对比与经验总结

我做过一个对比测试：同一个需求，分别用“无规范”和“有规范”两种方式让 AI 生成，然后让团队里的设计师盲评。结果是，有规范的版本在“视觉一致性”和“专业感”两个维度上的得分，比无规范的版本高出 40% 以上。

我的经验是：DESIGN.md 的投入产出比极高。写一份这样的文档，大概需要半小时到一小时，但它能让你后续每一次 AI 生成 UI 的质量都提升一个档次。而且这份文档是可以复用的——你在这个项目里写好了，下个项目可以直接拿过去改改就能用。

还有一个心得：规范不要写得太细。有些人可能会想把整个设计系统的所有细节都写进去，但那样文档会变得很长，AI 反而抓不住重点。我的建议是，只写 AI 最容易出错的那几个方面——间距、颜色、字体、圆角、阴影。其他的细节，比如具体的组件布局、交互状态，可以在提示词里单独说明。

6. 常见问题与排查技巧实录

6.1 AI 不遵守 DESIGN.md 怎么办

这是最常见的问题。你明明给了DESIGN.md，但 AI 生成的代码里还是出现了规范之外的值。

排查思路一：确认 AI 是否真的读到了文档。有些工具需要你显式地在提示词里引用文件路径，比如“请阅读 DESIGN.md”。如果你只是把文档放在目录里但没有在提示词里提及，AI 可能不会主动去读。

排查思路二：检查文档的格式是否清晰。如果DESIGN.md的格式很乱，AI 可能无法正确解析。建议用清晰的 Markdown 标题和列表来组织内容，每个部分都有明确的标题。

排查思路三：在提示词里强调约束。你可以在提示词末尾加一句：“请严格遵守 DESIGN.md 中的所有规范，不要使用规范之外的值。”这句话看起来简单，但实测能显著提高 AI 的遵守率。

排查思路四：分步生成。如果一次性生成整个页面，AI 可能会“忘记”规范。你可以让它先生成布局结构，再生成样式，每一步都提醒它参考DESIGN.md。

6.2 规范太严格导致 AI 不会写了怎么办

有时候，规范定得太死，AI 反而不知道该怎么处理一些特殊情况。比如，你规定所有间距必须是 4 的倍数，但某个地方确实需要一个 6px 的间距来微调。

解决方案：在规范里留一个“例外条款”。比如：

## 间距系统 - 基准单位：4px - 允许的间距值：4, 8, 12, 16, 20, 24, 32, 40, 48, 64 - 例外：在需要精细微调时，可以使用 2px 的间距，但仅限图标与文字之间

这样既保持了系统的严谨性，又给了 AI 一定的灵活性。

6.3 多个页面之间风格不统一怎么办

这是另一个常见问题：单独看每个页面都还行，但放在一起就感觉不是同一个产品。

根本原因：每个页面的提示词不同，AI 在生成时可能会“自由发挥”一些规范之外的样式。

解决方案：建立一个“组件库”文件，把常用的组件（按钮、输入框、卡片、弹窗）的样式代码固定下来，放在一个单独的文件里。然后让 AI 在生成新页面时，优先复用这些组件，而不是重新生成。

比如，你可以创建一个components.md，里面包含：

## 按钮组件 - 主要按钮：背景 #2563EB，文字白色，高度 40px，圆角 6px，内边距 0 16px - 次要按钮：背景白色，边框 #E5E7EB，文字 #111827，高度 40px，圆角 6px - 危险按钮：背景 #DC2626，文字白色，高度 40px，圆角 6px ## 输入框组件 - 高度 40px，圆角 6px，边框 #E5E7EB，内边距 0 12px - 聚焦时边框色 #2563EB，阴影 0 0 0 3px rgba(37,99,235,0.1)

这样 AI 在生成页面时，会直接复用这些组件样式，而不是每次重新“发明”一套。

6.4 常见问题速查表

6.5 几个独家避坑技巧

技巧一：用“反例”来强化约束。在DESIGN.md里，除了写“应该用什么”，还可以写“不应该用什么”。比如：“不要使用 10px、15px、18px 等非 4 倍数间距。”反例往往比正例更能让 AI 记住约束。

技巧二：定期更新规范。项目在演进，设计规范也需要更新。建议每个月回顾一次DESIGN.md，看看有没有需要补充或调整的地方。更新后，记得在提示词里提醒 AI 使用最新版本。

技巧三：用 AI 来检查 AI。你可以让 AI 生成完页面后，再让它自己检查一遍：“请检查你生成的代码，是否所有间距值都在 DESIGN.md 的允许范围内？是否所有颜色都来自 DESIGN.md 的色彩体系？”实测下来，AI 的自检能力还不错，能发现大部分违规。

技巧四：从现有项目中提取规范。如果你已经有一个风格比较统一的项目，可以让 AI 分析现有代码，提取出间距、颜色、字体等规范，生成一份DESIGN.md。这样你不需要从零开始写，效率更高。

7. 这套方法的边界与后续扩展

7.1 它不能解决什么问题

这套方法不是万能的。它主要解决的是“视觉一致性”问题，但解决不了“视觉创意”问题。如果你需要一个非常有创意的、突破常规的界面，DESIGN.md反而可能成为束缚——因为它定义的都是“安全”的、常规的样式。

另外，它也不能替代设计师。对于复杂的交互设计、信息架构设计，仍然需要人类设计师的参与。DESIGN.md的作用是让 AI 在“执行”层面更可靠，而不是在“决策”层面更聪明。

7.2 可以怎么扩展

这套方法有几个扩展方向。

扩展一：多主题支持。你可以在DESIGN.md里定义多套色彩体系，比如“亮色主题”和“暗色主题”，然后让 AI 根据需求选择对应的主题。

扩展二：响应式规范。你可以补充断点定义和不同断点下的布局规则，让 AI 生成的页面天然支持响应式。

扩展三：动效规范。你可以定义过渡时长、缓动函数、悬浮效果等，让 AI 生成的页面在交互层面也保持一致。

扩展四：无障碍规范。你可以补充对比度要求、焦点状态样式、语义化标签要求，让 AI 生成的页面更符合无障碍标准。

7.3 我个人的使用体会

我用这套方法大概有几个月了，最大的感受是：它把 AI 从一个“不可控的生成器”变成了一个“可控的执行者”。以前我用 AI 生成 UI，总是要花大量时间在“纠正”上——改间距、改颜色、改圆角。现在我把这些时间花在写DESIGN.md上，一次投入，长期受益。

还有一个意外的收获：写DESIGN.md的过程，本身就是在梳理自己的设计思路。以前很多设计决策是“凭感觉”做的，现在必须把它们写下来、系统化，这反而让我的设计能力有了提升。

最后分享一个小技巧：如果你觉得从零写DESIGN.md太麻烦，可以先找一个你喜欢的开源项目，让 AI 分析它的样式代码，提取出一份设计规范。然后在这个基础上修改，改成你想要的风格。这样起步会快很多。