企业官网建设流程全解析

1. 为什么AI生成的界面总让人一眼认出“机器味”

1.1 从三个真实场景说起：那种说不清的别扭感

先描述几个你大概率遇到过的画面。

第一个场景：你让AI帮你生成一个后台管理面板。它很快吐出来一版——紫色渐变按钮、圆角卡片、大标题居中、下面一排图标配文字。功能没问题，但你就是觉得“这玩意儿像模板站”。你说不上哪里丑，但就是不想用。

第二个场景：你让AI改一个登录页。它把原来的设计推倒重来，加了一堆阴影、发光、渐变边框，还贴心地给你配了“科技感”的深色背景。结果整个页面像2015年的Dribbble概念稿，好看但没法落地。

第三个场景：你让AI写一个移动端列表页。它给你的间距是8px、12px、16px、24px混着来，字号有14、15、16、17四种，颜色用了五种不同的灰。单看每个元素都还行，拼在一起就“散”了。

这三个场景的共同点是什么？AI在做UI时，是在“堆元素”，而不是在“做决策”。

它知道按钮长什么样、卡片长什么样、输入框长什么样，但它不知道在这个页面里，哪个元素该是主角、哪个该退到背景里、间距应该遵循什么节奏、颜色应该控制在几个以内。它没有“取舍”，只有“添加”。

这就是“AI味”的根源。不是AI画得丑，是AI画得太“满”、太“平均”、太“没有主次”。

1.2 “AI味”的五个典型症状，你中了几个

我把常见的“AI味”表现归纳成五类，你可以对照看看：

症状一：渐变滥用。紫色到蓝色的渐变几乎成了AI生成UI的默认皮肤。按钮渐变、标题渐变、背景渐变、边框也渐变。问题是，渐变本身不是问题，问题是AI不知道什么时候不该用渐变。一个企业级后台的表格行，需要渐变吗？不需要。但AI会给你加上。

症状二：圆角失控。卡片圆角16px、按钮圆角12px、输入框圆角8px、头像圆角50%。每个圆角单独看都合理，但放在一起就没有统一的圆角语言。好的设计系统里，圆角是有层级的——比如容器用大圆角、控件用中圆角、标签用小圆角，形成节奏。AI往往是随机分配。

症状三：阴影堆叠。AI特别喜欢给元素加阴影，而且往往是多层阴影叠加。卡片有阴影、按钮有阴影、下拉菜单有阴影、连文字都要加个投影。结果整个页面“浮”起来了，没有层次感，只有混乱感。

症状四：间距无节奏。这是最隐蔽也最致命的问题。AI生成的间距往往是“看起来差不多就行”——这里16px，那里20px，下面24px。人眼对间距的敏感度远超想象，不统一的间距会让页面显得“脏”。

症状五：颜色数量失控。一个页面里出现七八种颜色，主色、辅助色、强调色、警告色、成功色、信息色全上，再加上各种透明度变体。颜色一多，视觉焦点就散了，用户不知道该看哪里。

这五个症状背后其实是同一个问题：AI缺少一套明确的“品味约束”。

1.3 为什么“提示词工程”救不了UI的AI味

很多人第一反应是：那我提示词写详细点不就行了？

我试过。我写过这样的提示词：“请使用极简风格，主色调用深蓝色，间距使用8的倍数，圆角统一为12px，不要使用渐变，阴影只用在悬浮状态。”

结果呢？AI确实照做了——但它做出来的东西依然有AI味。为什么？

因为提示词是“点状约束”，而设计是“系统约束”。你告诉它圆角12px，它就把所有圆角都设成12px，包括那些本该用更大圆角或更小圆角的地方。你告诉它不要渐变，它就把所有渐变都去掉，包括那个本该用渐变来引导视线的关键按钮。

提示词能约束“做什么”，但约束不了“什么时候不做”。而设计的品味，恰恰体现在“知道什么时候该克制”。

更深层的问题是：提示词是线性的，设计是网状的。你没法用一段文字描述清楚“这个页面的视觉层级应该是怎样的”“信息密度应该控制在什么范围”“留白应该占多大比例”。这些是系统性的决策，不是几个参数能搞定的。

所以，我们需要换一个思路：不是告诉AI“怎么做”，而是给AI一套“判断标准”。

这就是Google最近在推的“品味优先”思路的核心——用一份结构化的设计规范文件（比如DESIGN.md），把设计决策的“判断逻辑”写清楚，让AI在生成UI时有据可依，而不是凭感觉堆砌。

2. DESIGN.md 到底解决了什么问题：把“品味”变成可执行的约束

2.1 从“描述风格”到“定义规则”的转变

传统做法是告诉AI“我要什么风格”。比如“我要苹果风格”“我要Material Design”“我要极简风”。

但“风格”是一个模糊的概念。什么叫苹果风格？是毛玻璃效果？是大标题？是圆角卡片？还是那种“说不清但一看就知道”的感觉？

AI理解不了“感觉”。它只能理解具体的规则。

DESIGN.md的思路是：把“风格”拆解成可执行的规则。不是告诉AI“我要极简”，而是告诉AI“在这个页面里，最多使用两种字体、三种颜色、四种间距值”。

这就像教一个新人做设计。你不会跟他说“你要有品味”，你会跟他说“标题和正文的字号比不要超过2:1”“主色和背景色的对比度要在4.5:1以上”“卡片之间的间距要大于卡片内部的间距”。

DESIGN.md就是把这些“老设计师的直觉”写成文档，让AI可以读取和执行。

2.2 一份DESIGN.md里应该有什么：六个核心模块

根据我的实践，一份能真正约束AI的DESIGN.md，至少应该包含以下六个模块：

模块一：颜色系统。不是简单列几个色值，而是定义每个颜色的“角色”和使用场景。比如：

• 主色（Primary）：只用于主要操作按钮和关键链接
• 表面色（Surface）：用于卡片、弹窗、面板的背景
• 背景色（Background）：用于页面底色
• 文字色（Text）：分为主要文字、次要文字、禁用文字三级
• 边框色（Border）：用于分割线和输入框边框

关键是限制数量。一个页面里，颜色角色不超过6个，每个角色只有一个色值（可以有透明度变体，但要有明确规则）。

模块二：间距系统。定义一套间距刻度，比如4、8、12、16、24、32、48、64。然后规定：

• 组件内部间距：使用4或8
• 组件之间间距：使用12或16
• 区块之间间距：使用24或32
• 页面边距：使用16或24

关键是规定“什么时候用哪个值”，而不是只给一堆数字。

模块三：字体系统。定义字号、字重、行高的组合。比如：

• 页面标题：24px / 600 / 1.3
• 区块标题：18px / 600 / 1.4
• 正文：14px / 400 / 1.6
• 辅助文字：12px / 400 / 1.5

关键是限制字号数量。一个页面里，字号不超过4种。

模块四：圆角系统。定义圆角的层级关系。比如：

• 小圆角（4px）：用于标签、徽章
• 中圆角（8px）：用于按钮、输入框
• 大圆角（12px）：用于卡片、弹窗
• 全圆角（999px）：用于头像、胶囊按钮

关键是建立圆角与组件大小的对应关系。

模块五：阴影系统。定义阴影的层级。比如：

• 层级0：无阴影，用于平铺内容
• 层级1：轻微阴影，用于卡片默认状态
• 层级2：中等阴影，用于卡片悬浮状态
• 层级3：明显阴影，用于弹窗、下拉菜单

关键是规定“什么时候用哪一级”，而不是给一堆阴影参数。

模块六：布局规则。定义页面结构的基本约束。比如：

• 内容最大宽度：1200px
• 栅格系统：12列，间距24px
• 响应式断点：768px、1024px、1440px
• 页面边距：移动端16px，桌面端24px

这六个模块组合起来，就形成了一套“设计宪法”。AI在生成UI时，不是凭感觉发挥，而是在这套宪法框架内做选择。

2.3 为什么是Markdown而不是JSON或YAML

你可能会问：为什么不直接用JSON或YAML来定义这些规则？机器读取不是更方便吗？

我的实践体会是：Markdown的优势在于“人机共读”。

JSON和YAML是纯机器格式，人写起来容易出错，读起来也不直观。而Markdown是人和机器都能理解的格式。你可以用自然语言解释每条规则背后的意图，同时用结构化的方式呈现具体参数。

比如，你可以这样写：

## 颜色系统 ### 主色 - 色值：#2563EB - 用途：仅用于主要操作按钮、关键链接、选中状态 - 禁止：不要用于背景色、不要用于大面积填充 ### 表面色 - 色值：#FFFFFF - 用途：卡片、弹窗、面板的背景 - 禁止：不要用于页面底色

这种写法，AI能读懂（因为它能理解自然语言），人也能读懂（因为结构清晰）。而且，当设计规范需要调整时，改Markdown比改JSON直观得多。

更重要的是，Markdown允许你写“为什么”。比如你可以写：“主色只用于主要操作按钮，因为一个页面里如果有多个主要操作，用户就不知道哪个才是真正的重点。”这种解释，AI能理解，人也能理解，而且能帮助AI在遇到边界情况时做出更合理的判断。

2.4 一个反直觉的发现：约束越多，AI反而越有创造力

这是我在实践中最大的意外收获。

一开始我以为，给AI越多约束，它生成的东西就越死板。但实际恰恰相反：当你把“不该做什么”定义清楚后，AI在“该做什么”的范围内反而能做出更精准的选择。

举个例子。之前我让AI生成一个数据表格页面，它给我加了渐变表头、彩色标签、悬浮阴影、斑马纹、边框线，整个表格像圣诞树。后来我写了一份DESIGN.md，明确规定“表格不使用渐变、不使用斑马纹、标签颜色不超过两种、边框只使用底部1px分割线”。结果AI生成的表格干净利落，信息密度反而更高了。

为什么？因为约束消除了不确定性。当AI知道“不能用渐变”时，它就不会在渐变上浪费“决策预算”，而是把精力放在真正重要的地方——比如列宽分配、对齐方式、空状态处理。

这就像写代码时的代码规范。看起来规范限制了你的自由，但实际上它让你不用在“用Tab还是空格”“用单引号还是双引号”这种小事上纠结，可以把精力放在真正的逻辑上。

3. 把DESIGN.md接入Claude Code的完整实操链路

3.1 环境准备：你需要什么

在开始之前，先确认你手头有什么。

必备项：

• 一个可以运行Claude Code的环境（本地终端或远程开发机都行）
• 一个前端项目（React、Vue、原生HTML都行，本文以React为例）
• 一份写好的DESIGN.md文件

可选项：

• Figma账号（如果你想从设计稿提取规范）
• 一个现成的组件库（比如Element UI、Ant Design，用来参考）

关于Claude Code的安装，网上教程很多，核心就是确保你的Node.js版本在18以上，然后通过npm全局安装。安装完成后，在项目根目录运行claude命令就能启动。

这里有一个容易被忽略的细节：Claude Code默认读取项目根目录的CLAUDE.md文件作为上下文。所以你需要把DESIGN.md的内容整合到CLAUDE.md里，或者在CLAUDE.md里引用DESIGN.md。

我的做法是：在CLAUDE.md里写一行@DESIGN.md，这样Claude Code会自动把DESIGN.md的内容加载到上下文里。这个引用语法是Claude Code特有的，很实用。

3.2 写一份AI能读懂的DESIGN.md：从模板到落地

直接给一份我实际在用的DESIGN.md模板，你可以根据自己的项目调整：

# 设计规范 ## 颜色 ### 主色 - 色值：#2563EB - 用途：主要按钮、关键链接、选中状态 - 禁止：背景填充、大面积使用 ### 成功色 - 色值：#16A34A - 用途：成功提示、完成状态 - 禁止：与主色同时出现在同一视觉层级 ### 警告色 - 色值：#EA580C - 用途：警告提示、需要注意的状态 - 禁止：用于普通信息展示 ### 错误色 - 色值：#DC2626 - 用途：错误提示、危险操作 - 禁止：用于非错误场景 ### 文字色 - 主要文字：#111827 - 次要文字：#6B7280 - 禁用文字：#D1D5DB ### 背景色 - 页面背景：#F9FAFB - 卡片背景：#FFFFFF - 悬浮背景：#F3F4F6 ### 边框色 - 默认边框：#E5E7EB - 强调边框：#D1D5DB ## 间距 使用8的倍数作为间距刻度：4, 8, 12, 16, 24, 32, 48, 64 - 组件内部：4 或 8 - 组件之间：12 或 16 - 区块之间：24 或 32 - 页面边距：16（移动端）/ 24（桌面端） ## 字体 - 页面标题：24px / 600 / 1.3 - 区块标题：18px / 600 / 1.4 - 正文：14px / 400 / 1.6 - 辅助文字：12px / 400 / 1.5 字体族：系统默认字体栈 ## 圆角 - 小圆角：4px（标签、徽章） - 中圆角：8px（按钮、输入框） - 大圆角：12px（卡片、弹窗） - 全圆角：999px（头像、胶囊按钮） ## 阴影 - 层级0：无阴影（平铺内容） - 层级1：0 1px 2px rgba(0,0,0,0.05)（卡片默认） - 层级2：0 4px 6px rgba(0,0,0,0.07)（卡片悬浮） - 层级3：0 10px 15px rgba(0,0,0,0.1)（弹窗、下拉） ## 布局 - 内容最大宽度：1200px - 栅格：12列，间距24px - 断点：768px / 1024px / 1440px ## 禁止事项 - 不使用渐变（除非是品牌明确要求的场景） - 不使用斑马纹表格 - 不在同一页面使用超过3种字号 - 不在同一页面使用超过2种阴影层级 - 不使用纯黑色（#000000）作为文字色 - 不使用纯白色（#FFFFFF）作为页面背景

这份规范的关键在于**“禁止事项”部分**。这是约束AI“不做傻事”的核心。你可以根据自己项目的实际情况增删。

3.3 在Claude Code里调用DESIGN.md的三种方式

方式一：直接引用。在CLAUDE.md里写@DESIGN.md，Claude Code会自动加载。这是最简单的方式，适合规范文件不大的情况。

方式二：按需加载。如果你不想让DESIGN.md一直占用上下文窗口，可以在对话中手动引用。比如：“请参考DESIGN.md中的颜色系统，帮我生成一个登录页。”Claude Code会去读取DESIGN.md的相关部分。

方式三：拆分成多个文件。如果规范很大，可以拆成colors.md、spacing.md、typography.md等，然后在CLAUDE.md里分别引用。这样AI在生成不同部分时可以只加载相关的规范。

我个人的习惯是方式一加方式二的组合：CLAUDE.md里引用DESIGN.md作为默认上下文，但在具体任务中会明确说“重点参考颜色系统和间距系统”。

3.4 实测对比：有规范和没规范的输出差异

我拿同一个需求做了对比测试。需求是：“生成一个用户列表页面，包含搜索框、表格、分页。”

没有DESIGN.md时，AI的输出：

• 搜索框用了蓝色渐变边框
• 表格表头用了深色背景加白色文字
• 表格行有斑马纹
• 分页按钮用了圆角胶囊样式，颜色是紫色
• 整个页面用了三种不同的阴影
• 间距忽大忽小，没有规律

有DESIGN.md时，AI的输出：

• 搜索框用了标准边框，聚焦时显示主色边框
• 表头用了浅灰背景加次要文字色
• 表格行没有斑马纹，只有底部1px分割线
• 分页按钮用了中圆角，主色用于当前页
• 阴影只用在卡片容器上，层级统一
• 间距严格遵循8的倍数

差异非常明显。有规范时，AI的输出直接可用；没有规范时，需要大量手动调整。

更重要的是，有规范时，AI的“决策速度”更快。因为它不需要在“用渐变还是不用”“用圆角还是直角”这些问题上纠结，直接按照规范执行就行。这反映在生成速度上，有规范时反而更快。

4. 从“能用”到“好用”：DESIGN.md的进阶调优与踩坑记录

4.1 规范太细会死板，太粗会失控：找到那个平衡点

这是我踩过的第一个坑。

一开始我把规范写得非常细，细到每个组件的每个状态都定义了具体参数。结果AI生成的东西确实“规范”，但完全没有灵活性。比如我定义了“按钮圆角8px”，AI就把所有按钮都设成8px，包括那个本该用全圆角的胶囊按钮。

后来我调整了策略：规范只定义“边界”，不定义“具体值”。

比如，我不写“按钮圆角8px”，而是写“按钮圆角使用中圆角（8px），胶囊按钮使用全圆角（999px）”。这样AI就知道在不同场景下该用哪个值。

再比如，我不写“卡片间距16px”，而是写“卡片之间间距使用16或24，根据卡片内容密度决定”。这样AI就有了一定的判断空间。

核心原则是：规范定义“什么不能做”和“什么场景用什么值”，但不定义“每个具体元素用什么值”。给AI留出在框架内做选择的空间。

4.2 当AI“忘记”规范时怎么办：三个补救技巧

即使有了DESIGN.md，AI有时也会“忘记”规范，尤其是在长对话中。这是正常的，因为上下文窗口有限，AI的注意力会衰减。

我的补救技巧有三个：

技巧一：在提示词里重申关键约束。比如：“请生成一个表格页面，注意遵循DESIGN.md中的颜色系统和间距系统，特别是不要使用渐变和斑马纹。”这样能把AI的注意力拉回到关键约束上。

技巧二：分步生成，而不是一次性生成。不要一次性让AI生成整个页面，而是分步来：先生成布局框架，再生成表格组件，再生成分页组件。每一步都重申规范。这样AI在每个步骤都能保持对规范的关注。

技巧三：生成后自查。让AI自己检查生成结果是否符合规范。比如：“请检查你刚才生成的代码，是否使用了渐变？是否使用了超过3种字号？间距是否都是8的倍数？”AI的自查能力其实不错，很多时候它能自己发现并修正问题。

4.3 规范文件的版本管理：别让DESIGN.md变成一潭死水

DESIGN.md不是写完就完了。随着项目迭代，规范也需要更新。

我的做法是：把DESIGN.md纳入Git版本管理，和代码一起提交。每次设计规范有调整，就提交一次，写清楚改了什么、为什么改。

这样做的好处是：

• 可以追溯规范的演变历史
• 可以回滚到之前的版本
• 团队成员可以看到规范的变化

另外，我建议在DESIGN.md的开头加一个“变更记录”部分，记录每次修改的内容和原因。这样AI在读取规范时，也能看到规范的变化历史，有助于它理解规范的意图。

4.4 一个真实项目的完整复盘：从AI味到设计感

最后分享一个我最近做的项目复盘。

项目是一个后台管理系统，有十几个页面。一开始我让AI直接生成，结果每个页面风格都不一样——有的页面圆角大，有的页面圆角小；有的页面用蓝色主色，有的页面用紫色；有的页面间距紧凑，有的页面间距松散。整个系统像拼凑出来的。

后来我花了两个小时写了一份DESIGN.md，然后让AI重新生成所有页面。这次的结果好很多，但仍有问题：AI在某些页面“忘记”了规范，比如在弹窗里用了渐变，在表格里用了斑马纹。

我又花了半个小时做调优：在CLAUDE.md里加了更明确的禁止事项，在提示词里重申了关键约束，让AI自查了一遍。最终的结果是：所有页面风格统一，间距一致，颜色控制在规范范围内，阴影层级清晰。

整个过程下来，我的体会是：

第一，DESIGN.md不是银弹，但它是目前最有效的“AI设计约束工具”。它不能保证AI生成完美的UI，但能保证AI不生成“AI味”的UI。

第二，规范的质量比数量重要。一份20行的精准规范，比一份200行的模糊规范更有效。

第三，调优是必须的。不要指望一次生成就完美，预留出调优的时间。

第四，规范要随着项目迭代。项目在变，规范也要变。把规范当成代码一样管理，才能持续发挥作用。

如果你也在用AI做UI，我强烈建议你试试DESIGN.md这个思路。它不会让你立刻变成设计大师，但它能让AI生成的东西从“一眼AI”变成“看起来像人做的”。这中间的差距，就是品味。