企业官网建设流程全解析

前两周，我把一组AI生成的设计稿拿到组里过审，设计师同事扫了一眼就笑了："这不就是AI味吗？"我也跟着笑，但笑完突然卡壳——什么叫AI味？为什么我们所有人一看就能认出来，却没人系统讲清楚它是什么、从哪来、怎么去掉？

这半年我至少让AI跑了五十多轮UI方案，从后台管理面板到移动端设置页全覆盖。结果有个规律非常稳定：你要让它"随便发挥"，它给你一版五彩斑斓的玻璃质感堆料；你要让它"符合现代审美"，它给你一本规矩但毫无灵魂的蓝色样板间。Generative UI这条路，真正缺的不是生成能力，而是品味过滤层。而这恰恰是Google最近高密度对外释放的一个信号：把品味做成约束，让AI在约束里工作，而不是从零开始猜。

这篇就围绕一个核心问题展开：AI做UI那股挥之不去的AI味，到底是技术瓶颈，还是方法论缺失？Google提出的"品味优先"思路能不能真正解掉这个问题。我会结合自己在真实项目里的踩坑记录，把识别AI味的方法、生成机制的底层原因，以及一套可以复现的"去AI味"流程完整拆开说清楚。

1. 先说实话：我第一眼是怎么识别"AI味"的

1.1 配色和间距的"整齐强迫症"

AI生成UI最典型的脸谱，是那种"每张卡片同样大小、每个圆角同样弧度、每块间距同样宽度"的整齐感。正常人的设计不会长这样：关键卡片就是比次要卡片大一截，主操作按钮就是比普通按钮多几个像素的呼吸空间。但AI不懂这个，因为它在训练阶段接触的大量界面截图，都来自模板站、免费主题、原型工具导出的演示稿，这些素材本身就自带"平均脸"属性。

我自己测过的一个例子很典型。让某个热门模型生成"在线教育课程列表页"，它给出的结果几乎在任何一次重复测试里都是同一套打法：所有课程卡片统一宽度、全部等间距排列；每张卡片配一个高饱和渐变封面；整个页面找不出一个可以被优先关注的信息焦点；所有圆角、阴影都像同一个键盘敲出来的。这不能叫丑，但也不能叫设计——它把UI页面排成了Excel表格，信息全被抹平了。

人类设计师在做同类页面时，通常会用大小对比、颜色权重、留白节奏去建立视觉叙事，比如"本周热销"这个区块就是要比"全部课程"多占一行、多一个主色标签。可AI的默认偏好恰恰是"一视同仁"。这个细节，就是AI味最底层的来源。

1.2 信息层级像被"平均化"了

第二个高频特征是层级混乱。AI生成的页面里，标题不是大一点，而是大到让人不安；次要内容该弱化的时候，它偏偏给了一个很重的底色块，最后整个页面看上去像同时存在五个主标题、八个主按钮。

我之前拿一个"用户个人中心页"试过，AI出的第一版光是"我的订单""收货地址""优惠券""客服""设置"就全部配上独立图标、独立卡片、独立底色，视觉权重完全一样。这种设计放在真实产品里，用户根本不知道下一步该点什么。

问题根源不在审美，而在生成逻辑。AI在决定"这里放什么、用什么样式"时，参考的是海量截图里的统计分布：标题比正文字号大，按钮要有背景色，卡片需要圆角和阴影。它能抓到这些"共性"，却抓不到"数量关系"——页面上只能有一个主角，其他元素都得为它让路。这种层级控制力，是现在的AI最缺乏的能力之一。

1.3 交互和状态被AI当作不存在

第三层AI味，藏在静态图之外。我常在评审时问一句："保存按钮按下去之后是什么样子？空数据时这页长什么样？加载中呢？断网呢？"每次把这些问题丢给AI生成的稿子，它基本都是失效的——它给的是"一个瞬间的长相"，而不是"一个界面的完整生命状态"。

这其实也是前端和UI设计经常被混为一谈、但实际差别极大的地方。UI不只是画几张漂亮的图，它必须覆盖正常态、悬停态、禁用态、加载态、空数据态、错误态，还要考虑响应式布局在窄屏和宽屏下各自该长什么样。这些状态在训练数据里天然稀缺，因为几乎没有团队会公开晒出自己产品的空状态和错误页来给模型喂料。

这张表基本上把我说的"AI味"从视觉层面和工程层面都摊开了。下面要聊的是，这种味道到底是哪来的。

2. AI为什么"没品味"，这锅到底该谁背

2.1 AI的审美来自统计平均，不是价值判断

先把底层机制说透。无论是扩散模型还是大语言模型，AI都不存在"我觉得这个好看"的价值判断能力。它的所有输出，本质上都是对训练数据分布的一次高维拟合。

扩散模型生成UI图时从一个噪声状态出发，逐步去噪，不断逼近训练集里"网页截图"的统计特征。它不知道"这里放一个按钮是为了引导用户注册"，它只知道"大量截图里这个地方长这样"。所以AI产出的所谓UI，不是在创造，而是在复习——把几亿张截图里最频繁出现的像素组合重新拼出来。而这个"最频繁的组合"，恰恰是海量平庸模板的公共交集，不是任何一位优秀设计师的审美主张。

大语言模型直接生成HTML/CSS时也一样。它会从语料里推断"网页模板应该有的结构"，于是sidebar在左、navbar在顶、圆角卡片铺满屏幕就成了默认答案。不是因为这么做最好，而是因为网上90%的代码教程都这么写。

2.2 AI没有"取舍"能力，只会堆特征

设计本质上是一个信息过滤系统：你要让用户第一眼看到什么、第二眼看到什么、完成操作后得到什么反馈，每一步都在做取舍。但AI没有一个"取舍"的决策函数，它只有"堆特征"的本能。

最典型的表现是，当你对AI说"做一个好看的页面"时，它会把所有它学到的"好看特征"全部搬进同一个页面：玻璃拟态卡片、渐变色背景、弥散阴影、超大圆角、加粗到夸张的标题。单独看每个元素好像都挺时髦，合在一起就是一堆设计元素在打架。

这不是AI笨，而是指令出了问题。人类设计师听到"好看"时，会自动启动内部的经验库去判断"这个项目适合哪种好看"；AI没有这个内部经验库，它只能把训练数据里"好看"标签下出现频率最高的视觉元素全都用上。所以我在实际操作中几乎从不说"好看"，只说"具体规则"。

2.3 缺的不是模型，是约束器

还有一个工业层面的原因，这个角度普通用户很少注意到：任何成熟的前端团队，都不会裸写CSS来搭界面，而是基于一套组件库工作。Ant Design、Element UI、Material Design这些组件库，价值不只是样式统一，更重要的是它们把"品味"沉淀成了默认值——间距用4的倍数、圆角用一个shape scale、颜色全部来自语义色板、按钮层级有明确的主次之分。

AI生成界面恰恰缺这层约束。它从一张完全空白的画布开始，而人类优秀的设计工作从来都是在约束中进行的。这个差异在结果上体现得极其明显：凡是明确给AI接入了设计系统上下文的团队，产出页面的"AI味"会大幅下降；凡是让AI自由发挥的团队，成品质量和抽卡差不多。

所以我说，AI做UI的问题不是模型不够强，而是缺少一个像Material Design那样能把"品味"固化成规则的约束器。

2.4 训练数据才是原罪

聊到这里必须承认一个让人不太舒服的事实：现在公开互联网上能用来训练的UI素材，真正达到"高级审美"水平的可能不到5%。剩下的是模板站的套壳页面、免费主题的演示页、六年前的旧版后台、甚至是PPT级别的改版教程截图。AI把这些素材的"共性"全部学走，而且学得越彻底，生成的界面就越像"平均值"。

这也能解释为什么AI生成的UI总有一种"廉价感"。你看一个页面，潜意识里知道它缺少一种东西，但说不上来；等你想明白了，会发现它缺的是那些"只有优秀产品里才大量存在的细节"：克制的主色使用、精确到像素的边距呼应、层次分明的无彩色背景。而这些东西在公开数据里太稀少了，AI自然学不到。

3. Google"品味优先"在解什么题

3.1 把"品味"从形容词变成约束

Google这一轮对外释放的信号，核心就是把"品味"从一个主观形容词，变成一个工程约束。这是我最近反复琢磨后最认同的一点。

具体拆开看，它做的事情很系统：设计token定义颜色、字体、间距、圆角和阴影，让AI只需要引用primary、surface、spacing-4，而不用纠结色号；组件规范明确按钮、输入框、对话框、导航栏的各类状态和结构；布局网格给出断点和间距体系，让AI按网格填充内容而不是自由发挥；评估基准用真实可用性数据来检验AI生成页面的质量，而不是让一个"看起来是否惊艳"的主观判断来做主。

这套打法背后是一个立场转换，我还是想强调一下：它不再追求"生成结果的偶然惊艳"，而是追求"生成过程的全程可控"。你控制的变量越多，AI发挥出奇葩结果的空间就越小。

3.2 设计系统就是"品味缓存"

我们可以把设计系统理解成一个团队乃至一个行业审美共识的缓存。Google多年沉淀下来并不断更新迭代的Material Design规范，被打包成可复用的组件、token和模式库，本质上就是把"我们觉得这样好看而且好用"的判断固化成了代码。

AI只要接上这层缓存，生成出来的东西就会天然带上Google这些年的排列经验。这也是为什么我认为Google这条路走得通：它不让AI去发明审美，而是让AI在一套已经被验证过的审美体系里做组合与微调。你在Chrome里体会到的很多"简洁舒适"，背后站着的其实就是Material Design的某一条规则，现在这些规则被一股脑交给了AI。

3.3 Google比"好看"更看重"可评估的设计"

Google还有一个让我印象深刻的特点：极度重视用数据验证设计决策。别人做UI靠灵感，Google做UI靠证据。这个思路放到AI生成UI的场景里，就成了一个闭环：生成一批页面，投入真实用户环境测试，用任务完成率、操作时长、出错率等指标反推某个设计模式的好坏，再反向调整生成策略。

这件事的意义在于，它把"品味"从主观偏好变成了可迭代的工程指标。AI生成的页面好不好，不再取决于"我觉得高级"，而是取决于监控面板上的数字是否说这个布局、这套配色更利于用户快速完成任务。对成本敏感的团队来说，这个校准方式远比"换一组风格再试一次"靠谱得多。

3.4 对普通团队的三点启发

如果你不做Google系产品，这套思路依然可以直接抄作业。我的理解浓缩成三条：第一，别问AI"这个页面好看吗"，要问"这个页面符合我们定义的设计规范吗"；第二，感觉不对的时候别只改prompt里的形容词，先检查自己有没有给AI一个完整的"设计系统上下文"；第三，与其写一段几百字的文字描述，不如丢给AI一份设计token清单、一张品牌规范截图，哪怕只给它一个组件库的名字，效果都会完全不一样。

说白了，品味优先不是让AI变得更懂审美，而是让AI工作的环境变得更接近优秀设计师的工作环境。

4. 照着Google的思路，把AI生成的UI救回来

4.1 第一步：先定设计token，再让AI动手

我现在基本把AI当成一个"刚入职、能力很强但毫无经验"的初级设计师。你给它的规范越具体，它产出的东西越能用。而这套规范，最终都可以收敛成一组token。

最直接的做法，就是把token写进prompt。下面这套是我自己在实际项目里用过的，可以直接复制替换品牌色：

:root { /* 颜色语义 */ --color-primary: #2563EB; --color-primary-hover: #1D4ED8; --color-surface: #FFFFFF; --color-surface-muted: #F8FAFC; --color-border: #E2E8F0; --color-text-primary: #0F172A; --color-text-secondary: #475569; --color-danger: #DC2626; /* 间距系统：4pt 基准 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* 圆角系统 */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* 字体 */ --font-body: 14px; --font-body-lg: 16px; --font-h6: 18px; --font-h5: 20px; --font-h4: 24px; }

附上这段代码的同时，我在prompt里还会补一句硬性要求："所有间距必须是4px的倍数，主按钮只能有一个，次按钮用outline样式，背景不要渐变，圆角范围控制在6到14px之间。"

这样做的原理很直接：AI对数值约束的反应，和对模糊形容词的反应完全不一样。你说"大一点"，它会失控；你说"主按钮宽度160px、圆角10px、背景色--color-primary"，它就很难跑偏。

4.2 第二步：用8px网格强制重排

AI生成的第一版稿，间距经常是"凭感觉"来的。你不强制它，它就给你输出一堆30px、27px、45px这种毫无关系的数字。真正成熟的设计，间距一定是有数学节奏的。

推荐的做法是8px网格：间距取8、16、24、32、40、48，移动端细分到4px。拿到AI初稿后，我一般按四个地方逐一检查：页面左右边距是否统一；卡片间距是否落在8的倍数上；区块间的垂直间距是否大于区块内部的间距；两个相邻控件之间的距离会不会比控件自身的内边距还大。这四个点检查完，90%的间距问题都能暴露。

如果AI版本不合格，就让模型基于"8px间距系统重排布局结构，组件内边距12或16px，区块间距24或32px"再来一版。实测下来，模型一旦拿到明确数字，排版质量会立刻上一个台阶，那种"每个空隙都一模一样大"的塑料感会明显缓解。

4.3 第三步：砍掉渐变色和玻璃拟态

如果只能给AI提两条视觉禁令，我会先砍渐变背景，再砍玻璃拟态卡片。这两个元素不是不好，而是AI用得太勤、太无意义。一个页面里到处是渐变和玻璃膜，用户盯不了两分钟眼睛就累了。

我在实际项目里的处理是直接下禁令："不要渐变，不要玻璃拟态，不要弥散阴影，全部使用扁平色块和基础卡片；主色只出现在主按钮、选中态、链接和图标强调上；页面90%的面积保持中性色。"

改完之后，页面通常从"短视频特效模板"回归到"正经工具产品"。它可能没那么惊艳，但更耐看，也更符合UI的本质定位——UI是让人用的，不是让人看的。很多人觉得AI做的UI"花哨但不好用"，根子就在这里。

4.4 第四步：统一形状、图标和字体细节

AI生成的UI还有一个非常典型的毛病，叫"系统混搭"：同一个页面里，有的按钮圆角8px，有的按钮圆角20px；图标一会儿线性、一会儿面性；字体一会儿中文系统字体，一会儿冒出来一堆没有来源的英文衬线。这些细节单独看问题不大，混在一起就是廉价感的来源。

我的处理办法是生成之前就把图形规则全部塞进去：所有卡片圆角统一为16px，按钮圆角统一为8到10px；图标统一使用线性风格、线宽1.5px，只有选中和强调状态才允许切换填充样式；字体只允许两种，系统默认字体加一个品牌字体；阴影统一为一种卡片阴影，参数可以直接给"0 1px 3px rgba(0,0,0,0.08)"。

这些规则看起来琐碎，但它们的本质，就是把设计系统里的shape、iconography、typography约束搬进prompt。做完这一步，AI的输出会突然有了"同一个设计语言"的感觉，而不是东拼西凑的素材展。

4.5 第五步：把静态稿当"初稿"，手动补状态

最后一步也是我和设计师同事聊下来公认最关键的：AI生成的稿子，只当信息架构方案用，绝不当成品。

具体的操作流程是：拿到AI出的静态布局之后，把它传给前端或者设计师，按这个布局手动补充loading状态、空数据状态、错误状态、键盘弹出后的窄屏状态，以及数据量最大和最小两种情况下的视觉表现。这一步目前没有办法跳过，也没有办法完全交给AI，它是固定的人机协作环节。

这个认知对团队预期管理非常重要。很多对AI失望的人，问题出在把AI放在了错误的角色上。AI是个效率很高的草稿师，但还不是一个可靠的成品设计师。把分工理清楚，AI的价值才能发挥出来。

5. 实测下来，这几个坑值得反复避让

5.1 避坑速查表

下面这张表，是我跑了五十多轮AI生成UI之后一点点攒出来的。每个条目都实际踩过，修正办法也是验证过有效的。

我把这张表贴在工位旁边，每次过审AI生成稿之前先对着表扫一遍，能省掉不少无意义的来回沟通。

5.2 一套"品味优先"的AI UI提示词模板

直接给模板，这是我用了半年多、稳定性和出活质量都经过验证的版本：

你是一名资深UI设计师，请在生成界面时严格遵循以下设计规范： 1. 布局：采用12列栅格系统，页面左右边距16px，区块间距32px， 卡片间距16px，卡片内边距24px。 2. 颜色：只使用这套语义色：#2563EB为主色，#FFFFFF为表面色， #F1F5F9为次级表面，#0F172A为主文本，#64748B为次要文本， #DC2626为错误色。禁止使用用户未提供的其他颜色，禁止渐变背景。 3. 字体：中英文都用系统默认无衬线字体，禁止衬线字体。 标题字号20px/字重600，正文字号14px/字重400。 4. 圆角：卡片16px，按钮10px，输入框8px，标签6px， 禁止在这个范围之外的其他圆角值。 5. 图标：统一线性风格，线宽1.5px，只在选中、强调状态用填充风格。 6. 层级：每个页面只允许一个主操作按钮，主操作按钮用主色+白字； 次要按钮使用边框+图标样式。 7. 交互状态：请额外产出空数据、加载中、错误、禁用、悬停五种状态。 8. 禁止出现：玻璃拟态、弥散阴影、超大光环、无意义渐变、公仔化插画。

这个模板的核心逻辑，就是给AI当设计师之前，先给它一套完整的设计系统，再剥夺它的自由发挥空间。我试过很多次，是不是给了这套约束，生成的成品质量差距非常大——同一个模型，没有约束时像各种风格的碎片拼接，有了约束之后，基本稳定在"能看、能用、能继续改"的级别。

5.3 两个亲测好用的进阶技巧

第一个技巧叫"局部生成+手动拼装"。不要一次让AI生成完整页面，而是把页面拆成导航栏、侧边栏、主内容区、表单区、数据表格区，分别让AI出五版以上的子模块，然后自己挑选符合设计规范的模块拼起来。这个做法看起来慢，实际效率反而高，因为每个局部经过单独约束后，整体一致性的把控会容易很多，返工概率大幅下降。

第二个技巧叫"反向修订"。AI生成完初稿后，别急着让它改，先问它三个问题：这个页面里最需要用户关注的信息是什么？这几个区块的优先级为什么是完全相同的？有哪些元素可以删掉而不影响功能？实测下来，模型通常会在回答完问题之后主动推一版更克制的设计。我怀疑这是因为提问触发了它的推理链路，迫使它从"画图模式"暂时切换到"信息架构梳理模式"，产出的结果因此也更有逻辑。这个技巧不费任何额外成本，强烈建议试一试。

我在这些项目里最大的收获，是终于明白了"AI味"不来自AI，而来自我们让AI在不设约束的情况下工作。任何脱离了设计系统的生成工具，都会回归到平均值；而平均值永远不等于品味。现在拿到AI生成的UI稿，我也不会急着点头或摇头，而是先把页面里所有装饰性元素去掉，看剩下的信息结构还成不成立。如果去掉装饰后页面依然清晰、有重点、可操作，这个方案就留下继续细化；如果去掉装饰后页面变得苍白空洞，那说明AI只是在用视觉噪音掩盖结构缺陷。这个筛选标准，我用了大半年，比任何审美直觉都可靠。你下次收到AI稿子的时候，不妨也试试先摘掉所有装饰，再看骨架。