“AI味”这个词最近被提得特别多。我自己也用 AI 辅助处理过不少网页项目做得多了就发现一个很稳定的规律只要你不加约束换哪个模型生成的页面基本都长一个样——圆角卡片、大面积渐变、居中的大标题配一排看不出实际用途的小卡片整体挑不出毛病但就是没有灵魂。用一句话概括就是好看但无聊精致却廉价。后来我试着换了一条思路。先把一批我真正认可风格的参考页面截图整理成库连同一份用自然语言写好的风格文档一起喂给 AI再让它基于这些参考内容去生成新版页面。结果变化几乎是肉眼可见的导航栏形态、文案语调、留白逻辑、按钮质感全部都不再按模板走了。这篇文章就把我整理参考库、编写参考文档、反复调试提示词的经验完整记录一下包括我自己踩过的坑和最终沉淀下来的可用流程想给同样被“AI味”困扰的开发者或设计师一份可以直接抄作业的方案。1. 先搞清楚为什么 AI 生成的页面天生一股“AI 味”1.1 什么是“AI 味”不是丑而是没有记忆点关于“AI味”最准确的一个观察是它不是丑而是“没有记忆点”。我帮朋友检查过好几个落地页不看具体内容光看版式就能猜出这些页面大概率是同一个免费模板的变体。它们往往共享一堆高度雷同的视觉元素超大圆角卡片、柔和渐变背景、整齐居中排版三到四张信息卡片横向排列按钮是那种饱和度不高但很“讨喜”的蓝色或紫色配图统一是“抽象网格加人物插画”或者干脆从图库随机抽一张云朵和电脑的照片。单独看每一项都很难说它难看但放在一起就会给人一种“在哪见过”的错觉。这个现象背后的原因不难理解。AI 在生成时会对训练数据中大量网页设计做“平均化”采样哪个布局出现频率最高就优先输出哪个。大量模板站和作品集站之间的共性最后就变成了它默认的审美基线。你如果在提示词里只给了“简洁现代、高端大气”之类的词它就会自动落到这个基线附近。问题是这个基线不承载任何品牌立场也不表达任何性格页面的视觉语言像水一样平滑于是用户看过就忘。1.2 趋同的根源AI 在潜意识里选择“安全答案”要说清楚为什么 AI 产出会趋同可以先打一个比方一群人商量去哪里吃饭如果没人有明确主张最后大概率会走向川菜馆或火锅店因为这个选项最不容易引发反对意见。AI 生成网页也差不多在提示词没有给出足够明确约束时它倾向于选“大多数人都能接受”的方案而不是“最能表达你”的方案。模型天然会把概率高的元素组合在一起这样生成的页面犯错的概率最低。但这对做项目的人来说是个问题。你的目标用户不是“大多数人”而是某个细分人群你的页面不需要让所有路过的人点赞只需要让真正关心你产品的人产生信任。如果 AI 只顾着讨好所有人它产出的页面就会失去方向感。你会看到一个奇怪的结果页面美术上挑不出大毛病业务上却完全没法用。决策成本高、转化链路弱、品牌记忆点为零基本就是这种“安全答案”的副产品。1.3 “AI 味”的代价好看却留不住用户这里说一个比较现实的影响视觉趋同会直接消耗用户的信任。做电商、做SaaS、做个人作品集用户判断你专不专业第一眼看的不是文案而是页面气质。如果你的页面和市面上五成小网站长得一模一样用户潜意识里就会觉得“这家没什么特别”后续内容再扎实也容易输在起跑线上。我自己体会最深的场景是在作品集和个人主页这类页面里。一个设计师把自己的页面上传之后如果整个版面跟同行们的 AI 模板页面撞脸那等于在简历上写“我只会复制模板”。反过来当页面有了独特的字号系统、间距逻辑、色彩秩序哪怕内容还没细看用户已经会对创作者的专业度产生正向预期。也就是说消除“AI味”不只是好看难看的问题它直接关系到转化、信任和品牌识别。2. 参考库是什么为什么它能解决“AI 味”2.1 参考库不是素材包而是带图的设计规范很多开发者理解的“参考库”是收集一堆好看的页面截图到用时直接丢给 AI。这么做有一点效果但远远不够。真正的参考库应该包含三部分一组整理过的参考截图、一份用文字描述的风格文档、一份明确列出“不要做什么”的否定清单。它本质上不是素材包而是一份“带图的设计规范”完整回答 AI 三个问题你面向谁、你要什么气质、你拒绝什么风格。我可以把它类比成你给一个刚入职的新人设计师提供的工作材料。你不可能只扔给新人十张漂亮图片然后说“去吧照着感觉做”。你还得告诉他字体层级怎么处理、配色逻辑是什么、卡片圆角控制在多少、按钮应该偏轻盈还是偏厚重。AI 虽然能力很强但从使用方式上更像个“高执行力的新人”你需要给足上下文它才能不跑偏。参考库做得越结构化AI 的自由发挥空间就越小反而更容易交出符合预期的作品。2.2 为什么“给参考”比“讲要求”有效我在实际项目里反复体会到一件事文字描述对视觉风格的控制力是有限的。你可以花很大力气写“希望页面冷静、克制、有高级感”但不同人对“高级感”的理解千差万别。AI 有可能把这个词映射成黑白灰加无衬线字体也有可能映射成深色背景加金色点缀。这种不确定性靠继续加形容词是压不住的因为语言本身就存在大量歧义。但当你直接给 AI 看截图时情况就完全不同了。一张参考图里包含的信息密度非常高字体大小对比、间距节奏、颜色饱和度、线条粗细、卡片阴影深浅、留白比例这些内容交织在一起很难用语言完整复述。而多模态模型看到图之后对这些信息的捕捉要远好于纯文字描述。只要你在提示里说清楚“第一张图学习导航风格、第二张图学习卡片排版”AI 就能把图片中的视觉规律迁移到新页面上。这比写十行抽象形容词有效得多也稳定得多。2.3 参考库和设计规范之间的关系有人会问我们团队本来就有设计规范为什么还要做参考库我的理解是传统设计规范是给人看的而参考库是给 AI 看的。设计师可以直接阅读设计规范里“主色 #1B1C1E、次色 #F2F2F0”这类条款但 AI 面对的是一长串上下文提示纯文本规范会被淹没在其他指令里。参考库则会把同样的信息转换成更直观、更贴近生成任务的形式——既有截图锚点又有风格文档还有否定清单。更关键的是参考库可以做到“图文并重”。我通常会把关键模块截图放进提示词的显眼位置让 AI 在生成每个区域时都有一个具体锚点可依而不是让它根据抽象描述重新推断。这样一来设计规范里的约束就真正进入了生成过程而不是只挂在文档里。你可以把参考库理解成“人读版设计规范”的编译产物它把设计师的意图翻译成 AI 更容易执行的输入格式。3. 四步搭建一套可复用的参考库3.1 第一步按“气质”筛选素材宁缺毋滥搭建参考库的第一步不是去收集一堆“好看”的截图而是确定气质方向。我常用的方法是先给自己的项目定一个关键词比如“冷静、可靠、重内容”或者“轻快、活泼、偏消费”。然后带着这个关键词去搜索参考页面看到满意的就存下来。这一步的重点是克制存到 30 张左右就停下来开始做减法。筛选时我会把截图分批摆在一起看连续删掉那些气质不一致的页面。比如目标是“冷静克制”但里头混了一张大量使用高饱和撞色的页面气质就会被严重干扰。如果参考库内风格不统一AI 得到的信号就是分裂的最后生成出来就是两种风格硬凑到一起。宁可留下七八张高度统一的图也不要三十张五花八门的图。这里的判断标准不是“这张图好不好看”而是“这张图的气质对不对”。3.2 第二步把整页截图拆成模块组筛完截图之后不要直接整个丢给 AI因为整页截图的信息太杂AI 不容易分清该学哪一个部分。我一般会把截图按页面模块重新整理导航栏一组、首屏主视觉一组、内容卡片一组、列表布局一组、表单和按钮一组、页脚一组。每组放两三张不同页面但气质一致的截图这样 AI 在生成对应模块时可以更精准地参考。举个例子如果某张参考截图里导航是左边放 logo、右边只有一个按钮而另一张截图里导航是居中型布局我把两张图都放在导航组里AI 就会在两种形态之间做取舍。相反如果我把它们塞进同一个长图片里AI 很可能只会记住其中一张另一张直接被忽略。模块化拆分之后每个模块组都有了独立上下文生成时控制力会强很多。这是仅靠“给 AI 一张整页截图”做不到的。3.3 第三步写一份可以直接粘贴给 AI 的参考文档截图之外还需要一份文字版的参考文档。这份文档的价值是把截图里难以体现的约束固定下来比如颜色代码、字体选择、间距规范、圆角范围、文案口吻等。我把参考文档控制在适合直接粘贴的长度不要写成几十页的规范书那样 AI 会在长上下文里丢失重点写几段关键信息就够了。我常用的参考文档结构大概是【项目信息】 这是哪个产品的页面目标用户是谁希望给用户留下什么印象。 【视觉气质】 用三个词概括冷静、克制、重内容。 【色彩系统】 主色#1B1C1E近黑色 背景色#F2F2F0暖灰白 强调色#C43D2D暗红仅用于按钮和链接 【字体与排版】 字体系统字体栈避免花哨字体 标题加粗居中偏左行高 1.2 正文常规字重行高 1.8段间距偏大。 【组件倾向】 卡片圆角小于 8px阴影极浅 按钮直角或小圆角低饱和度 图片摄影感优先拒绝大而空的插画。 【禁止项】 不要渐变背景 不要大面积彩色色块 不要自动添加卡片阴影 不要把内容全部居中。这份文档不需要追求辞藻核心是给出明确、量化的规则。AI 对数字和否定词的响应通常很直接你给它“圆角 8px”它就真的会收敛到小圆角。这对消除“AI味”非常关键。3.4 第四步用一次最小测试验证参考库参考库建完之后我不建议直接生成整个页面那样翻车成本太高。我的习惯是先拿它做一个最小测试比如只生成一个导航栏加首屏区域。这样可以快速验证两件事AI 有没有理解参考库的方向以及风格文档和截图之间有没有冲突。如果导航栏和首屏的区域做出来符合预期再放开生成完整页面。如果测试结果不对也不要反复改提示词硬试先回头检查参考库本身。最常见的问题是截图和文字描述不匹配截图是活泼风文档却写了“冷静克制”AI 自然会纠结或者截图里按钮是大圆角文档里却写了“圆角小于 8px”AI 会不知所措。先让参考库内在一致再谈生成效果。不要小看这一步它能把后面大改稿的时间省下一大半。4. 把参考库成功“喂”给 AI 的实操流程4.1 可以直接改用的提示词模板有了参考库之后还要掌握正确的“喂”法。直接丢截图加一句“参考这个风格做”仍然显得太随意AI 抓不住重点。我自己现在常用的提示词模板是分段的把“角色设定”“参考库说明”“生成要求”拆开让 AI 对每个部分都产生明确响应。你是一名资深 Web 设计师。我会给你一份参考文档和几张参考截图。请严格按照参考库里的视觉方向来设计页面不要自行发明风格。 参考文档 【项目信息】... 【视觉气质】... 【色彩系统】... 【字体与排版】... 【组件倾向】... 【禁止项】... 参考截图 图片 1整体页面参考主要看首屏布局和导航样式 图片 2内容卡片参考注意卡片内部间距和信息层级 图片 3按钮和表单参考注意色彩和圆角处理。 生成要求 1. 用 HTML/CSS 输出一个完整页面 2. 优先还原截图里的气质而不是“好看” 3. 如果你不确定某一处的样式宁可采用参考文档里的默认值也不要自由发挥。 页面内容背景一个面向企业用户的效率工具页面需要显得专业、可靠、简洁。这个模板的核心是给 AI 一个明确的选择优先级先参考截图再参考文档最后才参考它自己的经验。实际用下来AI 在这种提示下会收敛很多很少再出现自作主张加渐变背景的情况。4.2 分批喂、循环改把生成过程变成“对图改稿”有些人对 AI 生成的期望是一次成型但我建议把它拆成多轮循环来跑。我的习惯是把生成分成三轮第一轮先出整体框架不追求细节只确认版式方向和气质对不对第二轮做模块级细化比如导航、卡片、列表、按钮根据截图逐组调整第三轮是整体视觉抽检把圆角、阴影、间距统一扫一遍改掉不和谐的部分。这样做的好处很实际。第一轮如果气质就不对你只需要推翻框架不必在错误的方向上精修细节第二轮开始参考库里的模块截图就派上用场了你可以直接说“参考图 2 的卡片是左对齐列表式排版请把首页里的卡片区域改成这种”。AI 听到很具体的改稿指令通常能一次改到位不需要重复描述。整个过程就像在指挥设计师改稿只是你手里拿着的是截图而不是红笔。4.3 用否定清单锁住下限防止 AI 跑偏否定清单是我认为投入产出比最高的一部分。AI 对负面指令的响应往往比正面描述更可靠因为正面描述还需要理解和想象而“不要做什么”是非常明确的过滤规则。我会在参考文档里列上五六条硬性禁止项比如“不要渐变背景”“不要圆角超过 12px”“不要增加卡片阴影”“不要使用紫色和蓝色渐变按钮”“不要让所有内容都居中”。这些否定项越是具体AI 越是容易遵守。如果你只写“不要做得太 AI”它反而不知道底线在哪因为“AI味”是一种模糊的整体感受不是一条明确规则。反过来你告诉它不要大面积渐变、不要大圆角、不要居中版式它就能在具体维度上避开常见模板痕迹。等这些表层问题被锁住页面自然就从“默认模板”变成了“有立场的页面”。提示否定清单控制在 5 条以内只锁最影响气质的底线。如果列太多条AI 的发挥空间会被压缩得过于厉害生成结果容易变成参考库的生硬复刻缺少应有的设计弹性。4.4 每次生成后把好结果回填进参考库参考库不是一次建完就丢在那里的它应该是活的。我每次用 AI 生成页面后如果发现某个局部效果特别好——比方说某个按钮质感、某段文案间距、某个卡片布局——就会把这一块的截图剪下来命名成“优质局部”回填到参考库里。下一轮生成或下一个项目启动时这些被验证过的局部成果会成为新的参考材料。这个“回填”动作看着简单实际上是在给 AI 越来越准确的反馈循环。第一次建库时你可能只有十几张外部参考图风格方向只能靠你主观判断回填几次之后库里就会积累一批“已经被你的项目验证过、真实可行”的样式结果。后面再生成页面AI 参考的就不仅是外部作品还包括之前跑通的方案整体产出质量会越来稳定。参考库会从“临时材料”变成“个人或团队的设计资产”。5. 一次前后对比从“一眼 AI”到“有点东西”5.1 喂参考库之前默认输出的通病为了让你更直观理解差异我说一个实际做过的模拟项目。当时要为一个企业内部效率工具做落地页产品定位很明确稳定、可靠、面向专业用户。第一次我只给了 AI 一段几十字的产品介绍和一句“做一个简洁专业的落地页”结果出来是什么画面呢顶部是标准居中导航logo 在中间右侧三个链接首屏是居中的大标题加一句口号一个渐变大按钮下面整整齐齐排了三张卡片每张卡片上一个小图标、一段标题、两行说明背景是淡淡的渐变图片是抽象几何风格。这个页面不能说丑但放在任何 AI 默认模板页面旁边都毫无辨识度。问题不在于单个元素难看而在于整页的气质跟产品毫无关系。一个强调“可靠、专业”的企业工具却用了高圆角卡片、活泼配色、居中文案怎么看都像在跟用户说“我不太确定自己是谁”。这种页面上线转化率一定不会理想因为它没有传递出任何有说服力的品牌信号。5.2 喂参考库之后风格开始有自己的脾气第二轮我搭建了一个很小的参考库只用了八张参考图分成了导航、首屏、卡片、按钮四组。风格文档里写了“冷静、克制、重内容避免消费感”。生成的结果变化非常明显导航变成左侧 logo、右侧少量功能入口的非对称布局首屏不再居中而是左对齐的大标题加副文案旁边放了一张真实感的产品界面截图三张卡片改成紧凑的列表式排版弱化卡片边框、强调文字层级按钮改成低饱和暗红色直角处理视觉分量明显更稳重。最直观的感受是这个页面终于“有了立场”。它不会让所有人都喜欢但对于企业用户来说它传达出的专业感和信任感是上一版完全不具备的。这已经不再是一个“AI模板换皮”而是一个确实在为目标人群设计的页面。气质这种东西很难用指标量化但你放进真实场景里去看差异是立刻能感知到的。5.3 过程中实际改动的东西如果把这两轮对比拆开看我其实没有做太多“技术性”的工作没有自己写 CSS、没有调整布局尺寸只是改了输入方式。第一轮我给了 AI 一句抽象要求第二轮我给了它八张截图加一份风格文档。差别就在于AI 从“自由发挥”变成了“有参考的创作”其自由度的边界被收住了产出的方向也因此集中了很多。这个过程里我印象最深的不是“效果变好”而是“依赖变少”。以前做页面我需要在草稿纸上画布局或者写完提示词再手动修补细节现在只要参考库足够准确AI 生成的初稿就已经能贴近目标方向我只需要在个别模块上微调。这意味着你的审美判断和项目经验是可以被结构化成输入直接转移给 AI 的。参考库做的正是这件事。6. 常见问题与排查技巧实录6.1 我踩过的 5 个典型问题参考库不是万灵药实际操作中也会遇到各种幺蛾子。我把最常踩的几个问题整理成了下面的速查表方便你对照排查现象可能原因解决思路AI 完全忽略截图继续按默认模板生成提示词里截图位置不突出或参考文档互相矛盾把截图说明放到生成要求之前并确认文档不冲突只参考了部分截图另一部分被无视一次喂太多超出注意力焦点减少单次截图数量按模块分批喂页面气质对了但代码大量冗余生成了太多重复样式缺少封装增加“不要重复造轮子”的约束或生成后人工整理参考库风格混合结果像两张图拼在一起参考截图气质不统一互相打架精简截图只留同一气质方向的素材前几轮效果不错继续迭代后风格崩坏提示词上下文过长早前的约束失效重新提交关键约束或另开对话重新喂参考库第二行和第五行出现的频率最高。我第一次做参考库时一口气喂了二十多张截图总想着让 AI 多学点结果它只重点关注了前几张后面的几乎没起作用。后来改成每组两到三张分批喂效果立刻不一样了。6.2 排查思路先查提示词再查参考库遇到最终效果不对劲时我建议按“先提示词、后参考库”的顺序排查。第一步看提示词有没有把参考库放在足够靠前、足够显眼的位置。AI 的注意力往往集中在开头和结尾如果参考说明被夹在一大段指令中间它很可能只看后半部分前面给再好的参考也没用。第二步看参考库的内部一致性。我会把截图和风格文档放在一起通读模拟 AI 的视角截图给的信息是不是和文字描述一致每种模块组里的图是不是气质接近否定清单有没有和正面风格冲突很多时候你觉得 AI 不行其实是参考库先乱了。把这两步走完绝大多数问题都能自己浮出来。这个排查习惯养成后我几乎不再有“AI 忽然变笨”的困惑。7. 进阶玩法让参考库成为长期资产7.1 一套参考库复用多页面、多模型参考库建到一定规模之后它的价值会在不同项目里被反复放大。我一般会把参考库按“产品气质”分类存好比如“冷静企业风”“轻快消费风”“内容媒体风”各有几套。做新页面时直接挑最接近目标气质的一套库修改一下项目信息和颜色参数就可以开始生成不用每次都从零搜集截图。这些东西也可以跨模型使用。不同 AI 模型对提示词格式的敏感度不同但对参考截图的理解方式是共通的。同一套“截图 风格文档 否定清单”结构放到多个模型里都能取得不错的效果最多微调一下提示词格式。这样一来参考库就成了你自己的通用上下文模板而不是被绑定在某一个对话里的临时设置。7.2 把参考库升级成团队的公共规范如果你在团队里工作参考库还能成为设计师和开发者之间的共同语言。设计师维护截图库和风格文档开发者在生成页面时直接用这套库来约束输出。这样两侧的沟通成本会低很多因为 AI 已经成为“翻译器”把设计师的意图转成开发者的代码同时也把开发者的约束转回设计结果。我见过一种更高效的玩法团队每周复盘一次把本周内 AI 生成效果最好的几个页面局部回填进公共参考库。一个月后公共参考库会沉淀几十个经过真实项目验证的优质模块。这个时候再开新项目AI 生成的初稿就能达到相当成熟的程度人工只需要做最后把关和微调。参考库从一个解决问题的小工具真正变成了团队沉淀设计能力的基础设施。最后分享一条实操心得如果你问我整理参考库这件事最核心的心得是什么我会说它能帮你减少大量无效劳动。以前我在 AI 辅助建站时反复改提示词、来回重新生成总觉得是 AI 理解力不行。后来才反应过来问题大概率出在我给的信息太模糊。参考库把抽象的审美偏好变成了具体可执行的约束AI 反而不需要“猜”你想要什么了。我现在做页面还保留一个小习惯每轮生成后只要某个局部让我眼前一亮就立刻把那个区域单独截出来丢进对应的素材组里。这个过程很快但坚持一段时间后你的参考库里会积累出一批“经过实战检验”的样式。到了下一个项目启动时就不再是冷启动了手头有了一批验证过能落地的风格原稿AI 生成的初稿也能比别人家更像样。如果你也经常被“AI味”整得头疼建议从今天说的流程里挑一步先开始建一个小参考库也好写一份风格文档也好先跑一个最小测试。这个思路真正香起来是跑完两三个项目之后你会发现自己对 AI 生成结果的控制力已经完全不同了。