# Codex 前端视觉 QA 清单

核验日期：2026-07-21

## 参考与环境

- [ ] 参考图、实现页使用相同视口和页面状态。
- [ ] 记录浏览器、设备尺寸、缩放比例和测试数据。
- [ ] 真实图片、字体和图标已加载，不使用占位资产判断通过。

## Desktop

- [ ] Header 高度、对齐和交互正确。
- [ ] 首屏主视觉、标题、CTA 与参考层级一致。
- [ ] 容器宽度、列宽、卡片间距稳定。
- [ ] 长标题、状态标签和按钮不挤压布局。
- [ ] Hover、focus、disabled、loading 状态可辨认。

## Mobile

- [ ] `scrollWidth` 等于 viewport width。
- [ ] 主标题换行自然，搜索和主 CTA 可单手操作。
- [ ] 卡片内容不被截断，图片比例稳定。
- [ ] 菜单打开、关闭和焦点顺序正确。
- [ ] 键盘弹出后表单仍可提交。

## 核心流程

- [ ] 所有主要入口真实可点击。
- [ ] 登录、筛选、搜索、表单、保存和返回路径完整。
- [ ] 空状态、错误状态和成功状态有下一步。
- [ ] 控制台无明显错误，网络请求无 500。
- [ ] 可访问性名称、焦点样式和对比度基本合格。

## 差异记录

```md
| 页面 | 视口 | 差异 | 严重度 | 修复 | 复测 |
| --- | --- | --- | --- | --- | --- |
```

## 严重度建议

- P0：核心流程不可用、数据错误、安全或隐私风险。
- P1：页面明显错位、关键 CTA 不可用、移动端横向溢出。
- P2：间距、字号、边框、状态或局部响应式与参考不一致。
- P3：不影响任务完成的轻微视觉细节。

## Codex 任务说明建议

给 Codex 提供参考图和当前页面的同视口截图，明确只修可见差异，不重新设计。每轮只处理一组相关问题，修复后重新截图并真实点击主流程。截图只能证明某一瞬间的像素状态，不能替代表单、导航、加载、错误和权限流程验证。

官方来源：

- https://learn.chatgpt.com/docs/codex/browser
- https://learn.chatgpt.com/docs/codex/image-inputs