"同一句需求，有人两轮就拿到能上线的页面，有人改到第六版还在和排版较劲。差的不是提示词写得多花哨，而是几件事的先后顺序。"
用 AI 做网页卡住的时候，多数人的第一反应是换个说法再试一次，或者升级更聪明的模型。试了十几轮之后会发现，反复出问题的点几乎一样：结构没定就开始调颜色，文案是 AI 编的还要后期逐句改，表单一提交数据不知道去哪，等页面好看得差不多了才想起来它得能被搜索引擎读到。这些毛病单看都像"提示词写得不好"，追到根子上全是顺序问题。
把整个过程当成一条工序链来看，每一步要什么输入、交出什么产物都写清楚，AI 的产出立刻稳定下来。下面这套顺序是按返工成本排的：越靠前的环节改了越省事，越靠后越贵。真正动手的活儿没多少，难的是忍住先做前面这几步。
一、整条工序链长什么样，哪一步放错最贵
从一句想法到页面能上线，中间真正需要人拍板的只有六道工序。它们之间存在硬性依赖：前一道没定下来，后一道做什么都是碰运气。把这层依赖关系画出来，顺序错误一眼可见。
给谁看、看完做什么、哪些信息必须出现
把真实数据、联系方式、价格整理成文本
先出区块顺序和每个区块的任务
颜色、字号、间距写成清单再交给 AI
按区块逐个生成，再拼成整页
多端检查、链接与表单、收录结构
这几道工序里，最贵的一次顺序错误是"先做样式"。颜色和排版是参数，随时可以替换；区块顺序和内容层级是结构，一改就要连带调整文案、按钮位置和图片比例。把样式放在结构前面调，等于给一个随时会变形的架子刷漆，架子一动，漆全白刷。
顺序出错时最典型的三个信号：
· 每一版生成结果都和上一版风格不一样，说明样式规范还没定，等于没给 AI 约束
· 反复在改文案，而文案里的数字和事实还在变，说明事实清单没提前整理
· 页面看着快完工了，却发现导航和链接结构不支持多页面扩展，说明结构讨论跳过了
这三个信号只要出现一个，就值得停下来往回退一步，而不是继续在结果上打补丁。退一步通常只需要十分钟，硬撑下去往往是又一个下午。
二、开工前要定下来的三件事，比提示词重要
需求定型这一步不需要任何工具，需要的是一张纸和十分钟诚实。三件事答清楚，后面每一轮对话都会顺；答不清楚，生成多少版都是抽奖。
| 要定的事 | 写到什么程度算清楚 | 含混时的后果 |
|---|---|---|
| 给谁看 | 具体到场景，例如"用手机搜过来的本地客户，先看效果再问价格" | 语气和版式一路改，改到第八版还是"感觉不对" |
| 看完做什么 | 一个主要动作，例如打电话、提交表单、加微信，只能选一个当主线 | 按钮到处放，访客反而一个都不点 |
| 哪些信息必须出现 | 逐条列出并区分"事实"和"可以由 AI 起草"，事实必须自己提供 | AI 编出电话号码和案例，审核时逐句返工 |
事实清单里最容易被漏掉的，是要不要给访客一个"下一步"。很多页面做完很漂亮，访客看完不知道能干什么，这类问题不是视觉能修的。涉及医疗、金融、法律这类有资质门槛的内容，事实部分必须由持证方确认，不能让模型代写。
这一步的产物是一份纯文本：项目名、目标访客、主转化动作、事实条目、待 AI 起草的内容范围。这份清单不放进对话里也没关系，它的作用是在你脑子里把变量固定下来。变量少了，AI 的输出自然稳定，这是后面所有环节省时间的前提。
三、第一轮只出结构，把样式留到后面
手上有了需求清单，第一轮对话只做一件事：让 AI 给出区块清单，明确告诉它先不要写代码、不要定颜色。这一步听上去绕，实际是省时间的主力。区块顺序确定之后，每个区块要承担的任务也就定了，生成代码时 AI 有明确目标，不会把内容堆在首屏然后靠样式硬撑。
这是一个【行业】的服务页面。看的人是【具体人群】，多半用手机打开。看完希望他们做的一件事是【主要动作】。请先只给出区块清单，按从上到下的顺序排列，说明每个区块承担什么任务、放哪些内容。这一轮不要写代码，不要定颜色和字体，等结构确认后再讨论样式。事实类信息我稍后提供，涉及数字、价格、联系方式的地方先留空。拿到清单之后做三件人工判断：顺序对不对、缺不缺、多不多。顺序上，最劝退的信息（比如价格）要放在价值说明之后、转化动作之前，藏在页尾等于没有；缺的补上，访客最常追问的那两个问题通常值得单独成块；多的果断删，动效视频、轮播、在线客服这类区块每多一个，页面速度就掉一档，对转化却没什么贡献。
结构调整完，这份清单要留好。区块清单就是后面的验收单，上线前逐条对照，比空对着页面找毛病有效得多。这一步还有个隐性收益：结构定得清楚，后面无论换谁来接手，都不用重新理解一遍页面意图。
页面不止一个的时候，结构阶段还要多想一步：哪些区块是所有页面共用的（页头、页脚、咨询条），哪些是页面独有的。共用区块单独定一次，后面每个页面直接复用，AI 生成时也不会每次给你一套新页脚。
很多返工都发生在跳过了这一步：直接让 AI 出整页代码，看着不错就往下改。改到中途发现导航栏少了案例入口，加栏目要动整个首屏，之前调好的间距全部乱掉。结构阶段的十分钟，能替掉后面几个小时。
四、样式先写成一份清单，别指望模型每次都猜对
AI 生成页面最常见的"不像一个整体"，根源不在审美，在每次生成时的样式参数都不一致：同一个按钮这版用圆角八像素，下版变成直角；标题字重一会儿五百一会儿七百；间距凭感觉给，横向内边距每块都不一样。人眼看久了才发现，改起来却要满页找。与其事后统一，不如生成之前就把样式定成一份清单，每次对话都带上。
不带规范生成
每一轮都是全新发挥，颜色深浅不一、按钮形状各异，改一处要全局搜索替换，改完还有漏网的。改到后来自己都记不清哪个是标准。
带着规范生成
颜色只有几个固定的值，字号是一套阶梯，间距按 8 的倍数走。改主题色只需替换一个变量，同一个组件出现在十个页面也不会走形。
这份清单不用写得像设计文档那么正式，一屏之内说清六组参数就够用。写成文件放在项目里，每次对话把它贴进上下文，AI 就会照着执行，这也是很多团队在用的做法：把设计规范变成一段固定开头的提示词。
样式清单示例（可直接改成你自己的）
主色：#1f6feb（按钮、链接）；辅助色：#f5f7fa（区块底）；文字：#1f2937 / #6b7280
字号阶梯：正文 16px，次级 14px，小标题 20px，主标题 32px，行高 1.7
间距：区块上下 64px，卡片内边距 24px，元素间隔统一 8 的倍数
组件：按钮圆角 8px、高度 44px；卡片圆角 12px、浅阴影一处
禁止：渐变滥用、同时使用两种以上强调色、正文小于 14px
和样式清单配套的一个做法是组件优先：不让 AI 每次生成整个页面，先让它把按钮、卡片、表单、页头这些组件单独写出来，确认没问题，再让它们按区块结构拼装。这样改一个按钮只需要改一处，所有页面的按钮一起更新。页面数量越多，这个做法的收益越明显。
样式清单别写成十几页。模型对上下文的注意力有限，太长的规范它只会记住前几条。控制在二三十行，把最常跑偏的参数（颜色、字号、间距、按钮样式）写清楚，剩下的交给生成后的逐块校对。
五、页面要落地成站点，有几个参数得在生成前定好
页面和站点是两回事。页面能看，站点能活，中间差的是地址、结构、抓取入口这几样。它们有一个共同特点：生成之前顺手定好几乎不花时间，等你看到成品再想补，改动面就大了。
URL 用有含义的短横线命名，别用流水号。地址一旦传播出去再改，评论、外链、后台统计全断，改一次伤一次。
页面标题、描述、正文各级标题都由内容本身决定。让 AI 从真实内容里提炼，而不是单独生成一句漂亮话贴上去。
每页一个主标题，各级标题按层级递进，别为了字号好看把 h2 当 h4 用。结构清楚，抓取端和读屏软件都好处理。
表单只是外观，提交到哪、谁看得到、有没有通知，生成之前就要确定。做完页面再补链路，等于上线日期由别人决定。
跨到多页面、多站点之后，这套参数会变成固定流程。用 UC 建站系统这类工具时，页面走 HTML 直出的形式，抓取端拿到的是完整结构，不需要等脚本渲染；内容侧由内容中台统一管理，人定策略、AI 按策略执行，不同站点用不同角度和结构组织同一批素材，重复劳动被压掉，服务器侧只负责稳定输出页面。这一层想清楚之后，你要盯的就不再是"这一页怎么生成"，而是"这批页面的结构规范有没有统一"。
图片也在这一层处理：生成前约定统一的命名方式与尺寸规范，上传前压缩一遍。几十张没压缩的图片足以把移动端体验拖垮，而这类问题在生成阶段从来不会自己暴露出来。
六、验收清单：五处挨个过，别只看自己那块屏幕
页面做完了不急着发，按从上到下的顺序过一遍。之所以强调顺序，是因为改动会互相牵动：先修肉眼可见的显示问题，再走链路，最后看只有机器才能读到的部分。乱着改，往往修好一处碰坏一处。
- 换个屏幕看：用手机真机打开一遍，重点看长文案会不会把卡片撑破、按钮会不会跑到屏幕外、字号在强光下读不读得清
- 点一遍所有链接：导航、页脚、正文里的每个跳转都点开，确认没有空链接和 404，尤其是页脚那种一次写好后很少再看的地方
- 走一遍表单全流程：自己填一次，确认提交成功、收到通知、数据落到了该去的地方，再故意漏填一项看看提示是否清楚
- 看一眼加载速度：清空缓存再打开，重点看首屏图和字体，图片没压缩或者字体从外部加载，速度一眼就能看出问题
- 检查收录基础：页面标题、描述、robots 设置、canonical、站点地图是否就位，这几样不做，页面做得再好也难被找到
这套检查大约一小时能完成，省下来的却是上线后反复返工的几天。时间成本上有一笔账值得记住：
只在电脑上看一遍就发出去，是最常见的失手方式
工作电脑的屏幕尺寸、浏览器版本、网络环境都是"最理想的那一种"。换台手机、换个浏览器、换个网络，问题才露头。检查的价值不在于发现多少毛病，而在于把毛病留在自己这边，别留给访客。
七、从一页到一批：把流程沉淀成能重复用的东西
第一页最花时间，因为所有决定都在这一页上做。做完第一页之后，真正有价值的东西已经被固化了：需求清单的模板、区块结构、样式清单、组件代码、验收清单。第二页开始，你要做的不是重新生成，而是核对哪些东西能直接拿过来用。复用分三层，越往上节省越明显。
| 复用层级 | 复用的是什么东西 | 能省下的重复劳动 |
|---|---|---|
| 单页到多页 | 样式清单、共用组件、页头页脚、表单链路 | 新页面不用再讨论样式，生成后直接过验收清单 |
| 多页到栏目 | 页面结构模板、内容字段、URL 命名规则 | 同类页面成组产出，改一处模板整批生效 |
| 栏目到多站 | 内容策略、模板规范、部署与监控流程 | 新站只需接入规范，运营动作按同一套节奏走 |
多站阶段的重点已经从"怎么做页面"变成了"怎么盯住一批页面"。站点多了以后，逐个打开后台看状态根本不现实，索引量掉没掉、哪个站的抓取量异常、哪台机器上的站点集体变慢，这些信息需要集中在同一个地方看。用 UC 建站系统的多站看板统一盯索引量、排名动向、访问流量和异常预警，站点上线后再配双通道推送，把新页面同时提交给百度 API 与 IndexNow，收录这件事就从"发完等通知"变成了一条能看见进度的流水线。
第一页完成时间
1 天
含需求整理、结构与两轮打磨
后续同类页面
2 小时
套用清单与组件，只做内容替换
批量产出节奏
按批走
素材先备齐，一个批次走完再开下一批
真正让批量产出稳定的是节奏而不是工具：素材先备齐再开工，避免生成到一半停下来找图片；一个批次走完验收再开始下一批，避免几十个页面同时处于半成品状态；每次做完把这一批遇到的问题补进清单，下一批就少掉一个坑。这套节奏跑顺之后，产出速度的提升来自"不用重复做决定"，而不是某个工具变快了。
不懂代码，能走完这套工序吗？
能走到"页面可上线"这一步，多数环节只需要判断而不需要写代码：需求清单、区块顺序、样式参数、验收检查都是判断题。真正需要动手的是表单去向、抓取入口配置这类环节，可以找人代做一次，把过程记录下来，后面照着复制。想长期自己维护，至少要能读懂基础结构，改起来才不会被卡住。
生成的代码要不要自己再改一遍？
看用途。用完就换的活动页，不需要动代码，过一遍验收清单就发。打算长期运营的站点，建议把生成结果整理一次：外部资源本地化、样式统一收进一处、多余脚本删掉。这一步的投入会在后面每次改版时赚回来，也是 AI 生成页面能否变成"能维护的资产"的分水岭。
多站点是不是要准备很多套素材？
素材的核心是一份真实、准确的事实清单，图片和介绍可以按站点定位调整表达，但数据不能各站不同。多站场景最该避免的是把同一批内容原样复制到所有站，那本质上没有增加任何信息。合理的做法是同一主题下按受众角度重新组织，事实一致、表达与结构按站调整。
AI 做网页这件事，快的是生成，慢的是决定。把这套工序跑顺之后会发现，反复改六版的原因从来不是模型不够聪明，而是每一次都让它替你做本该你自己做的决定：页面给谁看、重点是什么、样式按什么规则来。
下次再打开对话框之前，花十分钟把需求、事实、区块、样式这四样写成几行文字。它们不花什么时间，却决定了后面每一轮对话是在往前走，还是在原地打转。工序顺序对了，AI 的产出才会一次比一次接近能上线的样子。
（文中工序顺序与检查清单为通用经验整理，具体参数以你的项目规范与实际访问数据为准；样式清单示例仅作结构参考，落地前请在测试环境确认）
