告别AI味网页，用参考库喂出人做设计

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. 常见问题快查表与排查实录这里整理一下实际操作中容易遇到的高频问题和解决办法基本都验证过可以直接照着用。问题典型表现原因解决办法参考图被“优化”回模板风格喂了留白图页面还是挤满了内容AI 模型本身有强烈的平均化倾向弱特征参考图压不住选特征极端的参考图并明确写“严格按参考图布局不要重新构图”参考图之间的风格打架两个参考图色系完全不同生成页面乱七八糟AI 试图融合所有参考图的所有特征限制参考图只能用于“局部参考”写明“布局参考图一配色参考图二”文案依然空洞产品描述全是“赋能”“价值”这类虚词模型从训练数据学到的“商业表达”本来就是这样自己重写文案或在 Prompt 里给出真实业务信息让 AI 直接改写措辞图标风格混乱线性图标混着面性图标未给图标风格约束用字符代替图标或指定“只用粗线图标”并附示例移动端布局崩坏桌面版好看手机版元素堆叠模型只关注桌面版语义对响应式无感单独生成移动端版本并提供移动端布局调整指令页面太“单薄”没有充足内容五个 section 草草结束提示词中没有指定信息层级和内容详情给出完整的信息大纲要求每个区块必须写满真实信息并明确字数下限另外还有两个排查思路想多说两句。一个是“从截图反查 Prompt”。当 AI 输出的页面不对劲我会先截图再把截图反向喂给 AI问它“这个页面可能存在哪些设计问题”它会自己指出一堆问题然后我再让它基于这些自我批评重新调整。这个方法有点像让 AI 做自己的评委比人来说要高效得多。另一个是“用浏览器开发者工具检查细节”。AI 生成的页面代码往往藏着不少“缩水”痕迹比如固定像素的断点、没用的重复样式、过度嵌套的 div。我会先跑一遍代码检查工具把无用的样式清理掉再手动修改关键断点。这个活 AI 干不来只能自己上但做完之后页面加载速度和响应稳定性会明显提升。6. 几点经验总结与后续扩展想法最后分享一些实际体验中的感受希望能少走弯路。第一参考库不是一次搭好就完事的它应该随你的审美变化持续演进。我现在每隔两个月会翻一次库把那些看腻了的样本移除换一些更符合当前偏好的新截图。你越信任自己的参考库出稿时越省心。第二一张糟糕的参考图比没有参考图更糟。我试过把一张虽然好看但风格极端的艺术类网站截图丢给 AI结果它把所有文字都变成了竖排加英文中文内容都没法正常阅读。选参考图时优先考虑它是否能被“业务化”地改编而不是单纯好看。第三如果 AI 偶尔不听参考图的可以试着一个很土的办法把参考图的截图直接放进你自己的网页里用浏览器打开然后截一张“把参考图当作背景”的图把透明度调低一点喂给 AI让它看着背景的布局生成内容。这个偏方听着笨实测对某些模型很灵相当于让参考图强行占据视觉主导地位。后续还可以往这个方向做很多扩展。比如把参考库从图片升级成“设计模式描述卡”给每张图配一套设计参数字体、字号、行高、颜色、间距喂 AI 时直接连图带参数一起给。也可以用参考库生成一个“风格问卷”让客户选择自己喜欢的“参考气质”再让 AI 按对应样本批量生成不同版本。目前我已经在用这套思路在给几个小型项目做排版的主动控制了后续准备做一个小工具把所有参考图、反例图、代码片段库封装在一个本地目录里用命令行一键把全部资源传给 AI 并发起设计要求。这样整个工作流会更趁手不用每次复制粘贴一堆路径。说到底AI 做出来的网页像不像人类本质上是这个工具如何理解“偏好”的问题。文字永远描述不出全部偏好但图片能承载更完整的审美判断。给 AI 喂一个参考库只是在用一种更有效的方式告诉它这才是我眼里好设计的样子。而这套办法也不仅仅适用于网页配色方案、品牌识别、甚至文档排版都可以用同样的思路去约束 AI 的输出质感。希望这个思路能帮到你。