AI 编程工具改前端页面很快，但页面是否真的可上线，不能只靠一句“看起来正常”。Cursor、Claude Code、Codex 可以帮你改组件、调样式、补交互、跑检查，可如果验收方式太粗，最容易漏掉移动端错位、按钮无效、表单异常、控制台报错和 SEO 结构变化。
前端页面验收的核心，是把主观观感拆成可执行检查项。你可以把本文和 AI编程工具专题、老达AI实践专题 一起看，尤其适合个人站长、独立开发者和小团队用 AI 改页面后做上线前确认。
先分清：这次页面改动属于哪一类
不同页面改动，验收重点不一样。让 AI 改代码前，先把任务分成几类，后面检查才不会乱。
- 视觉调整：重点看布局、间距、字号、颜色、图片比例和暗色模式。
- 交互调整：重点看点击、展开、筛选、弹窗、滚动、键盘操作。
- 表单调整：重点看校验、提交、错误提示、防重复提交和成功反馈。
- 数据展示：重点看空状态、长文本、加载中、异常数据和分页。
- SEO 或结构调整：重点看标题层级、内链、结构化内容和页面 meta 是否受影响。
如果你还没有把任务边界说清，可以先看 AI编程提示词怎么写。页面验收不是最后才补的一张表，而应该在需求说明里提前写进去。
第一步：让 AI 先给出验收清单
不要等它改完再问“需要检查什么”。更稳的方式是，在修改前就让 AI 根据任务类型列出验收清单。
请先阅读相关页面和组件，不要修改文件。根据本次前端页面改动，列出桌面端、移动端、交互、表单、控制台和回归检查清单，并说明每一项通过标准。
这一步能迫使 AI 提前理解页面目的。比如修改文章页目录按钮，验收项就应该包含移动端点击、滚动位置、遮罩关闭、正文不被遮挡；修改登录表单，则要包含空值、错误密码、重复提交和接口失败。
第二步：桌面端先看结构，不要只看首屏
很多前端问题不在首屏，而在第二屏、列表底部、长标题、图片加载失败和空状态。桌面端验收至少要看：
- 页面首屏是否有明显错位、遮挡、横向滚动条。
- 标题、按钮、卡片、表格和图片是否在同一视觉规则下。
- 长标题、长链接、长英文单词是否撑破容器。
- 列表为空、数据加载中、接口失败时是否有可理解状态。
- 页面滚动到底部后，页脚、分页、返回顶部和悬浮按钮是否正常。
如果改动涉及旧项目结构，可以结合 AI编程项目结构怎么整理 的方法，让 AI 先确认组件来源和样式入口，避免只修当前页面、却把共用组件改坏。
第三步：移动端必须单独验收
AI 改前端时最容易漏移动端。尤其是内容站、工具站和后台管理页，桌面端正常不代表手机端可用。移动端至少检查三个宽度：小屏手机、常见手机、平板或窄屏桌面。
- 导航菜单是否能打开和关闭。
- 按钮是否足够大，文字是否换行后仍然可读。
- 卡片、表格、代码块是否出现横向溢出。
- 悬浮按钮、弹窗、底部栏是否遮挡正文或提交按钮。
- 图片是否按比例裁切，是否出现变形或空白。
如果使用 Claude Code 或 Codex，可以让它配合浏览器截图做验证；如果只在 Cursor 里改代码，也建议至少手动打开响应式模式看一遍。移动端问题晚一天发现，修复成本通常更高。
第四步：交互验收要按路径走
交互验收不能只点一下主按钮。要按用户路径走完整流程。例如一个筛选页面，至少要检查：
- 初始加载是否正常。
- 选择筛选条件后结果是否变化。
- 清空筛选后是否恢复默认状态。
- 无结果时是否有提示。
- 刷新页面后状态是否符合预期。
对于弹窗、抽屉、下拉菜单、目录按钮这类交互，还要检查关闭方式：点击关闭按钮、点击遮罩、按 Esc、切换路由或滚动页面。很多 bug 就藏在“打开可以，关闭不干净”。
第五步：表单验收不要只测成功提交
如果页面有表单，成功提交只是最基本的一条路径。更重要的是失败和边界情况。
- 必填项为空时，提示是否明确。
- 手机号、邮箱、URL、金额等格式是否校验。
- 接口失败、网络中断、超时时用户是否知道发生了什么。
- 连续点击提交按钮是否会重复提交。
- 提交成功后页面、按钮、提示和数据是否同步更新。
这部分可以和 AI编程验收清单怎么写 一起使用。对外部用户能操作的表单，不建议让 AI 只根据代码判断，最好真实提交一次测试数据。
第六步：控制台和网络请求必须看
页面能用，不代表没有报错。上线前至少打开浏览器控制台，看三类信息：
- Console 是否有新增错误或明显警告。
- Network 是否有 404、500、跨域、资源加载失败。
- 图片、字体、脚本和接口是否有异常慢的请求。
如果发现错误，不要只把整屏日志丢给 AI。更好的做法是整理错误时间、报错文本、文件位置、复现步骤和期望结果。这个方法可以参考 AI编程 Bug 复现怎么做，让 AI 少猜、少乱改。
第七步：截图验收适合做交付证据
前端页面很适合用截图留证据。建议至少保存四类截图：
- 桌面端首屏和关键区域。
- 移动端首屏和关键交互状态。
- 表单错误状态或提交成功状态。
- 改动前后对比，尤其是布局和视觉调整。
截图不是为了形式好看，而是为了减少“我以为你检查过”的沟通成本。对客户交付、小团队协作、独立站改版来说，这些截图就是最直接的验收记录。
一个可复用提示词
请按前端上线验收标准检查这次页面改动。覆盖桌面端、移动端、布局溢出、交互路径、表单成功和失败、控制台错误、网络请求、空状态、长文本和截图证据。请先列检查项，再执行可运行的检查命令或浏览器验证。最后输出通过项、失败项、风险项和需要我人工确认的地方。
这个提示词适合给 Claude Code、Codex 或具备浏览器能力的 Agent 使用。Cursor 场景下，也可以把它拆成“代码审查 + 手动浏览器检查”两步。
老达点评
AI 编程真正省时间的地方，不是让你完全不看页面，而是把页面验收从“凭感觉看一眼”变成“按清单查一遍”。前端页面是用户直接接触的东西，样式、交互、移动端和错误状态都可能影响信任。
我的建议是：让 AI 负责列清单、跑能跑的检查、整理截图和风险；人负责看最终体验、确认关键路径和决定是否上线。这样用 Cursor、Claude Code、Codex 改前端页面，才更接近可持续的交付流程。
