企业官网建设流程全解析

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

先说一个我自己的观察。过去大半年，我陆续用各种AI编程工具做过十几个中小型前端项目，从后台管理面板到营销落地页都有。每次把AI生成的界面截图发到群里，几乎总有人第一时间说“这看着就是AI做的”。一开始我以为是自己提示词写得不够细，后来发现即使把需求描述得非常具体，出来的东西依然带着那股说不清道不明的“AI味”。

这股味道到底是什么？我总结下来，它不是一个单一问题，而是几个层面的叠加。

第一层是视觉层面的“过度安全”。AI生成UI时，默认会选最不容易出错的方案：圆角卡片、浅灰背景、蓝色主色调、居中大标题、均匀分布的间距。这些选择单独看都没问题，但组合在一起就变成了“谁都能做出来的样子”。它不会犯错，但也不会让人记住。

第二层是结构层面的“均匀用力”。人类设计师做界面时会有明确的视觉层级——哪里是重点、哪里该弱化、哪里留白制造呼吸感。AI倾向于把每个元素都处理得差不多重要，导致整个页面没有焦点，眼睛不知道该往哪看。

第三层是交互层面的“缺少意图”。按钮的hover状态、输入框的focus效果、加载时的过渡动画，AI往往给的是通用方案，而不是针对这个具体场景设计的反馈。用户操作时感觉不到“这个界面是专门为我这个场景做的”。

这三个层面叠加起来，就是所谓的“AI味”。它本质上不是技术问题，而是决策密度的问题。人类设计师在每个像素上都做了有意识的取舍，而AI在做“最安全的平均选择”。

那Google提出的“品味优先”思路，到底能不能解决这个问题？我花了两周时间，用Claude Code配合一套自己整理的DESIGN.md规范，做了几轮对比实验。下面把我踩过的坑、验证有效的做法、以及那些看起来有用实际上没用的方案，全部摊开来讲。

2. 拆解“AI味”的三个具体来源与对应破解思路

2.1 默认设计系统的“均值回归”现象

AI模型在训练时见过海量的UI截图和代码，它学到的是一个“统计意义上的平均界面”。当你让它生成一个登录页，它会输出所有登录页的“最大公约数”：左边放插画、右边放表单，或者居中一个卡片。这个平均界面在统计上是最常见的，但在设计上是最平庸的。

我做过一个测试：让AI分别生成“一个面向独立开发者的SaaS登录页”和“一个面向企业IT管理员的内部工具登录页”。如果不加额外约束，两个输出几乎一模一样。这说明AI没有真正理解“面向谁”这个约束，它只是在做模式匹配。

破解这个问题的关键不是写更长的提示词，而是给AI一套明确的、有倾向性的设计决策规则。这就是DESIGN.md存在的意义——它不是描述“要做什么”，而是规定“在这个项目里，我们优先选择什么、放弃什么”。

2.2 间距与节奏的“均匀化陷阱”

人类设计师做间距时会有节奏感：相关元素靠近、不相关元素拉开、重要区域留白更多。AI倾向于使用统一的间距值，比如所有元素之间都是16px或24px。这导致页面看起来“平”，没有层次。

我在实际项目里试过一个方法：在DESIGN.md里明确规定三档间距——紧凑档（4-8px）用于图标与文字、常规档（16-24px）用于卡片内元素、宽松档（48-64px）用于区块之间。并且明确要求“禁止在区块之间使用小于32px的间距”。这个约束加上去之后，AI生成的页面立刻有了呼吸感。

2.3 颜色使用的“安全区依赖”

AI选颜色时极度保守。主色永远在蓝色系里打转，强调色永远用橙色或绿色，背景永远是白色或浅灰。这不是因为它不知道其他颜色，而是因为它在避免“可能不好看”的选择。

我的做法是在DESIGN.md里直接指定一套有性格的色板，并且说明使用场景。比如主色用一个偏暗的墨绿，强调色用一个暖橙，中性色用带一点暖调的灰。关键是给出具体色值和使用规则，而不是让AI自己去“发挥”。

下面这张表是我在几个项目里总结的“AI味来源与破解手段”对照：

这张表里的每一行，都是我在实际项目中验证过的。关键不在于规则本身多复杂，而在于规则必须具体到AI可以直接执行，而不是给它一个模糊的方向让它猜。

3. DESIGN.md到底该写什么：一份可复用的规范框架

3.1 为什么普通提示词不够用

很多人用AI做UI时，习惯在对话里写一长串要求：“帮我做一个现代化的、简洁的、专业的后台管理界面，要有侧边栏、顶部导航、数据卡片和表格”。这种提示词的问题在于，它描述的是“结果长什么样”，而不是“决策规则是什么”。

AI收到这种提示词后，会从训练数据里找一个最接近的模板套上去。每次生成的结果可能不同，但都落在同一个“平均区间”里。你没法控制它具体选什么圆角、什么阴影、什么间距。

DESIGN.md的思路完全不同。它是一份项目级的设计决策记录，放在项目根目录下，AI每次生成UI代码时都会读取它。它不描述具体页面，而是规定这个项目里所有页面都要遵守的底层规则。

3.2 一份最小可用的DESIGN.md结构

我经过多次迭代，目前稳定使用的是一个六段式结构。每段都必须是AI可以直接执行的规则，而不是描述性文字。

第一段：设计原则。用三到五条短句说明这个项目的设计倾向。比如“信息密度优先于留白”“功能可见性优先于极简”“一致性优先于惊喜感”。这些原则会在AI面临取舍时起作用。

第二段：色彩系统。给出具体色值和用途。主色、辅助色、强调色、成功/警告/错误色、中性色阶梯（至少五档）。每档都要说明用在什么场景。

第三段：字体与排版。指定字体族、字号阶梯、字重规则、行高规则。关键是给出明确的层级关系，比如“页面标题是正文的2.5倍，区块标题是正文的1.5倍”。

第四段：间距与布局。定义间距阶梯和布局规则。包括页面边距、区块间距、卡片内间距、元素间间距。还要说明栅格系统怎么用。

第五段：组件规范。对按钮、输入框、卡片、表格、导航等核心组件给出具体的样式规则。包括圆角、阴影、边框、内间距、状态变化。

第六段：禁止事项。明确列出这个项目里不允许出现的做法。比如“禁止使用纯黑色文字”“禁止使用大于8px的圆角”“禁止在卡片上使用彩色背景”。

提示：DESIGN.md不需要一次写完美。我的做法是先写一个基础版本，然后每次发现AI生成的结果有“AI味”时，就追问自己“它做了什么默认选择”，然后把对应的禁止规则加进去。迭代三四轮之后，规范就基本稳定了。

3.3 用Claude Code落地DESIGN.md的实操流程

Claude Code是我目前用得最顺手的AI编程工具之一，它对项目文件的读取和理解能力比较强。下面是我实际使用的流程。

第一步，在项目根目录创建DESIGN.md文件，按照上面的六段式结构填入内容。如果是新项目，可以先从一份模板开始改。

第二步，在Claude Code的对话里明确引用这个文件。我通常会说：“请先读取项目根目录的DESIGN.md，然后按照其中的规范生成XXX页面的代码。”这句话很关键，它让AI把DESIGN.md作为约束条件，而不是参考建议。

第三步，生成第一版代码后，不要急着改。先截图看整体效果，对照DESIGN.md检查哪些规则被遵守了、哪些被忽略了。通常第一轮会有30%左右的规则没有被严格执行。

第四步，针对被忽略的规则，在对话里明确指出。比如“DESIGN.md里规定区块间距不得小于48px，但你生成的代码里用了24px，请修正”。这种具体的反馈比笼统地说“再好看一点”有效得多。

第五步，把修正后的结果和对应的反馈记录下来，更新到DESIGN.md的禁止事项里。这样下一轮生成时，AI犯同样错误的概率会大幅降低。

我实测下来，经过三轮迭代，AI生成的UI代码对DESIGN.md的遵守率能从60%左右提升到90%以上。剩下的10%通常是一些需要人工判断的细节，比如某个具体场景下间距该用紧凑档还是常规档。

4. 从“能看”到“有品味”：三个关键决策点的处理

4.1 视觉层级的建立：让眼睛知道先看哪里

AI生成的界面最常见的问题就是“没有重点”。所有元素大小差不多、颜色差不多、间距差不多，用户打开页面后眼睛是散的。

解决这个问题的核心是建立明确的三级层级。我在DESIGN.md里会这样写：

• 一级信息：页面主标题或核心数据，字号32-40px，字重700，颜色用最深的中性色。
• 二级信息：区块标题或关键指标，字号20-24px，字重600，颜色用次深的中性色。
• 三级信息：正文和辅助说明，字号14-16px，字重400，颜色用中等中性色。

关键是三级之间的差距要足够大。很多AI生成的界面里，一级和二级只差4px，用户根本感觉不到层级。我的经验是，相邻两级之间的字号比至少要达到1.4倍，字重差至少要达到200。

另外，颜色也是建立层级的手段。一级信息用最深色，二级用中深色，三级用中灰色，辅助信息用浅灰色。这样即使字号相同，用户也能通过颜色判断重要性。

4.2 间距节奏的控制：让页面有呼吸感

间距是AI最容易忽略的设计维度。它会把所有间距设成同一个值，导致页面要么太挤、要么太散。

我的做法是在DESIGN.md里定义一套间距阶梯，并且规定每个阶梯的使用场景：

关键规则是：禁止在区块之间使用小于48px的间距。这一条加上去之后，AI生成的页面立刻从“挤在一起”变成了“有分区感”。

还有一个技巧是不对称间距。人类设计师经常会在标题上方留更多空间、下方留少一些，制造视觉上的“归属感”。我通常会在DESIGN.md里写：“区块标题上方间距是下方的1.5倍”。这个规则简单，但效果很明显。

4.3 交互反馈的场景化：让界面“活”起来

AI生成的交互效果通常是通用的：按钮hover变个色、输入框focus加个边框。这些没错，但缺少场景感。

我的做法是在DESIGN.md里针对不同场景定义不同的交互规则。比如：

• 主要操作按钮：hover时背景变暗10%，按下时变暗15%，过渡时间150ms。
• 次要操作按钮：hover时背景从透明变为浅灰，边框颜色加深。
• 危险操作按钮：hover时背景变为浅红，文字颜色变为深红。
• 输入框focus：边框颜色变为主色，同时加一个2px的外发光。
• 卡片hover：阴影加深一级，向上位移2px。

这些规则本身不复杂，但关键是每个场景都有明确的反馈，而不是所有元素用同一套通用效果。用户操作时能感觉到“这个界面是经过设计的”。

还有一个容易被忽略的点是加载状态。AI生成的代码通常没有加载态，或者只有一个转圈。我的做法是在DESIGN.md里规定：“所有异步操作必须有骨架屏或进度指示，禁止使用空白等待”。骨架屏的样式也要规定：用中性色浅灰，圆角与卡片一致，动画用脉冲效果。

5. 实测对比：同一需求下“有规范”与“无规范”的差距

5.1 实验设置与评估维度

为了验证DESIGN.md的实际效果，我做了一组对照实验。需求是“生成一个数据分析后台的首页，包含顶部导航、侧边栏、四个数据卡片、一个折线图区域和一个数据表格”。

A组：只用自然语言描述需求，不提供DESIGN.md。 B组：提供完整的DESIGN.md，并在对话中明确要求遵守。

评估维度有五个：视觉层级清晰度、间距节奏感、颜色协调性、交互反馈完整度、整体“AI味”程度。每个维度满分10分，由我和另外两位有前端经验的朋友独立打分后取平均。

5.2 五轮生成的结果对比

从数据上看，B组在每个维度上都有明显优势。尤其是“整体AI味程度”这一项，从7.8降到了3.2，说明DESIGN.md确实能有效削弱那种“一眼AI”的感觉。

但我也要诚实地说，B组的结果也不是完美的。在五轮生成中，有两轮出现了AI忽略部分规则的情况，比如把区块间距设成了32px而不是规定的48px。这说明DESIGN.md不是万能的，仍然需要人工检查和反馈。

5.3 那些“看起来有用但实际没用”的做法

在实验过程中，我也试了一些网上流传的方法，发现效果有限。

做法一：在提示词里加“请生成高质量的UI”。完全没用。AI对“高质量”的理解和人类不一样，它只会从训练数据里找“看起来复杂”的模板。

做法二：提供参考截图让AI模仿。效果不稳定。AI能识别截图里的大致布局，但无法准确提取间距、字号、颜色值这些具体参数。而且不同轮次生成的结果差异很大。

做法三：用很长的提示词描述每个细节。有一定效果，但维护成本太高。每次生成新页面都要重新写一遍，而且提示词之间容易冲突。

做法四：生成后手动调整CSS。这是最可靠的方法，但也是最费时间的。如果每个项目都要手动调，那用AI的意义就大打折扣了。

相比之下，DESIGN.md的优势在于一次编写、多次复用。写一份规范的投入大概在1-2小时，之后每个页面都能受益。对于需要持续产出UI的项目来说，这个投入产出比是很划算的。

6. 把规范变成习惯：我的日常操作清单

6.1 新项目启动时的三件事

每次开新项目，我会按顺序做三件事。

第一件，花20分钟写一份基础版DESIGN.md。不需要很完整，但色彩系统、字体阶梯、间距规则这三块必须有。这三块是影响“AI味”最大的因素。

第二件，在Claude Code里做一次“规范校准”。随便生成一个简单页面，检查AI对DESIGN.md的遵守情况。通常会发现两三个被忽略的规则，当场修正并更新到禁止事项里。

第三件，把DESIGN.md加入项目的版本控制。每次修改都记录原因，比如“因为AI总是把卡片圆角设成12px，所以明确规定圆角统一为6px”。这些记录本身就是项目的设计决策日志。

6.2 日常生成时的检查要点

每次让AI生成新页面后，我会快速过一遍这几个检查点：

• 页面是否有明确的视觉焦点？第一眼看到的是什么？
• 区块之间的间距是否明显大于区块内部的间距？
• 颜色是否控制在三到四种以内？有没有出现意外的颜色？
• 按钮、输入框、卡片的状态变化是否都有定义？
• 加载态、空状态、错误态是否都有处理？

这五个问题里，只要有一个答案是“否”，就说明需要调整。通常调整的方式不是直接改代码，而是回到DESIGN.md里补充对应的规则，然后让AI重新生成。

6.3 规范迭代的节奏

DESIGN.md不是写完就不动的。我的习惯是每完成一个页面，就花五分钟回顾一下：这次生成过程中，AI在哪些地方做了“默认选择”？这些默认选择里，哪些是我不能接受的？把不能接受的写成禁止规则，加到DESIGN.md里。

这样迭代下来，通常到第三个页面时，DESIGN.md就已经比较完善了。到第五个页面时，AI生成的代码基本不需要大改，只需要微调一些具体数值。

注意：不要试图一次性写出完美的DESIGN.md。规范是在实践中长出来的，不是坐在那里想出来的。先写一个粗糙版本，然后在使用中不断补充，这才是正确的节奏。

7. 一些关于工具选择的个人看法

Claude Code在读取项目文件和遵守规范方面确实做得不错，但它不是唯一的选择。我也试过用其他AI编程工具配合DESIGN.md，效果有差异但思路是通用的。

关键不在于用哪个工具，而在于你是否把设计决策从“每次对话”转移到了“项目文件”。只要DESIGN.md存在并且被AI读取，无论用什么工具，生成结果都会比没有规范时好很多。

另外，DESIGN.md的格式不一定要用Markdown。我试过用JSON和YAML，AI也能理解。但Markdown的可读性最好，方便自己随时翻阅和修改。而且Markdown的层级结构天然适合表达“规则-子规则”的关系。

最后说一个我自己的体会：AI做UI的“AI味”，本质上是因为它没有“偏好”。它不会因为觉得某个间距“看起来不舒服”而调整，也不会因为某个颜色“感觉不对”而换掉。DESIGN.md的作用，就是把你作为设计师的偏好，用AI能理解的方式写下来，让它在你划定的范围内做选择。范围越清晰，它的选择就越接近你想要的结果。

这个过程需要一些耐心，前两轮迭代可能会觉得麻烦。但一旦规范稳定下来，后面每个页面的生成效率和质量都会有明显提升。我现在做新页面时，基本只需要写清楚页面结构和功能需求，视觉层面的东西交给DESIGN.md约束下的AI来生成，出来的结果直接可用，不需要大改。