企业官网建设流程全解析

AI 生成网页这事，玩过几次的人基本都有同样的感受：第一眼看上去挺像那么回事，布局规整、配色和谐、组件齐全，但越看越别扭，总有一股“塑料味儿”。说不清是哪里不对，可就是觉得这页面不像一个真人设计出来的。我自己也被这个问题困扰了很久，直到后来换了个思路——不再跟 AI 描述“我要什么风格”，而是直接给它喂一个小型参考库，让它对着真正的设计去仿写，出来的网页终于开始像人做的了。这篇文章就聊聊我是怎么搭这个参考库的，又会踩到哪些坑，希望能帮被“AI味”折磨的人找到一条出路。

1. 为什么 AI 做的网页总有一股“AI味”

想解决“AI味”，首先得搞清楚这股味道是从哪来的。很多人以为是模型能力不行，但真实原因比“能力”更深一层。

1.1 AI 的“平均化审美”问题

AI 生成网页时，本质上是在做概率预测：它从海量训练数据里学习到一个“最可能的网页长什么样”，然后按这个概率分布去填充内容。问题就出在这个“最可能”上。

真实的人类设计师做页面，会刻意制造反差和张力。比如大标题下紧贴一个超大留白，或者把某个元素故意压到角落，让视觉重心偏离中心。这种“叛逆”让页面产生节奏感，但也让它在概率分布上是小概率事件。AI 没有这种叛逆基因，它只会挑选最稳妥的选项——于是出来的页面高度相似：一个居中的 hero 区，左边一个 logo，右边两个按钮，下面三列卡片，再下面一段客户评价。整页信息密度均匀，间距永远一样，就像标准化流水线上冲压出来的铁皮盒子。

我之前做过一个对比实验：让 AI 分别生成三次“科技公司官网”，不指定任何风格。结果三个版本的骨架几乎一模一样，甚至连文案语气都雷同，“助力数字化转型”这类抽象表述反复出现。这不是巧合，这是模型把所有可能的风格做了“平均”之后的结果。

1.2 三大高频“AI味”特征

如果你还判断不准什么是 AI 味，可以从下面这三个特征入手，基本百发百中。

第一个特征是“色彩的廉价感”。AI 特别喜欢用渐变背景，尤其是从紫色到蓝色的渐变，再叠一层大号白色无衬线字体。这种配色理论上没毛病，但实际渲染出来总有一种“模板网站”的气质，因为它是“最安全”的搭配。真实站点往往用色更克制，可能全站只有一两个主色，剩下全是黑白灰，靠排版和留白撑起质感。

第二个特征是“布局的对称强迫症”。AI 生成的页面几乎没有不对称布局，所有模块都严格居中，左右两边元素数量完全相同。真人设计师会故意让左边放图片、右边放文字，或者让列表项长度错落有致，形成视觉流动。AI 做不到这种“松弛感”，它总觉得你在同一行里不放满两列就对不起观众。

第三个特征是“文案的空洞感”。AI 写的页面标题永远是“欢迎来到我们的世界”，副标题永远是“在这里，我们创造无限可能”，按钮永远是“了解更多”。这类话单独看没问题，但放到真实网站里就像在念演讲稿，没有信息量。真人写文案会克制得多，至少会告诉你“我们做了什么”“客户是谁”“价格多少”。

1.3 为什么文字指令救不了

既然问题出在模型身上，很多人第一反应是用更详细的 Prompt 去纠正，比如“不要用渐变”“不要居中”“要留白”。实话实说，这能缓解一点症状，但治不了根。

原因很好理解：AI 在文字层面理解“不要”这件事非常吃力。你说不要渐变，它确实减少了渐变的面积，但会在按钮上偷偷加一点。你说不要居中，它改成靠左对齐后，又会让右边空得发慌。文字指令本质上是在一个连续概率空间里抠掉几个点，但剩下的分布依然很平均，仍然逃不出那种“稳妥”的味道。

真正管用的方法是改变它的输入模式——从“描述风格”变成“提供样例”。这就是参考库的价值所在。

2. 参考库的核心思路：给 AI 喂“品味”，而不是喂“规则”

所谓参考库，其实就是一个你精心挑选过的设计样本集合。可以是截图、网页源码、设计稿，甚至只是你自己收藏的网站列表。关键不在于数量多，而在于“风格明确”。

2.1 参考库和素材库的本质区别

很多人一听到“参考库”就想到去下载一堆网页模板，然后把好看的组件截图扔到一个文件夹里。这其实是跑偏了。素材库解决的是“有什么可以用”，而参考库解决的是“应该长成什么样” —— 它承载的是审美判断，不是资源堆砌。

举个例子。你去逛一个建筑网站漂亮，把它整个页面截图存好了，这叫素材。但你真正要汲取的，是它怎么处理标题和正文的层级关系、怎么让一个暗色页面透出呼吸感、怎么用一个极细的分割线代替粗边框。这些看不见摸不着的“组织方式”，才是一个参考库真正的价值。AI 拿到图片后，它不关心里面具体放了哪些文案，它关心的是视觉节奏、色彩关系、位置张力，这些会直接映射到生成结果里。

所以我的参考库非常小，核心部分只有六七个条目，每个条目都指向一种我认可的设计气质。有的页面给我看“克制”，有的给我看“硬朗”，有的给我看“手作感”。每次只是想清楚当前这个页面需要哪种气质，再挑对应一两张图丢给 AI就够了。

2.2 五类必收的参考样本

按我的经验，一个够用的参考库至少需要覆盖五类样本，每类 1~2 个即可。

第一类是“大留白页面”。这类页面信息量很少，但每个元素的位置都经过深思熟虑，导航栏的高度、标题的上下间距、页脚的间距都大得超出常规，反而形成高级感。它是治疗“信息密度过高”的良药。

第二类是“强排版页面”。不以图形和图片取胜，纯粹靠字体大小、字重、行间距、字间距的对比来建立视觉节奏。这对 AI 处理文字内容的层级非常有帮助。

第三类是“实验性导航页面”。比如汉堡菜单展开时的全屏覆盖动画、鼠标移动时的磁吸效果、横向滚动等。AI 默认生成的就是顶部固定导航，这本身没错，但如果你想跳出“模板感”，得给它看几个不一样的导航处理方式。

第四类是“真实产品截图”或“真实业务页面”。很多 AI 味道来自它根本不理解业务，只知道堆形容词。你给它看一个真实的 SaaS 定价页、一个真实的个人简历页、一个真实的电商商品详情页，它会下意识模仿里面的信息结构和措辞，而不是凭空编造。

第五类是“反例警示图”——这个稍后细说，它用来帮你避免 AI 滑向那些你已经厌恶的套路风格。

我的实际做法是把参考截图全部放在一个叫“design-ref”的本地文件夹里，按气质命名，比如“大留白-minimal.jpg”“强排版-editorial.jpg”“深色-硬朗.jpg”。不仅能喂给 AI，自己审稿时也能快速对照。

2.3 为什么图片比文字更有约束力

这里有一个真实的原因：目前主流多模态 AI 对图片的理解是一个视觉编码过程，它会提取图片的空间布局、色彩分布、物体边缘、文字区块等结构化信息。当它生成网页时，这些视觉特征会直接作为条件输入，比一行行文字描述要稳定得多。

我试过用文字描述“我想要类似某站那种左侧导航、右侧内容，内容区是有几条分割线的列表布局”，AI 生成的经常是两端各一块的骨架。后来我直接把那张参考图的截图丢进去，说“请仿照截图中的版式，把内容替换为我的业务内容”，结果版式还原度至少提升了 60%。

用生活类比解释就是：你告诉一个美术生“画一个冷色调、构图偏左上、背景大虚化的场景”，他能画出来但他画得会非常“像别人说的”；你直接把照片放他面前，说“照着这个感觉画”，他会自己琢磨光线方向和笔触节奏，出来的东西有灵魂得多。AI 也一样，图片就是那个“感觉”。

当然这里有一个前提：你得敢在 Prompt 里说“模仿这张图的布局”，而不是说“随便参考一下”。AI 有时候会自作主张“优化”你的参考图，把不对称的布局强行掰正，把大胆的配色收敛成安全色。所以后面会讲到怎么用提示词锁住参考图的细节。

3. 实操案例：我把一个作品集页面从“AI味”改成了“人做味”

光讲理论容易飘，我拿一个自己最近做过的页面当例子。目标是做一个个人设计作品集，需要展示六个项目、一段个人简介、一个联系方式。用同一个 AI 工具，分别走“只用文字指令”和“使用参考库”两条路线，效果差异非常明显。

3.1 第一轮：只用文字指令生成

Prompt 大概写了 “做一个现代简约风格的作品集网站，有 hero 区、项目展示、关于我、联系方式，配色要高级”。生成结果如下：默认字体、大片渐变背景、六个项目卡片整整齐齐排成两行三列、每个卡片都带一个圆角阴影，文案是“我热衷于创造令人愉悦的体验”。这个页面你放到任何模板网站里都能找到同类，毫无辨识度。

问题是它在局部上看起来还挺“规范”，这反而更让人来气——你没法跟 AI 说“你太规范了”，因为它听不懂。当时我尝试在 Prompt 里追加“打破网格”“不对称布局”“加一点 editorial 风格”，页面确实不对称了，但不对称的方向很奇怪，像是把本来对齐的内容随机挪了几个像素，视觉上没有指向性，反而更乱。

3.2 第二轮：加入参考库截图

我在参考库里选了两张图。第一张是一个极简杂志网站的首页截图，特点是：拦腰一条大标题占屏幕三分之一，下面左侧是目录列表，右侧是一幅作品大图，中间没有任何边框，只有一根红色的水平线贯穿。第二张是一个独立设计工作室的作品集详情页截图，特点：导航固定，正文区特别窄，项目列表以编号“01/02/03”的形式线性排列，没有卡片， hover 时有文字下划线动画。

我把这两张截图丢给 AI，并给出 Prompt：“参考第一张图的大标题与布局关系，参考第二张图的项目列表方式。不要使用卡片、渐变、圆角。保持原图的留白和字距节奏。文案请写得像一位设计师的真实自我介绍，不要有空话。”

这一轮出来的页面，终于有“人味”了。大标题和下方内容之间留出了巨量的空间，左侧目录和右侧大图的比例明显是刻意的，项目列表真的变成了数字编号加文字， hover 时有下划线的滑动效果。整体品质谈不上惊艳，但至少不会让人第一眼认定这是 AI 做的。

3.3 具体实操步骤拆解

如果你也想复制这个过程，可以参考下面这套步骤，按顺序来能少走弯路。

第一步，选定核心参考页。不要贪多，一次最多给 AI 三张图。三张以上模型会混乱，容易把 A 页的布局和 B 页的字体搭配硬拼在一起，结果更怪异。我的经验是两张最好：一张定大调性，一张定细节。

第二步，给每张图写一句“意图注释”。AI 读取图片时是无差别扫描，如果你不提供焦点，它可能被背景里的纹理带偏。所以我会在 Prompt 里这样写：“第一张图的核心是标题和正文之间的大留白，请严格保持这种垂直间距；第二张图的核心是项目编号列表的线性排列，请复现它的字号对比和行距。” 这相当于给参考库里的图片配上“一句话使用方法”。

第三步，把“不要什么”也写清楚。AI 对否定词的执行效果不太好，但有了参考图之后，否定词可以变得有抓手，比如“不要出现参考图里没有的卡片式阴影”。这样它至少会以参考图为基准来做减法。

第四步，人工过一遍文案。可别偷懒。AI 生成的文字无论如何都会有空泛感，你要做的是把它给出的文案换成你自己真实写过的句子，哪怕很直白。真实项目名称、真实经历、真实的联系方式——这些“地气”是 AI 味最大的敌人。

第五步，微调响应式布局。AI 生成的移动端版本经常很敷衍，文字直接堆叠，图片自动缩成一条。我自己会在桌面版确认之后，单独把参考图也发给 AI，让它按参考图的“元素优先级”重新排列移动端——哪个块靠前，哪个块折叠，间距缩放比例是多少。这一步不做的话，页面在手机上又容易打回原形。

整个流程下来，页面效果可能还达不到顶级设计师的标准，但它至少不再“一眼 AI”。如果你追求更高的完成度，可以继续在参考库上做文章。

4. 那些“AI味”最难去掉？参考库之外的进阶手段

即便有了参考库，我仍然发现有几个顽疾非常顽固，需要额外处理。

4.1 顽固的一号选手：图标和图形语言混乱

AI 很爱生成一组风格不统一的图标：有的是线性、有的是面性、有的带着奇怪的圆角、有的线条粗细不一致。放在同一行里，辨识度很低，像是一个门牌号用了三种字号。参考库只能解决版式，很难约束图标这种微观元素。

我的做法是：准备一套自己认可的图标风格示例，或者干脆给 AI 规定“只用文字加符号，不用矢量图标”。比如项目列表就用“→”和“#”这种字符，反而显得有设计感。如果实在需要图标，我会自己用前端代码写，不交给 AI 生成。

4.2 顽固的二位选手：组件之间的“关系感”缺失

真实网页的各个区块之间有信息上的关联，比如页脚里的联系方式会和正文里的引言有呼应，服务列表的具体内容会出现在项目案例里。AI 生成的区块则像是从不同的模板里拼凑来的，彼此之间没有任何“记忆”。这就像一个人说话总是东一句西一句，每句都通顺，但合起来不成篇章。

参考库能帮你锁定整体视觉，却没法建立内容语义上的连接。解决思路是：在 Prompt 里给 AI 一个“信息大纲”，明确告诉它“这个页面要回答三个问题：我是谁、我做过什么、我怎么帮到你。每个区块都必须围绕其中至少一个主问题，禁止出现与大纲无关的装饰性模块”。这样生成的页面至少在逻辑上能串起来。

4.3 顽固的三号选手：组件间间距缺乏“等级”

真实设计里，间距是有节奏的。标题距离下一段可能比距离上一段多一倍，模块之间的空白远大于模块内部元素的空白。AI 生成的页面里，所有间隙几乎都均等，视觉上听起来像是一台没有换气的播音机。

要修正这个，需要在参考库里专门放一张“间距异常夸张”的截图，然后在 Prompt 里强调“模块外部间距至少是内部间距的三倍”。让它从图片里直观感受到那种“故意放大空白”的设计意图，比用数字定义有效得多。

4.4 引入“反例参考库”的妙用

除了正向参考，我还维护了一个“反例库”，里面存着几张让我极其反感的 AI 味页面截图——就是那些渐变紫、居中一切、大卡片套小卡片的典型范本。每次让 AI 出稿前，我会说“尽量避免出现反例图中的任何元素，特别是那个渐变背景和那组带阴影的圆角卡片”。

这听起来像玄学，实测却常常有效。原因在于模型对视觉特征非常敏感，你给它一张明确的“禁忌图”，它比听你说一万个字记得更牢。反例库不需要多，三四张足矣，但选图要狠，要能准确戳中你讨厌的点。我曾经试着把反例库藏在 Normal Prompt 里，效果会打折，最好明确说“这张是反例”。

4.5 用代码片段库补足交互细节

最后一个是交互层面的优化。AI 生成的 hover 效果、滚动动画，往往都是最普通的 opacity 变化和位移，做不出设计感的交互。参考库在这里帮不上太多忙，因为它只能给你视觉静态层面的信息。

我的做法是准备一个“代码片段库”，里面收了几段自己写过的交互动效代码，比如磁吸按钮、滚动渐入标题、滑动进度条、卡片倾斜跟随鼠标等。当需要特定交互时，直接把代码段贴给 AI，让它改改参数集成到页面里。这相当于给 AI 一份“动作参考”，比让它凭空生成更可靠，也更符合实际项目需要。

5. 常见问题快查表与排查实录

这里整理一下实际操作中容易遇到的高频问题和解决办法，基本都验证过，可以直接照着用。

另外还有两个排查思路想多说两句。

一个是“从截图反查 Prompt”。当 AI 输出的页面不对劲，我会先截图，再把截图反向喂给 AI，问它“这个页面可能存在哪些设计问题”，它会自己指出一堆问题，然后我再让它基于这些自我批评重新调整。这个方法有点像让 AI 做自己的评委，比人来说要高效得多。

另一个是“用浏览器开发者工具检查细节”。AI 生成的页面代码往往藏着不少“缩水”痕迹，比如固定像素的断点、没用的重复样式、过度嵌套的 div。我会先跑一遍代码检查工具，把无用的样式清理掉，再手动修改关键断点。这个活 AI 干不来，只能自己上，但做完之后页面加载速度和响应稳定性会明显提升。

6. 几点经验总结与后续扩展想法

最后分享一些实际体验中的感受，希望能少走弯路。

第一，参考库不是一次搭好就完事的，它应该随你的审美变化持续演进。我现在每隔两个月会翻一次库，把那些看腻了的样本移除，换一些更符合当前偏好的新截图。你越信任自己的参考库，出稿时越省心。

第二，一张糟糕的参考图比没有参考图更糟。我试过把一张虽然好看但风格极端的艺术类网站截图丢给 AI，结果它把所有文字都变成了竖排加英文，中文内容都没法正常阅读。选参考图时，优先考虑它是否能被“业务化”地改编，而不是单纯好看。

第三，如果 AI 偶尔不听参考图的，可以试着一个很土的办法：把参考图的截图直接放进你自己的网页里，用浏览器打开，然后截一张“把参考图当作背景”的图，把透明度调低一点喂给 AI，让它看着背景的布局生成内容。这个偏方听着笨，实测对某些模型很灵，相当于让参考图强行占据视觉主导地位。

后续还可以往这个方向做很多扩展。比如把参考库从图片升级成“设计模式描述卡”，给每张图配一套设计参数（字体、字号、行高、颜色、间距），喂 AI 时直接连图带参数一起给。也可以用参考库生成一个“风格问卷”，让客户选择自己喜欢的“参考气质”，再让 AI 按对应样本批量生成不同版本。目前我已经在用这套思路在给几个小型项目做排版的主动控制了，后续准备做一个小工具，把所有参考图、反例图、代码片段库封装在一个本地目录里，用命令行一键把全部资源传给 AI 并发起设计要求。这样整个工作流会更趁手，不用每次复制粘贴一堆路径。

说到底，AI 做出来的网页像不像人类，本质上是这个工具如何理解“偏好”的问题。文字永远描述不出全部偏好，但图片能承载更完整的审美判断。给 AI 喂一个参考库，只是在用一种更有效的方式告诉它：这才是我眼里好设计的样子。而这套办法，也不仅仅适用于网页，配色方案、品牌识别、甚至文档排版，都可以用同样的思路去约束 AI 的输出质感。希望这个思路能帮到你。