说实话我之前一直有个困惑用大模型生成网页速度快是快但出来的东西总有一种“流水线味”。构图板正得像教科书文案空洞得像填空配色稳得毫无性格。整个页面挑不出错但也找不出一个能让人记住的地方。直到我把一个自己攒了很久的参考库喂给 AI情况才有了转折。这篇文章就聊聊我做这件事的完整过程——从拆解“AI 味”的来源到参考库的选料标准再到具体怎么搭建、怎么投喂、实测效果到底如何。希望对被同类问题困扰的朋友有点用。1. 先拆掉那层“AI 味”模板感到底从哪来在动手搭参考库之前我花了不少时间思考一个问题我们说的“AI 感”或“不像 AI”具体是指什么如果说不清楚这个问题那后面喂再多参考图也是瞎忙活。1.1 视觉层面对称、均匀、留白不足我翻看了十几个由不同大模型生成的网页发现一个共同的视觉规律布局高度对称。左边一个信息块右边必然有一个对应的信息块上面一张图下面必配一段文字。这种“左右镜像”式的排布确实安全但看多了会让人觉得乏味。真实的页面设计往往是“不对称的平衡”——左边压了一个大表格右边可能只有一条窄窄的状态栏头部信息密集底部却突然大面积留白。这种松紧交替的节奏感才是手作页面常见的呼吸感。另一个明显的共性是留白不足。AI 生成的页面倾向于把可用空间均匀地塞满生怕浪费一个像素。而真实页面的留白往往有种“刻意”的味道比如卡片之间的间距差异很大有些地方紧凑得让人喘不过气有些地方又空得让用户怀疑是不是加载失败。这种差异本身就是信息层级的一部分但默认的生成逻辑不擅长制造这种“不均衡”。1.2 内容层面文案密度均匀关键词堆砌严重内容上的“AI 味”其实更容易辨认。默认生成的文案常常是“一站式智能解决方案”“赋能业务增长”“高效便捷的数字化平台”读起来每个词都正确但连起来就让人觉得是塑料做的。更麻烦的是AI 生成的文案在密度上是均匀的。每个卡片配两行标题、一行副标题、一个小图标整个页面像用同一个模具印出来的。而真实业务页面不是这样——有的功能板块只有一行字加一个链接有的板块却要铺开三四百字的说明加一张架构图。这种基于真实业务需求产生的“内容权重大小不一”恰恰是 AI 不太容易模仿的地方因为它在训练时看到的页面大多经过某种“美化平均”。1.3 细节层面组件单调缺乏手工痕迹我在做某企业内部数据后台的改版时发现模型生成的表格工具条只有“新增、编辑、删除”三个按钮筛选条件都是“时间、状态、关键词”分页永远是“首页、上一页、1/2/3、下一页、末页”。这些组件单独看没问题但组合在一起就会让人感觉“这页面我好像在哪见过一千次”。真实的后台页面不是这样的。有的页面会有行列级权限说明会有批量导入按钮会有导出格式下拉框会有针对不同角色显示不同列的复杂逻辑。这些“带有业务气息的细节”才是一个页面不像 AI 的关键而这些东西恰恰是最难通过提示词一次性描述清楚的。把这三个层面的问题列成一张自检表我在后续搭建参考库时就有了明确方向找的参考样本必须能覆盖——不对称布局、不均衡留白、内容密度有起伏、细节组件足够“原生”。2. 参考库的选料标准什么样的网站才算“不像 AI”的样本参考库不是收藏夹更不是图片堆砌。选料的标准直接影响后面 AI 的学习效果这一节我把自己踩过的坑和最终沉淀下来的规则都写出来。2.1 收“真实业务页面”而不是“炫技设计”最开始我犯过一个错误跑去设计灵感社区挑了几十张获奖作品截图塞进参考库觉得这些页面够“高级”AI 学出来肯定没问题。结果生成的页面确实变好看了但不像是能用在实际项目里的页面倒像是设计稿展览。为什么会这样因为获奖作品通常在视觉上极度风格化信息密度被刻意压低留给视觉表演的空间很大而真实业务页面的核心任务是让用户高效完成任务。所以我后来定了一条硬性标准只收“真实运行中的业务页面”比如官网的定价页、帮助中心、工单系统、后台数据看板、企业服务平台的文档页、SaaS 产品的落地页。这些页面技术上不一定惊艳但信息组织逻辑扎实组件的颗粒度细页面里的每一块内容都有它存在的业务理由。这种“理由感”是 AI 最缺的东西。2.2 “手工痕迹”是硬通货我把“手工痕迹”定义为以下这些特征边框粗细不统一但视觉和谐、阴影深浅随元素层级有微妙变化、字体字号的选择透露出“这里重点关注、那里可看可不看”的判断、按钮的圆角大小不一致但整体气质统一。这些细节非常微妙说不出具体规则但真人设计的页面几乎必然有。怎么验证一个页面有没有这种痕迹有个土办法把页面截图缩到很小小到看不清文字只看整体灰度分布。如果灰度的层次超过五种且明暗过渡不是渐变的而是有棱角的块状分布大概率是手工修过的页面。相反如果灰度层次非常平均、均匀分布那多半是模板或 AI 默认产物。用这个办法我淘汰了大约 40% 的截图留下的页面都经得起缩放考验。2.3 可进与别进的对照清单为了减少主观判断的影响我做了一个简单的对照表可以进入参考库不要放进来有真实导航结构和面包屑的页面纯概念设计稿、Behance 式视觉展示页数据表格、筛选器、批量操作齐全的后台页面只有单一 Hero 图的单页落地页有复杂权限说明、会显示不同的操作列的页面只有固定三栏布局的博客模板内容密度随业务权重起伏明显的页面所有区块高度长度均衡对称的页面有明显品牌色但不滥用、灰度层次丰富的页面全站只有一个主色且大面积铺色的页面我不太纠结页面的设计“高级感”更看重的是页面信息组织的复杂度。一个复杂的真实页面哪怕视觉平淡它给 AI 带来的“信息密度样本”远比一张漂亮但空洞的截图有用。2.4 样本的“可学习性”比精美度更重要有些页面虽然好但它的好来自非常强的品牌独特性——比如某个大厂的吉祥物、某个产品独有的插画风格。这种页面放进参考库AI 学到的往往是表面的视觉符号一旦用到别的项目里就会显得生硬。我后来定的标准是优先收“优质通用性”强的页面样式和结构可以被迁移到多种业务场景。如果一个页面 80% 的组件换到另一个行业后依然合理它就值得收如果只能靠那几个 logo 和插画撑场面就不值得收。3. 落地实操从零搭一个“人味参考库”的完整流程选料标准定了接下来就是干活。我这个参考库是从零开始搭的大概花了一个周末加两个晚上目前有 300 多个页面样本。这里把整个流程拆成采集、清洗、归档、维护四步每一步都有一些具体操作细节。3.1 采集整页截图优先但别只存图片我的主要采集方式有三种浏览器书签、整页长截图、单组件局部截图。对比下来整页截图的利用率最高因为 AI 需要看一个页面的整体信息架构而不是孤零零的一个模块。工具上没有太多讲究浏览器自带的截图功能就够用。一些第三方截图插件可以标注意见但我实际用下来发现标注这个动作一旦做多了会拖慢采集速度让人很快失去动力。更实际的做法是截图完直接丢进归档注释在第四步统一补。3.2 清洗去掉动效、广告和干扰元素采集回来的页面不是全部都能直接用。有的页面用了大量轮播图静态截图根本展现不出动态效果有的页面顶部挂着营销横幅会把整个页面布局带偏。我的清洗规则很简单页面有轮播或折叠内容时尽量多截两种状态展开前、展开后但折叠状态只保留一种去掉悬浮框、Cookie 弹窗、在线客服气泡所在的区域如果一个页面太多弹层挡住主体内容直接放弃别浪费时间确保截图分辨率足够大至少能看清四号字左右的文案清洗这个步骤最容易被跳过但非常重要。脏样本进参考库模型学到的是带干扰的信息结构后面生成的页面也会充斥着莫名其妙的区块。3.3 归档按“页面类型 业务场景”双维度分目录归档方式直接决定了后面投喂的效率。我试过按网站名归档、按收藏时间归档都不好用。最后稳定下来的是双维度结构一级目录按页面类型二级目录按业务场景。参考库/ ├── 01-官网类/ │ ├── 企业官网/ │ ├── SaaS产品官网/ │ └── 个人作品集/ ├── 02-后台管理类/ │ ├── 数据看板/ │ ├── 表单审批/ │ └── 用户管理/ ├── 03-文档帮助类/ │ ├── API文档/ │ ├── 帮助中心/ │ └── 入门指南/ ├── 04-电商交易类/ │ ├── 商品列表/ │ ├── 购物车/ │ └── 结算流程/ └── 05-内容阅读类/ ├── 长文排版/ ├── 图文列表/ └── 社区帖子/每个样本的文件名也有规矩页面类型_业务关键词_序号。比如“后台管理_数据看板_017.png”这样在需要找某类参考时一眼就能定位。不要用“截图20250101_01.png”这种命名方式等库里超过一百个文件时找起来会让人崩溃。3.4 一句话备注样本的灵魂这一步是我从踩坑中总结出来的。只看截图AI 很难理解“这个页面为什么好”但如果在每张截图旁边配一句话说明效果会完全不同。比如“该页面用大面积空白突出搜索功能搜索框上方无任何干扰底部用一行浅灰文字提示快捷指令”“数据表格的行距偏宽但表头行距极窄形成了明显视觉分隔”“页面左侧固定导航极窄右侧内容区超宽比例接近 1:4非传统的 1:3 分割”这些备注在投喂阶段会被直接写进提示词里等于在给模型做“看图说话”的引导。没有备注的图片只是一张图有了备注的图片就是一个可学习的知识单元。我的经验是一句话写 20 到 50 字足够写多了维护成本太高写少了信息量不够。维护方面我定了一个季度一清理的节奏覆盖率低的类型补新样本三个月以上没被用到过且年代感过重的样本直接删掉。页面设计风格迭代很快2023 年的“现代风”放到现在就已经有些过时了别让过时样本拉低模型的审美基线。4. 喂给 AI 的正确姿势提示词结构与投喂节奏参考库建好了怎么“喂”是有讲究的。直接跟模型说“参考这个参考库里的风格”是不行的它会迷路。我试过几次之后摸索出了一套自己用着舒服的提示词结构以及在生成过程中调整投喂内容的节奏。4.1 一次性只喂 3-5 个样本不要整库丢进去这是我吃得最深的一记教训。早期我图省事直接把整个参考库压缩包路径或者说几十张截图一次性丢给模型告诉它“参考这些页面的风格生成一个官网首页”。结果是灾难——模型像选择了所有风格的平均值生成了一个不伦不类的杂交页面既有后台表格的密度又有落地页的留白信息层级混乱到没法看。后来我把参考步骤改成了“少而精”每次只挑 3 到 5 张与本次任务最相关的截图喂进去。比如这次任务是生成一个数据看板页面那就只挑 3 张不同业务类型的数据看板参考图这次任务是设计一个登录页那就挑两种差异明显的登录页风格。样本越少模型越容易抓住共同特征而不是被样本间的差异带偏。4.2 参考样本 备注说明 任务约束 负面清单只给图片不给说明模型还是容易犯糊涂。我在实际使用中总结出一个四段的投喂结构第一段角色设定告诉模型你现在的角色是什么比如“你是一名信息架构扎实、偏好非对称布局和真实业务组件的 Web 产品设计师”。第二段参考样本把选好的 3-5 张图依次贴进去每张图后面带上我事先写好的一句话备注让模型知道我关注这个页面的哪些具体特征。第三段任务约束明确页面要承载的功能点、内容模块、目标用户。这里重点写“业务约束”比如要有筛选器、要有权限提示、要有行内编辑而不只是“做一个好看的后台”。第四段负面清单明确告诉模型不要出现什么。我常用的负面清单有不要左右镜像对称布局不要所有卡片等大等距排列不要用渐变背景加白色圆角卡片这种万能模板不要均匀分布关键词密度不要出现“赋能、抓手、闭环”这类空词。这套结构跑下来比我以前直接写一句“请帮我设计一个 XX 风格的后台页面”的效果稳定得多。4.3 投喂节奏首版、回注、再投喂的循环参考库喂一次是不够的。我现在的工作流是三轮循环第一轮用上面的四段提示词生成首版第二轮把首版页面中“最不满意”的区域截图单独再找一张参考图中对应的相似区域重新投喂要求局部修改第三轮把第二轮的修改结果和最终要保留的内容整合再整体检查。还有一个比较有意思的动作叫“回注”——把生成结果中效果最好的那一版页面截图重新存回参考库。这个动作看起来反直觉明明是 AI 自己生成的东西怎么还能当作参考但实际验证下来只要比原有样本更适合当前项目风格回注样本在下一次生成任务中就能提供更强的上下文贴合度。相当于把模型“这次生成得不错”的部分固化下来成为以后输出质量的垫脚石。4.4 一个可直接套用的提示词模板把我一直在用的模板简化之后大概是这样的以数据看板为例请扮演一位信息架构扎实、擅长真实业务后台页面设计的产品设计师。 参考下面几份页面截图我关注的要点如下 - 图一后台A-数据看板-017页面左侧导航极窄和内容区比例接近 1:4不采用传统三等分布局 - 图二后台B-销售看板-003卡片高度差距明显首屏左侧大卡片是右侧卡片高度的两倍制造视觉层级 - 图三后台C-监控大盘-005表格行距偏宽但表头紧凑用间距而非分割线来区分区域 任务要求 - 设计一个面向内部运营团队的数据看板包含核心 KPI 卡、趋势趋势图、表格、操作日志四个模块 - 数据密度要高组件类型尽量丰富不要为了“简洁”删减功能 - 区分不同角色的关注点运营经理看重概览和异常提醒一线员工看重待办和流程进度 负面清单 - 不要左右完全对称的布局 - 不要所有卡片等大等距 - 不要大段背景渐变加白色卡片 - 不要出现“赋能、抓手、闭环、沉淀”等词汇 - 不要为了视觉平衡而牺牲信息层级这个模板不一定适用于所有项目但结构可以参考给身份、给样本、给业务目标、给禁忌四类信息缺一不可。5. 实测对比同一句话、两种投喂方式的真实差距说了这么多理论直接上实测数据。我拿一个真实的内部项目做了对照测试——某公司的库存管理后台的重设计同一个模型、同一个任务描述区别只在“有没有喂参考库样本”。5.1 对照组设置对照组 A直接给模型描述“帮我设计一个库存管理后台页面要包含库存总览、入库记录、出库记录、低库存预警”不给任何参考图。对照组 B按上面第四节的四段结构喂三张库存类后台截图加备注再加任务约束和负面清单。两个版本的页面我都跑完了然后从信息架构、组件丰富度、文案质量、视觉节奏、整体观感五个维度做对比。这不是量化实验但也找了三个同事盲评要求说不出具体哪版更好只凭直觉打分结果可以从下面的表里看出来。5.2 对比结果维度对照组 A无参考库对照组 B喂参考库信息架构上下三段式内容都放在一个大卡片里宽屏下信息利用率低筛选区占首屏约 30%左侧 260px 导航加右侧内容区筛选器缩到一行可折叠表格直接铺满首屏信息利用率高组件丰富度只有表格、筛选器、按钮、分页四类增加了批次折叠面板、状态标签组、批量操作条、导入导出按钮、行内编辑入口、低库存高亮标记文案质量“实时库存数据一目了然”“智能预警出库波动”等空词用了真业务语境比如“SKU 总库存 3,241”“近 7 天出库量环比下降 8.2%”“上海仓盘点中”没有口号式描述视觉节奏所有卡片等宽等高灰度层次均匀整体看起来像仪表盘表格行高和卡片间距有明显变化左上角放了一个通栏的库存总览卡片右下角留了四分之一空白整体观感一眼就知道是模型生成第一眼觉得像某个真实公司在用的系统甚至有人问这是不是某个开源项目改的5.3 一个让人意外的局部差异一个细节让我印象很深对照组 B 在表格的每个序号前自动加了一个“详情”链接入口而且只在部分行出现了“加急处理”的小标签。这个设计我不知道为什么会出现——参考图里并没有明显的对应组件但从业务逻辑来看它符合后台页面的真实习惯。后来我想明白模型从参考样本的“信息密度”里学到了一个隐含规律真实页面里每一行数据需要不同的操作入口而不是统一的一排按钮。这种“学到的规律”比具体的样式迁移有价值得多。5.4 盲评结果与我的个人判断三个同事的盲评结果是两个认为 B 明显更专业一个认为 B 更接近真实系统但觉得稍显复杂认为 A 更适合给客户做演示。这个反馈也验证了我对参考库的一个观点参考库的样本决定了 AI 输出的“可信方向”。如果参考库里的样本是真实业务后台AI 就会往专业化、复杂度方向靠如果样本都是设计稿AI 就会往演示化、美观化方向靠。选料标准的重要性在这里体现得淋漓尽致。6. 常见问题与边界参考库不是万能的这些坑也很关键参考库确实改变了 AI 生成网页的质感但它并不是“万能药”。在使用过程中我踩过不少坑也摸索出一些边界这里统一写出来帮大家省点时间。6.1 参考库不等于代码库别指望“复制样式”很多人把参考库理解成“给 AI 看的素材包”希望模型直接照抄参考页面的布局和样式。按我的经验模型并不会真的照抄它更擅长的是“理解样本背后的结构规律”。同样是参考一张卡片式后台截图模型可能学会的是“卡片间距要大、卡片内信息密度要高”而不是“把这张图原样搬过来”。所以不要把参考库当作复制素材。想复制具体样式直接把代码喂给模型更省事但那又是另一套玩法了。参考库解决的是“气质问题”代码片段解决的是“实现问题”两者不要混用。6.2 “过度模仿”才是最常见的翻车方式喂了参考库之后AI 又会往另一个极端走——过度模仿。比如参考了一张“大量留白”的页面模型会把所有内容都塞进可怜的一小块区域首页显得空空荡荡参考了一张“表格行距偏宽”的截图模型会把所有表格的行距都拉得很宽页面信息密度骤降。我现在的应对办法是每次投喂前先检查参考样本之间的“共性特征”如果多个样本都有某个共同点那这个共同点就是模型会放大的方向如果只有一个样本有某个特征其他样本没有那在负面清单里明确写一下“不要突出某某特征”防止模型抓住孤例不放。6.3 参考库维护要克制别让旧风格污染新项目页面设计风格迭代得很快。我参考库里 2024 年初收集的一些卡片式设计放到 2025 年再看已经明显过时了。模型训练数据本身就有时间滞后性如果我们喂给它的参考库还是老风格等于把模型的风格指针往后拽生成的页面会更显陈旧。我的做法是每季度做一次“风格体检”把参考库里一年前的样本全部过一遍只要觉得“放到现在的项目里明显违和”就直接删掉不要犹豫。宁可参考库精一些也不要让它变成一个过时风格的仓库。6.4 不是所有任务都需要参考库最后一点可能有些反直觉不是所有生成任务都需要参考库。像“生成一个个人 Blog 的文章列表页”“生成一个静态的活动落地页”这类简单页面直接让模型自由发挥往往就够了因为模板化不一定不好——有时候模板本身就是最合适的方案。只有在需要“像真东西”的场景下比如后台系统、企业官网、带有复杂信息结构的业务页面参考库的投入产出比才最高。工具是死的场景是活的。不要为了用参考库而用参考库我的判断标准很简单如果这个页面生成后目标用户能觉察出“这是 AI 做的”那就值得用参考库如果觉察不出来就别花那个精力了。我在实际操作中最大的体会是参考库本质上不是给 AI 找素材的地方而是帮 AI 建立“真实世界的审美坐标”。它让模型从“平均化的美”走向“有理由的准”。如果你也在被“AI 味”困扰不妨从建一个自己的小参考库开始——不用多先收 50 张符合你业务场景的真实页面再加上一句句备注跑一轮对比看看应该就能感受到差别。还有一个我个人觉得很有用的小技巧每次用参考库生成完页面后把效果最好的那一版单独存回参考库并标注“高质回注样本”这个动作相当于给模型做一次“就地取材的增量校准”持续积累参考库会越来越懂你想要什么。