最近一直在用 AI 辅助做网页。做是做得快可每回打开生成结果总有一种说不出的别扭——你知道它是什么类型什么结构甚至猜得到按钮在哪儿但那种“AI 味”扑面而来千篇一律的圆角卡片、紫色渐变、居中 slogan、自动轮播图就差把“我是模板生成的”写进页面里了。后来试了个笨办法专门给 AI 准备了一个参考库把它的审美偏好“掰”过来。效果立竿见影生成出来的页面终于不像 AI 的手笔反而像某个有设计洁癖的开发者自己搭的。这篇就聊聊参考库怎么建、怎么喂、怎么迭代以及我在实际操作里踩过的坑。想让 AI 少一点模板感、多一点人味的初学者、独立开发者、产品同学都会用到里面的方法。我尽量不写虚的全是可复现的做法。1. 先说清楚AI 生成的网页为什么总有一股“AI 味”想要解决一个问题先得知道根源在哪里。AI 味不是偶然而是统计规律下的必然。理解这一点之后参考库的方向才不会偏。1.1 “平均脸”效应模型默认会输出最安全的组合大模型在训练时看了数以亿计的网页其中绝大多数是主题模板站、建站工具的导出页面、营销落地页、博客主题。这些页面本身就高度相似顶部导航、居中 hero、三列特性卡片、客户评价、价格表、底部 CTA 和页脚。模型学习的是“网页长什么样”的平均分布于是它生成页面时也会倾向于输出这个分布的中心区域——就像美颜相机把所有人的脸都修成同一个平均脸一样。这个平均脸的具体长相想必大家都不陌生大圆角按钮、柔和阴影、蓝紫或蓝青渐变、白色背景配单色 icon、首屏居中的大字号标题加一句副标题。为什么 AI 这么喜欢这些元素因为在它见过的页面里这些元素的出现频率实在太高了而带强风格的页面数量相对少很多。模型为了让自己生成的文本“像那么回事”自然会选择概率最高的视觉组合。这里就能得出第一条经验你想让 AI 跳出平均脸不能指望它自己“灵光一闪”你得明确告诉它“不要用平均脸”并且给出你想要的替代品。光是两个字“更高级”是没用的模型只会理解成调低饱和度的渐变和更细的英文字体。1.2 文字与结构上的同质化陷阱除了视觉元素AI 在文字和页面结构上也有明显的套路。结构上永远是 Hero - About - Features - Testimonials - Contact 这一套连顺序都懒得变。文案上则充斥着“欢迎来到我们的世界”“开启你的旅程”“让生活更简单”这类不痛不痒的废话。这些问题的本质是模型的语言惯性。它见过太多“通用型文案”于是在你没给具体要求时它就会选择那些放之四海皆准的短语。而同质化结构则是因为在它的训练数据里绝大多数页面就是这种模块化组合。要让页面不像 AI就必须从结构、文案、视觉三个层面同时打破默认值。怎么打破靠模糊的提示词不行靠的是——给它喂一个“参考库”。参考库存在的意义是把那些概率不高的、但真正有价值的风格样本从统计分布的边缘抬升到模型输出时的高概率区域。说人话就是把 AI 原本不常用的风格通过你提供的上下文变成它的首选项。2. 参考库的思路不是找一堆网址而是给 AI 一套“审美上下文”很多人听到“参考库”第一反应是那我给 AI 丢十个优秀网站链接行不行实话说基本没用。因为 AI 无法实时去浏览那些网站就算你给了 URL它也只能在已有知识里猜一个大概。真正的参考库不是网址列表而是一套经过提炼的、AI 能直接理解的“审美上下文”。2.1 参考库到底装什么不是越多越好我建议按当前项目去构建参考库而不是漫无目的地收集。比如你这回要做的是一个咖啡豆品牌官网那参考库就应该包含3—5 张你喜欢的品牌官网截图、几个你偏好的字体与配色描述、2—3 条你希望页面具备的“气质关键词”。如果做的是个人作品集参考方向就完全不同。重要的是“少而准”。我见过有人一股脑塞了 30 张参考图结果 AI 东拼西凑做出来四不像。参考库的信息密度如果太高模型注意力会被稀释每个特征都只学了一点点最后出来的反而比没有参考更乱。我通常每个项目只选 3 到 5 个样本并且这些样本必须相互之间有一定共性。要么都是同一个设计流派要么都在排版方式上有共同点。同时参考库不必全是现成网页。海报、画册、杂志版面、UI 界面、甚至工业产品照片都可以成为参考。AI 做网页不一定非得参考网页重要的是让它理解你的审美倾向而不是让它去复刻某个具体网站的布局。2.2 把参考库“翻译”成 AI 能理解的语言设计规范与关键词这一步是整个方法的核心。截图和源码确实可以喂给模型但最稳定、最可控的方式是把参考库转换成文字化的设计规范。我从每一张参考图里提取出来的东西通常包含颜色系统主色、辅助色、背景色以及它们的使用比例。字体选择具体字体名或字体类别衬线、无衬线字号层级标题是否加粗。布局逻辑对齐方式、栅格间距、区块分割方式。圆角与阴影明确圆角大小阴影有无。图片风格摄影还是插画冷色调还是暖色调是否有人物。组件细节按钮形状、导航样式、表单样式。禁忌清单禁止出现渐变、禁止使用某类图标、禁止首屏轮播。例如我看到一张瑞士风格的海报会写下“标题使用 Helvetica 或同等几何无衬线体字重 700左对齐不居中正文与标题之间用 2px 黑色分割线背景为 #F5F1EB全页不使用圆角不使用阴影不使用渐变。”这个描述远比一张截图有用因为截图在模型眼里是一堆像素但它理解不了其中的设计决策。而文字描述可以直接成为约束条件。2.3 参考库的三种喂法对比我实验过三种主流喂法各有适用场景列出来给大家参考第一种是直接贴参考代码或文字片段。适合小规模参考比如一段 CSS 变量、一段按钮样式、一个特定的布局片段。把它粘在 prompt 里要求 AI 严格遵循。优点是精准缺点是不能太长否则模型会失去重点。第二种是给截图/图片让多模态模型直接看。适合整体风格参考。大部分时候有效但模型对截图细节的理解有限它可能记住了配色但忽略了字体记住了布局但忽略了间距。而且如果截图里有具体品牌 logo 或文字模型可能会“借鉴”得很明显。第三种是把参考库构建成一个文档用嵌入向量做检索让 AI 在回答前自动找到相关参考。适合长期维护一个团队设计系统或个人风格库。这套方案最稳定但前期成本高需要搭建检索流程不太适合偶尔做一两次页面的人。我的建议是随手做一两个页面用“文字规范为主配合 1—2 张截图”的方式就够了长期做网站的人才值得花半天时间去搭一个可复用的检索式参考库。下面进入实操部分这才是重头戏。3. 实操过程用三次迭代把参考库变成 AI 的风格锚点我会用一个虚构的小项目来演示完整流程。假设我要做一个“老式机械键盘品牌”的独立站首页目标风格是偏瑞士国际主义、带一点早期网页的粗边框感整体硬朗、克制、不花哨。这个风格天然远离默认 AI 模板适合做例子。3.1 构建参考样本与设计规范我先不急着写 prompt而是花了半小时整理参考库。我从素材库里挑了三张图一张是上世纪中期瑞士平面设计展海报主要表现为网格系统、无衬线字体、大面积留白、强烈的几何分割另一张是某工业产品的说明手册内页表现为全大写标题、编号系统、黑白图片排版还有一张是某个有着 HTML 早期粗犷感的个人开发者网站页面表现为系统字体、无修饰的表格布局、纯色背景。然后我把这三张图各自转成了一段设计偏好描述。综合后得到了这样一份设计规范全局 - 背景: #F2EFE9 米白 - 前景: #1A1A1A 黑 - 强调色: #C84E2B 铁锈红只用在小面积标签/按钮 - 字体: Helvetica / Arial / system-ui标题字重700正文字重400全部左对齐 - 间距: 区块间距至少 64px内部间距 24px 或 48px - 圆角: 0边框: 2px solid #1A1A1A用于分割区块和卡片 - 图片: 黑白硬光有颗粒感不使用彩色照片 - 按钮: 直角无阴影默认背景为 #1A1A1A文字白色hover 时背景变 #C84E2B - 禁止: 渐变、阴影、圆角、居中的大段文字、轮播图、图标库里的通用图标、紫色 结构 - 顶部一个纯文字条幅产品名称 年份 菜单纯文本链接不用按钮 - 主视觉区左侧产品大图黑白右侧一行超大字标题 两行说明文字 - 下方3 列规格参数用 2px 边框分隔不加背景色 - 底部邮箱订阅用一个矩形输入框 一个黑色按钮这里有个细节我把“间距至少 64px”写进规范是因为 AI 默认的间距常常太紧凑导致页面显得小气。而给出了明确数值它就不会乱发挥。3.2 第一轮只喂参考图的效果第一轮我尝试只把三张参考图和一句“做一个机械键盘品牌首页参考这几张图”丢给 AI。生成的结果只能用“失望”来形容页面确实用上了米白色背景和黑色粗字体但整体布局依旧是标准模板——顶部居中导航hero 里左图右文下方三张卡片各配一个图标按钮还带上了圆角。最让人无语的是它给我放了一个轮播图区域页面潜意识里非要“动起来”不可。说明什么呢只给图模型只能看到颜色和整体氛围抓不住具体的布局和组件边界。你让它参考一张海报做网页它还是会把网页的结构套上去因为网页结构在它脑子里根深蒂固。这一轮我确认了一个结论对 AI 来说参考图只能做氛围调味不能做布局定盘。要想让它突破结构套路必须把结构特征也文字化写进规范里。3.3 第二轮把规范作为硬约束重做第二轮我把上面那份设计规范完整贴进了 prompt并且做了三处调整把规范放在 prompt 最前面在结尾重复了一遍核心禁忌要求它直接输出 HTML 页面而不是给一个方案描述。prompt 大致长这样你是一个遵循极简瑞士风格的前端开发者。下面是一份设计规范你生成页面时必须严格遵守不得擅自增加规范外的样式。 [粘贴上面的完整设计规范] 注意事项 - 不要使用任何图标字体或图标库如可用几何图形、文字符号代替。 - 禁止出现 Bootstrap、Tailwind 风格卡片。 - 所有区块之间用 2px 黑色边框分隔不要留白过多到松散。 - 图片用黑白占位图使用 figure 包裹并加编号。 现在生成本页面的 HTML 和配套 CSS。生成结果比第一轮强了不少布局变成了我所要求的“顶部条幅 左侧大图右侧文字 底部三列规格参数”按钮也变成了直角黑块圆角为零。但还是暴露了两个问题第一它给按钮加了一个极其常见的渐变动效作为 hover我明明写了“禁止渐变”它却把渐变用在了交互反馈上第二它把页脚做成了常见的“XX © 2024”居中样式跟我其他的纯左对齐风格不协调。这轮给我的启发是AI 对“禁止”的理解是局部的它很容易在整个设计里找地方“泄洪”。你禁止了它用渐变做背景它就会给 hover 效果用渐变你禁止了圆角它就给分割线悄悄加一条。所以后来我把禁忌清单写得非常琐碎不只“禁止渐变”还要补一句“任何状态、任何元素包括 hover、active、伪元素都不允许使用 gradient”。同时每个区块的布局和文字对齐方式也需要单独指定不指定它就默认居中。3.4 第三轮从“喂参考”到“定标准”把参考库固化下来第三轮我换了一个更彻底的思路不再每次在 prompt 里贴一遍规范而是把这个项目规范保存成一份独立的 markdown 文件并且把里面的设计 token 提成代码变量。在生成前我会先让 AI 读取这份文件然后我把项目需求附加在后面。这样 AI 不再是“临时参考”而是在一套长期标准下工作。我建议把规范文档分为三部分第一部分是全局设计 token颜色、字体、间距、圆角、阴影、图片风格第二部分是典型组件规范导航、按钮、卡片、表单、页脚第三部分是禁忌清单。像这样:root { --bg: #F2EFE9; --fg: #1A1A1A; --accent: #C84E2B; --space-unit: 24px; --stroke: 2px solid #1A1A1A; --radius: 0; --shadow: none; --font: Helvetica, Arial, system-ui, sans-serif; }把视觉规范转成 CSS 变量再让 AI 按这些变量写组件出错的概率会大大降低。因为变量名本身就是语义模型的输出就会自然收敛到你的设计系统里。用这套方式生成的第三版页面终于看起来像是一个有独立审美的产品首页了机械键盘是黑白硬朗的标题是左边顶格的大字参数栏用边框区隔中间的红色标签只出现在“购买”按钮和年份编号上。拿给我朋友看他说这更像手工调过的页面不像 AI 一天能生成的。只有一条经验分享一下如果你的最终目标是长期生产网站别怕花时间把规范整理成文档。这个文档本身就是你最重要的资产以后所有 AI 生成页面都能直接用越用越精准。4. 常见问题与排查技巧实录用了这套方法一段时间我遇到了不少衍生问题这里挑最有代表性的几个附上我的排查思路和解决办法。4.1 AI 忽略参考库怎么办这是最常遇到的。把参考库塞进去AI 依然我行我素继续给你输出紫色渐变卡片的营销页。排查顺序如下先检查参考是否超过了模型的上下文窗口。如果你的参考库内容太多比如贴了好几份完整 HTML 源码模型在生成时早就忘掉了最前面的要求。解决方法是把关键规范放在 prompt 开头并在最后再次重复最重要的禁忌。中间加一句“上述约束必须无条件执行”。再检查参考库是不是文字性的。截图对多模态模型有效但如果是纯文本模型你给了 URL那等于没用。最后确认你是不是同时给了多个风格互相冲突的参考。比如参考图里的字体是现代极简可你的文字描述里说的是复古衬线体模型会用自己的理解去调和结果哪个都不像。时刻记住参考库必须内部一致宁缺毋滥。4.2 参考库被过度模仿做得像抄袭怎么办这是反向问题AI 太听话了把你给的参考截图里面的 logo、slogan、甚至具体文案都原封不动搬过来。多数是因为你把截图或完整源码直接丢给 AI它认为“照抄”最安全。解决办法是把参考库抽象成描述而不是给源码。比如不要给一个完整的电商页面的 HTML而是只提取它的“分割方式、留白比例、字体层级”描述。如果是截图可以只截局部如只截一张产品卡片的排版或导航区域避免出现整站信息。另外交代码前明确告诉 AI“不得使用参考站点中的品牌名、文案、logo只借鉴视觉语言和排版逻辑。”更实际的做法是在生成之后做一次“洗稿”。把 AI 输出的页面里的标题、配图、文案全部换成你自己的内容只保留骨架和风格。这跟做设计时借鉴参考图是同一个道理本质是翻译不是复制。4.3 上下文装不下参考库怎么办API 的直接上下文有限哪怕是大窗口模型塞多了也会导致注意力漂移。我的解决办法有三个。第一个办法压缩参考库。把图片风格的文字描述从一大段精简为几行 token。比如“字体: Helvetica圆角: 0阴影: none图片: 黑白边框: 2px solid”把规范变成最小化的属性列表。这样能在很小的空间内传递最多的信息。第二个办法只加载当前阶段需要的组件规范。如果一个页面有导航、卡片、表单、页脚四块不要一次性把所有规范全发过去而是让 AI 先生成一块生成完再给下一块规范。这样可以保证每一块都是高质量的。第三个办法如果你长期使用参考库把它做成一个外部接入的检索工具。在提问前用向量检索把与当前需求最相关的两到三条记录拿出来拼进 prompt而不是每次把整个库放进去。这条适合有技术能力的人需要搭一个小服务但对团队来说收益很大。4.4 生成了还是显得单调怎么破即使规范约束很严AI 做出来的页面仍然可能“干净过头”——没有细节没有真实感。这时候我会做三件事一是增加视觉噪点和纹理。比如在背景里加一层细微的纸纹、网格、噪点透明度用几行 CSS 就能做到但效果瞬间从“人工建模”变成“真实产物”。二是人工微调字体与间距。AI 对字体的把握通常太“平均”我拿到代码后会手动把大标题的字号调大段落行高调高单词间距拉开一点。极细微的调整就能去掉那层“AI 感”。三是给动效加一点“物理感”。AI 写的 hover 大多是简单的 opacity 或 translateY我把它们改成带缓动曲线和回弹效果的动画让页面动起来更像一个定制开发的产品。这一点是 AI 现阶段很难自己搞定的部分也是你作为人工设计师的增值之处。5. 个人实践中的几点补充心得做了一段参考库之后我最大的体会是AI 生成网页不像 AI关键不是让 AI 变聪明而是给它一个足够清晰的边界。参考库起到的作用不是“参考”而是“定心丸”——让模型不必在广阔的概率空间里自由发挥而是聚焦到你给定的那片区域里。实际操作中我发现把“禁忌清单”写得比“推荐清单”更具体效果尤其明显。禁止使用渐变、禁止圆角、禁止图标库、禁止自动轮播这些硬性否定能把最容易出 AI 味的元素一刀切掉。而推荐清单只需要给出几个关键风格特征剩下的让它自由发挥即可。这样既保住了风格又保留了 AI 的创造力页面不会生硬刻板。另外参考库是要“养”的。第一次建好一个项目用完后我很建议回头看看生成结果哪些部分比较满意哪些地方虽然被禁了它还是违反或跑偏。把这些教训补进禁忌清单里下次它就会避开雷区。我的参考库现在已经从最初的三条规范扩展到了八十多条涉及字体、配色、布局、交互、图片风格等。每次用 AI 做新页面花费的时间都在大幅下降从原来改七八轮到现在基本一轮定稿。这个方法不只适用于独立站首页同样可以扩展到产品官网、作品集、组件库、甚至 UI 设计系统的生成。只要能把它转化成规范文字AI 就能安分地做出有个人印记的作品。与其抱怨 AI 审美平庸不如花一下午时间建一个属于自己的参考库这可能是你今年在 AI 工作流里最值得做的一项投资。