1. 一眼识破的“AI味”问题到底出在哪里如果你最近也在用 AI 生成网页大概率见过这样的页面全宽 Hero 区、居中放一行超大标题、下面跟着三个带小图标的特性卡片再往下是几张圆角截图展示最后压一条深色 CTA。版式本身没什么错误但所有页面都长着同一张脸就很容易让人脱口而出“这是 AI 做的”。我一开始没把这事当问题。页面能用、代码能跑就行客户问起来就说“我们用了最新技术”。直到有个朋友盯着我做的页面看了三秒问了一句“你这个是用某某 AI 生成后直接改的吧”我才意识到那股味道已经明显到行外人能一眼看穿的地步。后来我花了很长时间分析这种“AI味”到底从哪来才慢慢摸到解决它的关键给 AI 一个参考库而不是让它凭记忆自由发挥。这里说的“AI味”不只是布局。更明显的是视觉细节默认的紫蓝渐变、玻璃拟态卡片、24px 大圆角、hover 时轻飘飘的悬浮阴影还有文案里那些“赋能”“解锁”“无缝体验”之类的空转形容词。最让人难受的是排版节奏——间距均匀得不像人排的每一块内容的留白都一样大像用网格纸画出来的缺少人做设计时那种有意识的进退和错落。为什么 AI 会这样先理解它的工作方式。大语言模型生成网页时本质上是在一个字一个字地猜“最可能出现的下一个 token”。它见过的网页语料里绝大多数是各种后台管理系统模板、建站工具默认皮肤、前端框架起步示例。当对话里没有强约束时模型走的是语料里出现频率最高的那条路。它不是在设计它是在统计“大多数人会怎么做”。设计师和 AI 最大的区别在于判断。设计师知道什么不该做不会在极简页面里突然塞一个渐变按钮不会在一屏信息已经很满的情况下再加一层阴影。而 AI 没有“排除过错误答案”的经验它只见过最终被人选中的版本所以它很难理解“不要渐变”“不要大圆角”这种否定式指令。如果你不给它足够具体的正面样例它就默认回到均值。均值就是那股挥之不去的“AI味”。解决这个问题的思路也就清楚了与其用文字反复强调“不要什么”不如给它一个有明确审美坐标的参考库让它从具体例子里总结规律而不是从概率里猜均值。这个思路听起来简单真正做起来有不少门道。2. 参考库不是收藏夹系统性收集才能喂出想要的效果很多人听到“给 AI 喂参考”后的第一反应是把视觉灵感社区的收藏夹里那些好看的截图统统拖进对话框。这样做通常效果更差。收藏夹是一堆你“喜欢”的东西而参考库是一套能传达判断标准的样本集。里面的每一个条目都必须回答一个具体问题这个页面为什么好它好在布局、配色、字体还是留白哪些元素可以借鉴哪些绝对不能模仿我刚开始做参考库时也很兴奋地收集了一百多张截图结果喂给 AI 以后它给我生成一个集各家“特点”于一身的大杂烩第一张的标题排版、第二张的绿色强调、第三张的大圆角卡片凑在一起是个哪个都不像的四不像。后来我才明白参考库要的不是数量而是清晰度和一致性。2.1 先定场景再谈收集动手收集参考之前我会先写清楚接下来三到六个月我实际要做哪几类页面比如“一款数据分析产品的官网首页”“一个内部运营后台的列表页”“一份个人作品集”。这三个场景对应完全不同的视觉策略官网要讲故事、后台要密度和效率、作品集要个性。参考库一旦超出实际业务范围收集得再漂亮都是负担。每个场景下收集多少参考合适我的经验是每个子类保持 5 到 8 个有效参考就够了。少于 5 个模型可能总结不出规律多于 20 个它根本消化不了最后只会输出一个“平均脸”。如果你觉得某个场景值得收集 30 个那说明这个场景还可以继续拆分。例如“营销落地页”可以拆成“科技产品官网首屏”“活动专题页”“服务介绍页”每个子类单独建档喂的时候才不会互相打架。2.2 收集时顺手做像素级标注截一张全屏图只是第一步。真正让参考库产生价值的是标注。我会给每个参考页面写一小段结构化的备注包含版式结构、配色代码、字体层级、间距节奏、圆角阴影习惯、交互亮点以及可复用点和不可模仿点。为什么要手动标注因为模型从截图里未必能精确读出颜色代码和具体间距而且它倾向于忽略那些细微但决定气质的东西。举个实际的例子某个分析产品官网首页是这样的首屏左侧留出 40% 的空白只在右下角放了一句产品说明右侧用一张大图展示界面内容区采用非对称栅格第二屏故意错位一列背景是暖灰色、正文是深黑强调色只有一个暗橙。这个页面的气质完全来自“大留白”和“克制的色彩”而不是某个惊艳的装饰元素。如果光把截图丢给模型它大概率会学习成“产品官网要有大图展示”而丢掉留白和色彩的控制。我用下面这张表记录每个参考页面的信息场景标签参考页面特征版式结构配色字体与层级间距节奏交互亮点可复用点不可模仿点营销落地页某数据分析产品官网首屏左 40% 留白 右侧产品截图内容区非对称栅格背景 #FAF9F7文字 #1B1B1F强调色 #E16B4A无衬线字体标题 800 字重正文 400上下留白大区块间呼吸感强滚动时栏目线淡入克制配色、大留白、非对称布局不能完全照搬它的品牌文案和 Logo 组合B 端后台某任务管理系统左侧窄导航 内容区双栏列表白底灰色分隔线正文 14px数据 13px 等宽信息密度高间距紧凑行内编辑、批量操作折叠表格信息层级、紧凑间距不可使用它的私有图标库这类标注看起来费时间但每一条都在逼你思考“我到底想让 AI 学到什么”。等真正把它喂给模型的时候这些标注会变成 prompt 里的关键约束效果比单纯丢图好得多。2.3 存储方式简单不算过时混乱才是大忌参考库的存储方式不需要花哨。我自己用的是最朴素的一套浏览器全页截图加上关键交互的录屏按场景建目录用 Git 维护版本。文件命名尽量描述性质比如 home-saas-01-desktop-full.png、home-saas-01-mobile-nav.gif。每个参考页面对应一个同名 md 文件里面就是上表里那些字段的展开版。不建议把一整本视觉手册的 PDF 直接塞给模型。现在的模型能看图但对长篇视觉描述的阅读理解并不稳定信息太密集反而抓不住重点。更合理的做法是把参考页面拆成几个关键模块导航单独截、内容区单独截、底部单独截再配合一张全页长图。这样模型既能看清整体关系又不会因为长图分辨率不足而丢掉细节。参考库是一个持续迭代的东西。每次做完一个页面我都会回头看看当初收集的参考到底哪些真正有效、哪些只是“看起来好看”。无效的定期清理有效的保留下来。这和我们整理个人代码仓库是一个道理只有持续的维护才能让资产保值。3. 把参考库真正喂进对话三条通道按效果排序参考库整理好之后最关键的环节来了怎么把它“喂”给 AI喂的姿势决定了输出质量。这里有三个通道我按实际效果从低到高排个序你可以根据自己的场景选择合适的组合。3.1 通道一直接丢截图但别只丢截图最简单粗暴的做法是把几张参考截图直接粘贴进对话框然后说“照着这个风格帮我做一个页面”。模型确实会看图但如果你不引导它先做分析它只会模糊地吸收一些视觉印象输出的页面总是“有点像又有点不像”。我会把这一步拆成两轮。第一轮只传图不让它写代码而是明确告诉它“先不要急着写代码把这张图的版式结构、配色体系、字体层级、圆角阴影习惯、留白节奏逐项分析给我。”等它输出完分析我再提具体的页面需求。这样做的原因是让模型先把注意力放在“理解参考”上而不是一面看图一面又急着生成两边都顾不好。截图质量也是关键。整页长截图信息密度太低模型放大看会糊缩小看会漏。我会把复杂页面切成三到四块导航加首屏一块、内容区一块、底部一块配合整页长图一起传。图片宽度保持在 1200px 以上太小的图细节全丢参考价值大打折扣。3.2 通道二把截图翻译成一份视觉描述文档有些模型对纯视觉输入的响应不那么稳定或者你想让同一个风格跨多个会话复用。这时候我会把每个参考站点拆成一份风格描述文档。这份文档的价值在于它脱离了一张截图变成一套可复制的审美判断标准。我所说的风格描述文档不是“这个页面很好看”这种印象式评价而是把视觉特征标准化。下面是我常用的模板风格参考/ref/saas-site-01 布局首屏非对称左侧 40% 留白放文字右侧 60% 放产品界面截图 内容区采用 12 列栅格第二屏刻意错位一列制造节奏感 配色背景 #FAF9F7正文 #1B1B1F强调色 #E16B4A不允许使用紫色或蓝色渐变 字体无衬线标题字重 800正文字重 400行高 1.6 字阶固定为 44 / 32 / 24 / 16 / 13 圆角按钮 4px卡片 8px不出现无意义的大圆角 阴影基本不用只用 1px 浅色边框分隔元素 动效hover 时只改变文字颜色滚动时栏目分隔线淡入 坚决避免玻璃拟态、渐变背景、自动轮播、悬浮阴影写这份文档的时候注意一个分寸不要写“要高级感”这类抽象词要写“背景是什么样的、按钮是圆角还是直角、阴影重不重”这些能直接落到代码上的参数。模型对形容词的理解是模糊的对具体参数的理解是清楚的。第一次写会觉得麻烦写多了就会变得特别快因为你实际上是在建立一套属于自己的“视觉参数模板”。3.3 通道三直接给代码样本这招最稳如果你追求的是页面气质像同时代码也能保持干净只喂截图和文字描述还不够。模型生成视频时的代码风格也受语料影响让它自由写出来往往是一堆嵌套很深的 div 和冗长的 CSS。想让代码层面也像某个真实项目就得给它这个项目的代码片段作为样本。我从参考站点里抠出三到五段最小可用的 HTML/CSS 片段一个导航、一个首屏 Hero、一张内容卡片、一张表单。先把它们里的框架依赖、私有图标、多余装饰全部剥掉保留纯粹的语义化结构再放进对话。给这些代码片段的时候我会加一句约束“下面是我希望保持的代码风格参考它的结构、命名和 CSS 组织方式不要直接照搬里面的文字和内容。”这里有个容易被忽略的细节代码样本要控制数量同时风格必须一致。如果三个片段分别来自三个不同的项目模型学到了三种不同的命名习惯生成的代码就会特别乱。我的做法是每个参考场景只保留一套代码风格样本让模型学习的是统一的结构习惯。实际使用中我是把三个通道组合在一起用的两张同风格截图加一份风格描述文档再加一两段代码样本。一次给这么多会不会太多我的经验是数量守恒关键是给“同一风格方向”的素材而不是素材种类越多越好。如果参考里的截图风格南辕北辙模型一定会给你缝合的产物。4. 实测翻车现场喂了参考库输出还是不对怎么办理论说得再好真跑起来还是坑一个接一个。我把这一两周里反复翻车的几种情况整理出来每种情况都配了排查思路和修正方案你大概率也会遇到。4.1 缝合怪参考太多、风格打架第一次翻车就是前面提到的缝合怪。我一股脑上传了六张不同风格的截图结果模型像在开盲盒第一张的标题字号、第二张的绿色强调、第三张的玻璃卡片、第五张的布局全揉进了一个页面。单看每一块都合理拼在一起哪里都不对。排查下来问题出在我没有给参考分主次。模型是一个很好的执行者但不是一个优秀的策展人。让它同时参考六个平级的对象它的本能反应是尽可能覆盖所有元素的“均值”而不是做取舍。修正方法也很简单每次只给一到两个同方向的参考并在 prompt 里明确主辅关系。比如“整体版式保持第一张的第二张只提取它的配色习惯”。如果确实想积累更多参考就放到第二轮以后让模型在第一版基础上逐步替换细节而不是第一轮就把信息全部灌进去。4.2 该学的没学到不该学的全学了第二种翻车更隐蔽模型学会了参考里的留白却偷偷加回一颗拿手的紫色渐变按钮。我明明给它看了极简参考生成的页面却出现了参考页里压根没有的渐变元素。这就是典型的“均值回归”在作祟。模型在没有明确约束的时候会自发补充它见过的最高频设计“默认值”。最有效的修正方式不是重写一遍大段 prompt而是直接给它一个反向示例。我会明确写“参考页里的按钮是白底黑字、1px 边框、4px 圆角。我的页面也要这个样式不要改成渐变更不要加阴影。”模型对具体的否定描述响应比对抽象否定描述好得多。抽象地说“要克制一点”它听不懂具体地说“背景用 #FAF9F7、按钮用白底黑字”它就懂了。检查这一步时我会专门对着参考库的“不可模仿点”列表逐项比对。参考页没有的东西生成的页面也应该是没有的。这个原则看起来简单执行起来需要寸步不让因为只要你漏掉一个AI 就会把它放大成整个页面的视觉焦点。4.3 移动端、层级、文案三个最常见的隐形问题还有一类问题是照镜子时很容易忽略的。首先就是移动端。我最初喂进去的全是桌面端截图生成出来的页面桌面版看着有模有样缩到手机宽度以后内容挤压、按钮糊成一团、表格完全不可读。原因是我没给模型参考过这个站点的移动端形态。后来我把参考站点的移动端截图也收进参考库并在 prompt 里明确“先设计移动端布局再扩展桌面端”。这个顺序一换整体质量立刻不同。第二个问题是字体层级。AI 图省事默认所有标题一个字号、正文一个字号整页缺乏节奏。这一步不能指望模型自己悟要在参考描述里写死字阶例如“标题 44 / 32 / 24正文 16辅助说明 13”。字阶定了页面的信息层级就定了这是最容易改也最容易见效的一项。第三个问题是文案。视觉做对了文案里还是有“赋能”“无缝”“极致”这些空转词。我会在 prompt 里写“文案像给同组工程师发的消息说明白一件事就好不要用形容词堆砌。”模型处理这类否定式约束的效果一般所以更靠谱的办法是把参考页面里的真实文案风格描述给它让它照着“短句、具体、有人味”的方向写。4.4 迭代方法一次只改一处别总想着重来最忌讳的是一轮生成不满意后来一句“整体重做一个”。模型在重做时不会记住你前面的所有修正意图大概率会把老问题再犯一遍还会产生新的问题。我用的是分轮迭代策略。第一轮给参考库和完整需求目标是跑通整体版式。生成之后我只看结构和留白不去纠结配色和按钮细节。第二轮开放细节微调只点名三个以内的问题比如“卡片圆角改成 4px”“强调色换成参考页里的橙色”“去掉背景渐变”。第三轮审视代码质量检查有没有大量冗余、是否用了无语义的 div 嵌套。每一轮的修改点控制在三到五条以内超过五条模型改起来就会动作变形。我还会在每次提问时把它上轮输出的代码原样贴回对话里让模型基于当前版本修改而不是凭空修改。这是很多新手容易踩的坑不贴代码模型只能靠记忆理解“你上轮做了什么”改出来的东西自然对不上。这里有一份我自己打印出来贴显示器旁边的比对清单每次迭代完都逐项过一遍首屏是否保留参考里的大留白还是被 AI 偷偷填满了内容按钮圆角是否和参考一致有没有出现参考里没有的渐变配色是否不超过一个主色加一个强调色字体是否有明确的多级字阶而不是“全都一样大”间距是否均匀过头缺少人排版的节奏变化移动端断点是否重新处理过而不是简单缩放文案里有没有“赋能”“解锁”“一站式”这类空话页面里有没有出现参考页里完全没有的装饰元素5. 把参考库沉淀下来从一次性技巧到长期风格资产页面做完后参考库的使命还没有结束。我发现很多人把参考库当成一次性材料项目一结束就扔进回收站太浪费了。真正有价值的页面背后沉淀下来的是那套参考库和对应的工作流。我后来专门做了一个“已验证”目录把项目里真正帮上忙的截图、风格描述文档、代码片段和有效的 prompt 记录全部归档进这个目录。下一次遇到同类页面直接从这个目录里起手效率和稳定性都会明显提高。我给这套东西起了个名字叫“项目风格包”。它包含四样东西参考站点截图、一份风格描述文档、两到三段代码样本、以及这个项目实际用过的高质量 prompt。平时做页面时我会先看看风格包里有没有能直接复用的部分没有的话就花一个小时把新方向补充进去再开始让 AI 干活。反复几次之后风格包壮大到覆盖了我几乎所有常见的页面类型AI 生成的首版质量也跟着上来了。管理参考库我的建议是放在一个私有 Git 仓库里。收藏夹没有版本概念而参考库有。我会给每次实验留存一条追踪记录写清楚“这轮改了哪些 prompt改完以后输出发生了什么变化”。回看时能清楚地看到哪次调优是有效的哪次是白费功夫而不是只靠印象做判断。最后说说什么不要喂。参考库要避开那些版权特征明显、品牌识别度极高的页面。让模型学习一个站点的版式结构是没有问题的但一张页面如果一眼就能让人认出某品牌的视觉系统你拿它当参考生成的页面就会带着明显的借鉴痕迹。为了稳妥我通常不收集这类高辨识度的站点除非只是提取某种非常通用的排版习惯。还有那些重度定制的作品也不适合进参考库模型学不会其中的细节拿它们做参考只会让生成结果四不像。参考库应该收那些你真实业务里用得上的解决方案而不是收藏一堆可望不可即的炫技页面。每次收到一个“不像 AI 做出来的页面”时我都会想起最初的折腾。其实问题的根源不在 AI而在我没想清楚自己要什么风格。以前一句“做得高级一点”丢给模型它只能从语料里猜平均值现在我会花一个小时把参考库整理清楚再花十分钟把风格边界写明白剩下的生成反而快得很。如果你也被那股“AI味”困扰我建议先别急着折腾各种 prompt 技巧去整理一份你自己的参考库这大概是最值得投入的一步。 
长河君 · 2026/10/20 19:25:27 · 阅读 1.2k 参考库加持，告别AI味的网页设计实践
1. 一眼识破的“AI味”问题到底出在哪里如果你最近也在用 AI 生成网页大概率见过这样的页面全宽 Hero 区、居中放一行超大标题、下面跟着三个带小图标的特性卡片再往下是几张圆角截图展示最后压一条深色 CTA。版式本身没什么错误但所有页面都长着同一张脸就很容易让人脱口而出“这是 AI 做的”。我一开始没把这事当问题。页面能用、代码能跑就行客户问起来就说“我们用了最新技术”。直到有个朋友盯着我做的页面看了三秒问了一句“你这个是用某某 AI 生成后直接改的吧”我才意识到那股味道已经明显到行外人能一眼看穿的地步。后来我花了很长时间分析这种“AI味”到底从哪来才慢慢摸到解决它的关键给 AI 一个参考库而不是让它凭记忆自由发挥。这里说的“AI味”不只是布局。更明显的是视觉细节默认的紫蓝渐变、玻璃拟态卡片、24px 大圆角、hover 时轻飘飘的悬浮阴影还有文案里那些“赋能”“解锁”“无缝体验”之类的空转形容词。最让人难受的是排版节奏——间距均匀得不像人排的每一块内容的留白都一样大像用网格纸画出来的缺少人做设计时那种有意识的进退和错落。为什么 AI 会这样先理解它的工作方式。大语言模型生成网页时本质上是在一个字一个字地猜“最可能出现的下一个 token”。它见过的网页语料里绝大多数是各种后台管理系统模板、建站工具默认皮肤、前端框架起步示例。当对话里没有强约束时模型走的是语料里出现频率最高的那条路。它不是在设计它是在统计“大多数人会怎么做”。设计师和 AI 最大的区别在于判断。设计师知道什么不该做不会在极简页面里突然塞一个渐变按钮不会在一屏信息已经很满的情况下再加一层阴影。而 AI 没有“排除过错误答案”的经验它只见过最终被人选中的版本所以它很难理解“不要渐变”“不要大圆角”这种否定式指令。如果你不给它足够具体的正面样例它就默认回到均值。均值就是那股挥之不去的“AI味”。解决这个问题的思路也就清楚了与其用文字反复强调“不要什么”不如给它一个有明确审美坐标的参考库让它从具体例子里总结规律而不是从概率里猜均值。这个思路听起来简单真正做起来有不少门道。2. 参考库不是收藏夹系统性收集才能喂出想要的效果很多人听到“给 AI 喂参考”后的第一反应是把视觉灵感社区的收藏夹里那些好看的截图统统拖进对话框。这样做通常效果更差。收藏夹是一堆你“喜欢”的东西而参考库是一套能传达判断标准的样本集。里面的每一个条目都必须回答一个具体问题这个页面为什么好它好在布局、配色、字体还是留白哪些元素可以借鉴哪些绝对不能模仿我刚开始做参考库时也很兴奋地收集了一百多张截图结果喂给 AI 以后它给我生成一个集各家“特点”于一身的大杂烩第一张的标题排版、第二张的绿色强调、第三张的大圆角卡片凑在一起是个哪个都不像的四不像。后来我才明白参考库要的不是数量而是清晰度和一致性。2.1 先定场景再谈收集动手收集参考之前我会先写清楚接下来三到六个月我实际要做哪几类页面比如“一款数据分析产品的官网首页”“一个内部运营后台的列表页”“一份个人作品集”。这三个场景对应完全不同的视觉策略官网要讲故事、后台要密度和效率、作品集要个性。参考库一旦超出实际业务范围收集得再漂亮都是负担。每个场景下收集多少参考合适我的经验是每个子类保持 5 到 8 个有效参考就够了。少于 5 个模型可能总结不出规律多于 20 个它根本消化不了最后只会输出一个“平均脸”。如果你觉得某个场景值得收集 30 个那说明这个场景还可以继续拆分。例如“营销落地页”可以拆成“科技产品官网首屏”“活动专题页”“服务介绍页”每个子类单独建档喂的时候才不会互相打架。2.2 收集时顺手做像素级标注截一张全屏图只是第一步。真正让参考库产生价值的是标注。我会给每个参考页面写一小段结构化的备注包含版式结构、配色代码、字体层级、间距节奏、圆角阴影习惯、交互亮点以及可复用点和不可模仿点。为什么要手动标注因为模型从截图里未必能精确读出颜色代码和具体间距而且它倾向于忽略那些细微但决定气质的东西。举个实际的例子某个分析产品官网首页是这样的首屏左侧留出 40% 的空白只在右下角放了一句产品说明右侧用一张大图展示界面内容区采用非对称栅格第二屏故意错位一列背景是暖灰色、正文是深黑强调色只有一个暗橙。这个页面的气质完全来自“大留白”和“克制的色彩”而不是某个惊艳的装饰元素。如果光把截图丢给模型它大概率会学习成“产品官网要有大图展示”而丢掉留白和色彩的控制。我用下面这张表记录每个参考页面的信息场景标签参考页面特征版式结构配色字体与层级间距节奏交互亮点可复用点不可模仿点营销落地页某数据分析产品官网首屏左 40% 留白 右侧产品截图内容区非对称栅格背景 #FAF9F7文字 #1B1B1F强调色 #E16B4A无衬线字体标题 800 字重正文 400上下留白大区块间呼吸感强滚动时栏目线淡入克制配色、大留白、非对称布局不能完全照搬它的品牌文案和 Logo 组合B 端后台某任务管理系统左侧窄导航 内容区双栏列表白底灰色分隔线正文 14px数据 13px 等宽信息密度高间距紧凑行内编辑、批量操作折叠表格信息层级、紧凑间距不可使用它的私有图标库这类标注看起来费时间但每一条都在逼你思考“我到底想让 AI 学到什么”。等真正把它喂给模型的时候这些标注会变成 prompt 里的关键约束效果比单纯丢图好得多。2.3 存储方式简单不算过时混乱才是大忌参考库的存储方式不需要花哨。我自己用的是最朴素的一套浏览器全页截图加上关键交互的录屏按场景建目录用 Git 维护版本。文件命名尽量描述性质比如 home-saas-01-desktop-full.png、home-saas-01-mobile-nav.gif。每个参考页面对应一个同名 md 文件里面就是上表里那些字段的展开版。不建议把一整本视觉手册的 PDF 直接塞给模型。现在的模型能看图但对长篇视觉描述的阅读理解并不稳定信息太密集反而抓不住重点。更合理的做法是把参考页面拆成几个关键模块导航单独截、内容区单独截、底部单独截再配合一张全页长图。这样模型既能看清整体关系又不会因为长图分辨率不足而丢掉细节。参考库是一个持续迭代的东西。每次做完一个页面我都会回头看看当初收集的参考到底哪些真正有效、哪些只是“看起来好看”。无效的定期清理有效的保留下来。这和我们整理个人代码仓库是一个道理只有持续的维护才能让资产保值。3. 把参考库真正喂进对话三条通道按效果排序参考库整理好之后最关键的环节来了怎么把它“喂”给 AI喂的姿势决定了输出质量。这里有三个通道我按实际效果从低到高排个序你可以根据自己的场景选择合适的组合。3.1 通道一直接丢截图但别只丢截图最简单粗暴的做法是把几张参考截图直接粘贴进对话框然后说“照着这个风格帮我做一个页面”。模型确实会看图但如果你不引导它先做分析它只会模糊地吸收一些视觉印象输出的页面总是“有点像又有点不像”。我会把这一步拆成两轮。第一轮只传图不让它写代码而是明确告诉它“先不要急着写代码把这张图的版式结构、配色体系、字体层级、圆角阴影习惯、留白节奏逐项分析给我。”等它输出完分析我再提具体的页面需求。这样做的原因是让模型先把注意力放在“理解参考”上而不是一面看图一面又急着生成两边都顾不好。截图质量也是关键。整页长截图信息密度太低模型放大看会糊缩小看会漏。我会把复杂页面切成三到四块导航加首屏一块、内容区一块、底部一块配合整页长图一起传。图片宽度保持在 1200px 以上太小的图细节全丢参考价值大打折扣。3.2 通道二把截图翻译成一份视觉描述文档有些模型对纯视觉输入的响应不那么稳定或者你想让同一个风格跨多个会话复用。这时候我会把每个参考站点拆成一份风格描述文档。这份文档的价值在于它脱离了一张截图变成一套可复制的审美判断标准。我所说的风格描述文档不是“这个页面很好看”这种印象式评价而是把视觉特征标准化。下面是我常用的模板风格参考/ref/saas-site-01 布局首屏非对称左侧 40% 留白放文字右侧 60% 放产品界面截图 内容区采用 12 列栅格第二屏刻意错位一列制造节奏感 配色背景 #FAF9F7正文 #1B1B1F强调色 #E16B4A不允许使用紫色或蓝色渐变 字体无衬线标题字重 800正文字重 400行高 1.6 字阶固定为 44 / 32 / 24 / 16 / 13 圆角按钮 4px卡片 8px不出现无意义的大圆角 阴影基本不用只用 1px 浅色边框分隔元素 动效hover 时只改变文字颜色滚动时栏目分隔线淡入 坚决避免玻璃拟态、渐变背景、自动轮播、悬浮阴影写这份文档的时候注意一个分寸不要写“要高级感”这类抽象词要写“背景是什么样的、按钮是圆角还是直角、阴影重不重”这些能直接落到代码上的参数。模型对形容词的理解是模糊的对具体参数的理解是清楚的。第一次写会觉得麻烦写多了就会变得特别快因为你实际上是在建立一套属于自己的“视觉参数模板”。3.3 通道三直接给代码样本这招最稳如果你追求的是页面气质像同时代码也能保持干净只喂截图和文字描述还不够。模型生成视频时的代码风格也受语料影响让它自由写出来往往是一堆嵌套很深的 div 和冗长的 CSS。想让代码层面也像某个真实项目就得给它这个项目的代码片段作为样本。我从参考站点里抠出三到五段最小可用的 HTML/CSS 片段一个导航、一个首屏 Hero、一张内容卡片、一张表单。先把它们里的框架依赖、私有图标、多余装饰全部剥掉保留纯粹的语义化结构再放进对话。给这些代码片段的时候我会加一句约束“下面是我希望保持的代码风格参考它的结构、命名和 CSS 组织方式不要直接照搬里面的文字和内容。”这里有个容易被忽略的细节代码样本要控制数量同时风格必须一致。如果三个片段分别来自三个不同的项目模型学到了三种不同的命名习惯生成的代码就会特别乱。我的做法是每个参考场景只保留一套代码风格样本让模型学习的是统一的结构习惯。实际使用中我是把三个通道组合在一起用的两张同风格截图加一份风格描述文档再加一两段代码样本。一次给这么多会不会太多我的经验是数量守恒关键是给“同一风格方向”的素材而不是素材种类越多越好。如果参考里的截图风格南辕北辙模型一定会给你缝合的产物。4. 实测翻车现场喂了参考库输出还是不对怎么办理论说得再好真跑起来还是坑一个接一个。我把这一两周里反复翻车的几种情况整理出来每种情况都配了排查思路和修正方案你大概率也会遇到。4.1 缝合怪参考太多、风格打架第一次翻车就是前面提到的缝合怪。我一股脑上传了六张不同风格的截图结果模型像在开盲盒第一张的标题字号、第二张的绿色强调、第三张的玻璃卡片、第五张的布局全揉进了一个页面。单看每一块都合理拼在一起哪里都不对。排查下来问题出在我没有给参考分主次。模型是一个很好的执行者但不是一个优秀的策展人。让它同时参考六个平级的对象它的本能反应是尽可能覆盖所有元素的“均值”而不是做取舍。修正方法也很简单每次只给一到两个同方向的参考并在 prompt 里明确主辅关系。比如“整体版式保持第一张的第二张只提取它的配色习惯”。如果确实想积累更多参考就放到第二轮以后让模型在第一版基础上逐步替换细节而不是第一轮就把信息全部灌进去。4.2 该学的没学到不该学的全学了第二种翻车更隐蔽模型学会了参考里的留白却偷偷加回一颗拿手的紫色渐变按钮。我明明给它看了极简参考生成的页面却出现了参考页里压根没有的渐变元素。这就是典型的“均值回归”在作祟。模型在没有明确约束的时候会自发补充它见过的最高频设计“默认值”。最有效的修正方式不是重写一遍大段 prompt而是直接给它一个反向示例。我会明确写“参考页里的按钮是白底黑字、1px 边框、4px 圆角。我的页面也要这个样式不要改成渐变更不要加阴影。”模型对具体的否定描述响应比对抽象否定描述好得多。抽象地说“要克制一点”它听不懂具体地说“背景用 #FAF9F7、按钮用白底黑字”它就懂了。检查这一步时我会专门对着参考库的“不可模仿点”列表逐项比对。参考页没有的东西生成的页面也应该是没有的。这个原则看起来简单执行起来需要寸步不让因为只要你漏掉一个AI 就会把它放大成整个页面的视觉焦点。4.3 移动端、层级、文案三个最常见的隐形问题还有一类问题是照镜子时很容易忽略的。首先就是移动端。我最初喂进去的全是桌面端截图生成出来的页面桌面版看着有模有样缩到手机宽度以后内容挤压、按钮糊成一团、表格完全不可读。原因是我没给模型参考过这个站点的移动端形态。后来我把参考站点的移动端截图也收进参考库并在 prompt 里明确“先设计移动端布局再扩展桌面端”。这个顺序一换整体质量立刻不同。第二个问题是字体层级。AI 图省事默认所有标题一个字号、正文一个字号整页缺乏节奏。这一步不能指望模型自己悟要在参考描述里写死字阶例如“标题 44 / 32 / 24正文 16辅助说明 13”。字阶定了页面的信息层级就定了这是最容易改也最容易见效的一项。第三个问题是文案。视觉做对了文案里还是有“赋能”“无缝”“极致”这些空转词。我会在 prompt 里写“文案像给同组工程师发的消息说明白一件事就好不要用形容词堆砌。”模型处理这类否定式约束的效果一般所以更靠谱的办法是把参考页面里的真实文案风格描述给它让它照着“短句、具体、有人味”的方向写。4.4 迭代方法一次只改一处别总想着重来最忌讳的是一轮生成不满意后来一句“整体重做一个”。模型在重做时不会记住你前面的所有修正意图大概率会把老问题再犯一遍还会产生新的问题。我用的是分轮迭代策略。第一轮给参考库和完整需求目标是跑通整体版式。生成之后我只看结构和留白不去纠结配色和按钮细节。第二轮开放细节微调只点名三个以内的问题比如“卡片圆角改成 4px”“强调色换成参考页里的橙色”“去掉背景渐变”。第三轮审视代码质量检查有没有大量冗余、是否用了无语义的 div 嵌套。每一轮的修改点控制在三到五条以内超过五条模型改起来就会动作变形。我还会在每次提问时把它上轮输出的代码原样贴回对话里让模型基于当前版本修改而不是凭空修改。这是很多新手容易踩的坑不贴代码模型只能靠记忆理解“你上轮做了什么”改出来的东西自然对不上。这里有一份我自己打印出来贴显示器旁边的比对清单每次迭代完都逐项过一遍首屏是否保留参考里的大留白还是被 AI 偷偷填满了内容按钮圆角是否和参考一致有没有出现参考里没有的渐变配色是否不超过一个主色加一个强调色字体是否有明确的多级字阶而不是“全都一样大”间距是否均匀过头缺少人排版的节奏变化移动端断点是否重新处理过而不是简单缩放文案里有没有“赋能”“解锁”“一站式”这类空话页面里有没有出现参考页里完全没有的装饰元素5. 把参考库沉淀下来从一次性技巧到长期风格资产页面做完后参考库的使命还没有结束。我发现很多人把参考库当成一次性材料项目一结束就扔进回收站太浪费了。真正有价值的页面背后沉淀下来的是那套参考库和对应的工作流。我后来专门做了一个“已验证”目录把项目里真正帮上忙的截图、风格描述文档、代码片段和有效的 prompt 记录全部归档进这个目录。下一次遇到同类页面直接从这个目录里起手效率和稳定性都会明显提高。我给这套东西起了个名字叫“项目风格包”。它包含四样东西参考站点截图、一份风格描述文档、两到三段代码样本、以及这个项目实际用过的高质量 prompt。平时做页面时我会先看看风格包里有没有能直接复用的部分没有的话就花一个小时把新方向补充进去再开始让 AI 干活。反复几次之后风格包壮大到覆盖了我几乎所有常见的页面类型AI 生成的首版质量也跟着上来了。管理参考库我的建议是放在一个私有 Git 仓库里。收藏夹没有版本概念而参考库有。我会给每次实验留存一条追踪记录写清楚“这轮改了哪些 prompt改完以后输出发生了什么变化”。回看时能清楚地看到哪次调优是有效的哪次是白费功夫而不是只靠印象做判断。最后说说什么不要喂。参考库要避开那些版权特征明显、品牌识别度极高的页面。让模型学习一个站点的版式结构是没有问题的但一张页面如果一眼就能让人认出某品牌的视觉系统你拿它当参考生成的页面就会带着明显的借鉴痕迹。为了稳妥我通常不收集这类高辨识度的站点除非只是提取某种非常通用的排版习惯。还有那些重度定制的作品也不适合进参考库模型学不会其中的细节拿它们做参考只会让生成结果四不像。参考库应该收那些你真实业务里用得上的解决方案而不是收藏一堆可望不可即的炫技页面。每次收到一个“不像 AI 做出来的页面”时我都会想起最初的折腾。其实问题的根源不在 AI而在我没想清楚自己要什么风格。以前一句“做得高级一点”丢给模型它只能从语料里猜平均值现在我会花一个小时把参考库整理清楚再花十分钟把风格边界写明白剩下的生成反而快得很。如果你也被那股“AI味”困扰我建议先别急着折腾各种 prompt 技巧去整理一份你自己的参考库这大概是最值得投入的一步。