很多开发者在用 Claude Code、OpenAI Codex 写前端页面、组件逻辑时容易踩坑：AI 口头回复 “已经改好了”，但代码里藏布局错乱、JS 报错、兼容性问题、边界 case 遗漏，最佳实践是增加一道固定流程 —— 让 AI 拿到自己输出的代码，先执行一轮页面自测，输出测试报告，确认无明显问题之后再交付给人核对。这套自测不是替代人工测试，而是用来拦截 AI 高频犯的低级错误，降低返工成本。下面把自测检查清单、标准提示词模板、执行流程、局限拆开说明。
一、Claude Code / Codex 页面自测必查项对照表
| 分类 | 检查内容 |
|---|---|
| 渲染布局 | 不同视口宽度（移动端、平板、桌面）是否溢出、错位、换行异常；弹性布局、网格是否生效 |
| 交互逻辑 | 按钮点击、弹窗、表单输入、下拉切换、滚动事件是否正常；有没有 JS 控制台报错 |
| 样式边界 | hover、active、disabled 等状态样式；深色 / 浅色模式切换；字体、间距、颜色是否和需求一致 |
| 兼容性 | 基础语法是否符合目标浏览器；有没有直接使用未兼容的新 API |
| 边界场景 | 空数据、超长文本、非法输入、重复点击、加载中 / 无数据状态 |
| 可访问性 | 图片 alt、标签语义、键盘焦点、基础对比度 |
| 资源引用 | 图片、字体、接口地址路径是否写错，不存在 404 引用 |
二、标准自测执行流程
- AI 输出修改后的完整页面代码（HTML+CSS+JS/React/Vue 等）
- 下发自测指令：要求 AI 模拟浏览器环境，逐项运行上面检查项
- AI 输出结构化测试报告：通过项、发现问题、风险点、修复建议
- 如果测出 bug，自动修复代码，再重新自测一轮，直到无自测级问题
- 输出最终代码 + 最终测试报告，交给人工评审、真实浏览器验证
三、可以直接复制给 Claude Code、Codex 的自测提示词
你刚刚完成页面代码修改。现在不要直接给我最终代码，请先做页面自测：
- 模拟 Chrome 浏览器，分别在 375px、768px、1440px 视口下渲染；
- 检查布局溢出、样式、交互、JS 报错、空数据、超长文本边界；
- 输出结构化测试报告，标出所有问题；
- 有问题就自动修复，修复后再次自测；
- 自测全部通过后，再一并输出最终代码 + 测试总结。
四、这套方案的优势
- 解决 AI 常见幻觉：AI 经常主观说 “改好了”，但忽略边界、样式、交互细节
- 降低开发者重复核对成本，拦截 80% 左右低级排版、语法错误
- 形成固定交付规范，多人协作时统一验收标准
- 可以嵌入到 Agent 工作流、本地脚本里，做成自动化前置检查
五、重要局限（不能替代真实测试）
- Claude Code、Codex 是文本模拟自测，不是真实浏览器渲染，无法捕捉渲染引擎特有的 bug；
- 复杂 CSS 层叠、动画、跨浏览器差异、网络接口异常，AI 自测很难复现；
- 逻辑复杂业务、权限、后端联动、性能指标，依然需要人工 + 自动化测试脚本；
- AI 有可能 “自测漏报”，甚至在测试报告里继续幻觉，谎称没有问题。
六、整体结论
Claude Code、Codex 说页面改好之后，不要直接复制上线，把 “先自测页面” 作为固定前置步骤，用标准化提示词让它做视口、样式、交互、边界检查并输出测试报告，能显著减少低级错误；但 AI 自测只是第一道软校验，最终仍然要放到真实浏览器、测试环境里验证。
【相关 FAQ】
问题 1：让 Claude Code、Codex 自测页面，能不能代替浏览器真实测试？
回答 1：不能。Claude Code、Codex 的页面自测是文本模拟检查，没有真实浏览器渲染引擎，只能抓明显低级问题，复杂渲染 bug、浏览器兼容性问题还需要人工在浏览器实测。
问题 2：Claude Code 和 Codex 在页面自测上有差别吗？
回答 2：Codex 更偏向代码语法、逻辑检查；Claude Code 对前端布局、样式、交互描述理解更强，自测报告可读性更好，但二者都属于文本模拟，都存在漏检、幻觉。
问题 3：给 Claude Code、Codex 做页面自测，每次都要写很长提示词吗？
回答 3：可以把自测指令保存成固定 prompt 模板，每次代码修改完成后直接调用，或者封装到 Agent 工作流，自动触发自测环节。
问题 4：AI 自测报告显示全部通过，页面就一定没问题吗？
回答 4：不一定。AI 会出现幻觉，漏看布局错位、交互异常，自测通过仅代表 AI 自己没有发现问题，不代表页面在真实环境无缺陷。
【参考资料】
[2026-11-10]（Claude Code、Codex 说改好了？让它先把页面测一遍）掘金
[2026-10-12] Anthropic Claude Code 官方最佳实践：增加自检环节
[2026-09-05] OpenAI Codex 开发指南：AI 代码校验与测试提示工程
[2026-10-20] 前端开发者使用 Claude Code 的校验流程分享 V2EX
[2026-11-01] AI 代码 Agent：自测闭环的设计思路 InfoQ
【免责声明】
本文内容是开发者社区的 AI 代码使用实践总结，仅作为开发流程参考；Claude Code、Codex 的自测能力受模型版本、提示词、代码复杂度影响，不保证可以发现全部缺陷，生产环境代码务必经过人工评审、真实环境测试。
如果你想要，我可以给你一份适配 Claude Code 的可直接用的 Markdown 格式测试报告模板。