"AI 生成一版页面只要几分钟，可真正能上线的做完，花了我一整天。差距不在工具，在流程。"
这句话点破了新手最容易误解的地方：稀里糊涂地反复生成，不如把流程走顺。
关于 AI 做网页的文章，大部分在讲"能做什么"。这篇不一样：它是一份实战记录，跟着做就能走完一遍。案例已经选好：帮一家烘焙工作室做一个"周末体验课报名页"，目标是让刷到页面的人在半分钟内了解课程、顺手报名。这个案例不大，却完整包含了一个真实页面需要的全部环节：结构、版式、文案、表单、上线、维护，一步都不跳。
整个流程用六轮对话推进：说需求、出结构、出版式、逐块打磨、接上表单、上线检查。每一轮写清楚"对 AI 说什么、产出长什么样、人检查什么"。你不必是烘焙行业，把里面的业务信息换成自己的，这套顺序可以直接复用。
一、开工前的准备：把需求压成三句话
打开对话框之前，先把三个问题答完：这个页面给谁看、看完要做什么、什么信息必须出现。看的人决定语气，要做的动作决定结构重心，必须出现的信息决定内容骨架。三个问题答不上来，生成多少版都是碰运气。以案例为例：给本地想学烘焙的上班族看，他们多半用手机；希望他们填表单报名；必须出现的信息是课程时间、地点、费用、名额、联系方式。三句话就位，页面就有了地基。
另一件要准备的事是列信息清单，区分"事实"和"待定"。事实类信息（时间、地点、费用、联系方式）必须由你提供，写下来备用；没想好的部分（比如课程亮点怎么描述）可以留给 AI 起草，你审核后替换。这个区分很重要：让 AI 编事实，等于给页面埋雷，哪怕它编得煞有介事。
还有一条减法要做，一个单页只服务一个动作。报名页就专心让人报名，别贪心加上"关注公众号""进粉丝群""浏览往期活动"的第二、第三个目标。目标一多，按钮就乱，访客不知道点哪里，结果什么动作都不会发生。想清楚这一件事，后面每一轮对话都会更顺。
二、第一轮对话：先要结构，不要样式
新手最爱犯的错，是一上来就要求"高级感、要好看"。正确顺序恰好相反：结构定下来之前，任何样式讨论都是浪费。第一轮只让 AI 出一件事：页面区块清单。给它的指令可以很简短："我要做一个烘焙体验课的报名单页，给手机的上班族看，目标是填表报名，请先给区块结构建议，不要写代码。"
AI 会给出一个清单，例如：主视觉区、课程介绍、课程亮点、时间安排、报名表单、常见问题、页脚。拿到清单后，你逐个确认三件事：顺序对不对、缺不缺、多不多。顺序上，把最劝退的信息（费用）放在亮点之后、表单之前，别藏在页面末尾；缺的部分补上，比如访客最常问的"零基础能不能学"，放进常见问题；多的部分果断删掉，比如自动播放的视频区，手机流量和耐心都经不起它。
结构调整还有一个隐形收益：区块清单就是后面的验收清单。等页面上线前，逐条对照每个区块是否都完成、内容是否都在该在的位置，比空对着页面挑毛病有章法得多。这一轮花十分钟，后面省两个小时。
三、第二轮对话：让页面长出来
结构确认之后，才轮到生成页面。这一轮的提示词质量，直接决定初稿能不能用。把前面准备好的三句话、信息清单、区块结构，整理成一段完整的描述交给它，让 AI 一次拿到全部上下文，而不是挤牙膏一样一点点补。案例里的提示词整理出来是这样的，可以照着这个框架换成你自己的业务：
第二轮提示词（可直接套用）
做一个烘焙体验课的报名单页。给谁看：本地想学烘焙的上班族，大多用手机打开。看完要做什么：填表单报名。
区块按顺序：主视觉、课程介绍、课程亮点、时间安排、报名表单、常见问题、页脚。
风格：温暖干净、留白多，主色用暖橙配米白，字体不超过两种。
硬性要求：移动端优先；不编造电话和地址，占位处统一写［待替换］；按钮文字固定用"立即报名"。
这几行里的门道：把模糊的词翻译成能检查的标准。"温暖干净"没法验收，但"主色暖橙配米白、字体不超过两种"可以；"不要编内容"没法执行，但"占位处写［待替换］"可以。模型对可检查的要求响应得最认真，这一点值得记牢。初稿生成后，先别急着改样式，安安稳稳做四件事：桌面上通读一遍、用手机真机打开一遍、核对所有事实信息、找到那个"立即报名"按钮并点击。四件事里只要有一件不通过，就是下一轮对话要解决的问题。
四、第三到第五轮：一次只改一件事
初稿之后的修改，是新手和老手拉开差距的地方。最常见的翻车姿势是：一口气列出七八条修改意见交给 AI，结果页面大改，原来对的地方也改没了，问题出在哪都说不清。稳妥的节奏是一次只改一件事，改完看一眼，对了再改下一件。慢一点，但每一轮都向前走，不会推倒重来。三轮打磨，案例里分别改了这些：
配色统一。初稿的橙色有深有浅，按钮和标题用了三种不同的橙。指令说清楚目标："全页只保留一种橙色用于按钮，标题统一用深棕色，其余色块改为米白。"文案改写。让 AI 把营销腔的句子换成正常说话："把'饕餮盛宴、舌尖上的享受'改成一句能让朋友听懂的话，说清课程做什么、学多久、能带走什么。"按钮位置。报名按钮只放在表单区一处不够，让页面每两屏就能看到一个："在课程介绍、亮点、时间安排每个区块末尾各加一个'立即报名'按钮，样式与表单区按钮保持一致。"
偶尔会遇到改不动的情况：连着几轮，AI 都没听懂。这时候别和它较劲，退回描述层面重新解释，而不是继续在结果上加补丁。比如"按钮再大一点"反复不见效，换成"按钮高度到手指能轻松点到，文字和背景对比清楚，在手机上一眼能看到"，效果立竿见影。另外养成一个习惯：每个满意的版本都另存一份。改坏的版本不要直接覆盖，上一版随时可以回来，试错成本等于零。
五、表单要有去处：让报名真的收到
页面做得再好看，报名表单一提交、数据不知道去了哪，整个页面就是白做。这是实战里最容易被忽略、又最不能省的一步。生成页面时表单只是"样子"，让它真正收得到数据，需要接一个去处的服务。常见接法有三种，按自己的情况挑：
| 接法 | 适合谁 | 注意什么 |
|---|---|---|
| 第三方表单服务 | 大多新手，要快、要省事 | 注册后把表单嵌入页面，数据在后台看 |
| 跳到聊天工具收单 | 想直接和报名者对话的 | 按钮直达对话，适合小规模报名 |
| 托管平台自带表单 | 页面就建在该平台上的 | 开箱即用，注意查看有没有容量限制 |
| 让 AI 生成自建接口 | 有一定技术基础的 | 需要服务器与数据库配合，不适合赶时间 |
接好之后别急着上线，自己提交一次测试数据，去后台确认真的收到了，这一步能拦下九成的"表单接错"事故。再补上两个体验细节：提交成功后弹出明确的感谢提示，告诉对方"几点前会有人联系"；报名表本身尽量只留姓名、联系方式、想报的时段三个必填项，让手机用户少打字、少犹豫。防垃圾提交的常规做法是加一个简单验证项，这类代码让 AI 顺手补上即可。
六、第六轮：上线前的五项检查
上线本身不复杂：把页面文件传到托管服务（静态托管一键发布也可以），绑定域名，页面就有了网址。真正决定体面的，是上线前这五项检查。每项花不了几分钟，漏掉任何一项，都可能让一个访客再也不回来：
| 检查项 | 怎么查 | 不合格的样子 |
|---|---|---|
| 事实信息 | 电话拨一遍、地址搜一遍 | 还留着［待替换］或示例号码 |
| 手机真机 | 用自己的手机从头翻到尾 | 文字挤、按钮难点、横向溢出 |
| 图片体量 | 看图片大小、压缩后重传 | 单张图好几兆，打开要等 |
| 链接与按钮 | 每个链接点一遍、按钮都点一遍 | 死链、按钮无反应、跳错页 |
| 分享效果 | 把网址发给自己，看缩略信息 | 标题是乱码或空白，缩略图缺失 |
五项里，"分享效果"最容易被跳过，却最影响传播：把网址发到聊天窗口，如果缩略图是空白、标题是一串乱码，转发的人会犹豫，收到的人会怀疑。这几项都归 AI 补起来：页面标题、描述、分享缩略图，都在头部信息里，让它照着一句话补全即可，改完再发给自己确认一遍。检查通过的页面，才算真正"做完"。
七、上线之后：把这个流程变成你自己的
页面有了网址，工作只完成了八分。剩下两分在"以后怎么用"：课程内容换了活动时间，改哪里；下一期开了新班，页面怎么复用；第二个页面要做，从哪一句开始。这些后续动作恰恰是 AI 最擅长的：把这次页面存成模板，改动都交给对话完成。换活动时，把新时间、新费用、新名额发过去，让它只改这几处；要加一段"学员反馈"，描述清楚位置和样式，一分钟就能补上。经过六轮对话的这个页面，从此就是你的资产。
做完这一遍，把四个习惯留下
提示词存成模板 第二轮那段完整描述改掉业务信息，就是下一个页面的起手式
满意版本留底 每轮满意的版本按日期另存，改坏随时能回退
换活动只改三处 时间、费用、名额，其余结构不动，避免牵一发动全身
新页面先走结构 永远从区块清单开始，样式放在结构确认之后
回过头看这六轮对话：把需求压成三句话、先要结构再要样式、一次只改一件事、让表单真收得到数据、上线前过五项检查、把成果存成模板。每一步都平平无奇，串起来就是一条从想法到能上线的完整通路。工具会换名字、换界面，这条通路不会变：AI 负责生成，你负责判断和把关，谁先看懂这个分工，谁就先从"反复生成"的循环里走出来。烘焙工作室的报名页只是一个样本，换成你的业务再走一遍，流程还是这六轮，熟练之后，半天就能完整跑完。下一位访客点开页面的时候，看到的是一页清楚、能报名、值得信任的内容，这就是这次实战的全部意义。
