“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 生成结果的控制力已经完全不同了。
“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 生成结果的控制力已经完全不同了。