后端测试通过之后，前端页面往往是收尾时最磨人的活。让大模型接手这件事的完整链路是：需求文档加提示词交给模型，产出 HTML、CSS、JS 三份独立文件，落到指定目录，再逐接口联调。本文走一遍全流程，重点是联调阶段怎么验收、怎么记录缺陷。
生成链路怎么搭
前置条件三件：后端服务先启动；用境外模型则提前配好代理；确认输出目录存在。提示词里必须写死四件事——业务背景、约束条件（禁止改动后端代码）、部署路径、服务器地址和端口。约束写得越死，生成结果的偏离越小。
模型输出固定拆成三个文件：index.html 管页面结构和弹窗骨架，styles.css 管全局样式，script.js 管接口请求、页面交互和 SSE 流式处理。拆文件的好处是后续人工修订时定位明确，不会在一个巨型文件里翻找。
效率账很直接：传统人工开发这类页面要两到三个工作日，模型生成加人工验收压缩到分钟级——但这笔账成立的前提是验收流程标准化，否则省下的开发时间全赔在返工上。
接口联调与缺陷记录
后端接口清单要先列死，联调逐条打勾：
- 会话管理四件套：拉会话列表、创建会话、删会话、取历史消息
- 模型能力：拉取后端支持的模型列表
- 消息交互：发消息走 SSE 流式异步返回
验收方法上有个关键习惯：前端行为要落到数据库核对。删会话不能只看列表少了条目——直接查 session 表确认记录是真删了；消息记录同理查 message 表。UI 层通过、数据层没对上，是这类生成页面最常见的隐性缺陷。
实测中的两类典型问题值得预先写进验收清单：时间戳格式化出错（前端拿到的原始时间串没做本地化处理，展示层直接吐原始值）；SSE 流式接口逻辑复杂，代码写完不等于验证过，必须真实跑一轮才算数。
响应式补课：生成结果缺什么
模型生成的页面默认带 Flex 布局、弹窗 max-width 约束、消息自动换行，这些能覆盖桌面端。但移动端通常缺三样：媒体查询断点、侧边栏抽屉交互、对应的手势逻辑。
补齐方案是固定的四件套：
- viewport 元标签放进 head，禁用默认缩放；
- 768px 断点切布局：以上保持侧边栏静态分栏，以下侧边栏改成 fixed 定位加负偏移，靠 class 切换滑入滑出；
- 相对单位替换固定 px：字体用 rem，弹窗用 vw 约束；
- resize 监听里清理抽屉状态，避免从移动端切回桌面时侧边栏卡在展开位。
长文本防护别漏：消息容器加 word-break: break-all 和 overflow-wrap: break-word，不然一条长命令就能把布局撑破。
验收标准清单
页面级：无横向滚动条；按钮、弹窗不出视口；断点切换后交互全部可用。接口级：会话增删查、模型列表、消息收发逐项通过且数据库落库正确。缺陷级：发现的每个问题记录复现步骤和影响面，时间格式化这类展示缺陷和流式接口这类功能缺陷分开设优先级——后者阻塞核心体验，先修它。
生成的页面只解决八成工作量，剩下两成是响应式补课和真实联调。把这八成交给模型、把两成做成标准清单，才是这套流程的正确用法。
评论0