用 Codex 根据截图实现并迭代界面

截图只能告诉你某一时刻的像素，不能告诉你组件结构、响应式规则、交互状态和数据边界。本章把截图任务拆成“视觉证据 + 文字规格 + 项目约束 + 浏览器验收”，最终交付可运行页面。

开始前准备四类输入

1. 参考图：尽量保留原始分辨率，说明哪些区域必须接近。
2. 目标位置：现有路由、组件目录和入口。
3. 实现约束：框架、样式方案、组件库、浏览器支持。
4. 截图看不到的行为：移动端、hover、loading、空状态、错误状态、键盘操作。

如果图片来自第三方产品，只把它当作布局和交互参考，不复制其商标、受保护素材和独特品牌元素。

第一步：让 Codex 先研究项目风格

先不要实现。阅读当前项目中最接近的页面、布局组件、颜色/间距 token、表单和响应式写法。

输出：
- 应复用的组件和样式变量；
- 新页面建议放置的路由与文件；
- 参考截图中可识别的布局区域；
- 截图没有表达、需要我确认的交互和移动端问题。

这一步可以避免生成第二套按钮、卡片和断点系统。

第二步：把截图改写成可执行规格

示例：

根据附件实现 /analytics 页面。

视觉重点：
- 顶部标题与筛选区保持单行，宽屏时右对齐；
- 主指标区使用 4 列，不要把所有内容都做成独立浮层卡片；
- 图表区域比侧栏更突出；
- 使用项目现有字体、颜色和圆角，不复制截图品牌。

响应式：
- >= 1200px：4 列指标 + 主图表/侧栏；
- 768-1199px：2 列指标，侧栏移到图表下；
- < 768px：单列，筛选控件可换行，触控目标至少容易点击。

交互：
- 筛选时显示 loading；
- 无数据时显示解释和重置入口；
- 请求失败时保留筛选条件并允许重试；
- 键盘可以操作筛选和按钮。

先实现页面骨架和静态数据，不接真实 API。只修改该路由及必要共享组件。

第三步：先做骨架，再做细节

推荐顺序：

1. 页面区域与信息层级；
2. 栅格和响应式；
3. 复用组件和真实数据形状；
4. 字体、间距和颜色；
5. 交互状态；
6. 动画和装饰。

如果第一轮就同时追求像素、接口、动画和所有状态，问题会互相遮挡。

第四步：启动真实页面验证

按项目运行开发服务器，例如：

npm run dev

让 Codex 使用可用的浏览器能力打开实际路由：

打开本地页面并验证 /analytics。先检查控制台和网络错误，再按桌面、平板、手机三个尺寸检查布局。对照参考图列出最明显的五个差异，然后只修优先级最高的两项。

如果没有浏览器工具，让 Codex明确告诉你 URL 和检查步骤，由你打开页面并反馈截图。

第五步：小步迭代

不要发送“再高级一点”。指出具体差异：

保持现有布局，只调整顶部区域：
- 标题和筛选之间增加呼吸感；
- 筛选按钮高度与输入框一致；
- 手机宽度下按钮占满可用宽度；
- 不改图表和侧栏。

每轮只改一个区域，重新观察后再继续。这样更容易判断哪次改动造成回归。

第六步：补齐状态与可访问性

至少检查：

• 初始、loading、空数据、部分数据、错误和成功；
• 文本变长、数字变大、国际化和窄屏；
• 键盘焦点可见；
• 表单有标签，图标按钮有可读名称；
• 颜色不是唯一状态提示；
• 图片有合适替代文本；
• 动画尊重减少动态效果偏好；
• 触控目标和间距足够。

提示：

对这个页面做一次状态和可访问性审查。先报告会阻止使用的问题，再做最小修复。不要为了满足检查器大规模重写结构。

第七步：接入真实数据

静态结构确认后再接 API。要求保留：

• 请求取消和重复请求处理；
• 服务端错误与字段缺失；
• 权限拒绝；
• 旧数据兼容；
• loading 不闪烁或永久卡住；
• 数据格式化与时区规则。

不要用假数据中的完美长度判断真实布局。

验收矩阵

项目	检查方式
视觉层级	首屏 5 秒内能识别标题、主要指标和主操作
桌面布局	常用宽屏无溢出、遮挡和异常空白
移动布局	单列顺序合理，控件可点击，文本不截断
状态	loading、空、错、成功均可触发
控制台	没有新增错误和关键警告
网络	没有重复请求、失败死循环和错误接口
可访问性	键盘可完成主要流程，焦点清楚
工程验证	类型检查、测试和构建通过

常见失败

页面像，但不可维护

通常是大量绝对定位和硬编码尺寸。要求回到项目的布局与 token 系统。

桌面像，手机崩

截图只提供了一个尺寸。响应式规则必须由文字规格补充并实际验证。

视觉优化破坏业务

要求保留现有表单字段、错误码和交互语义，视觉与数据接入分阶段完成。

为了素材阻塞实现

先使用明确占位资源或项目现有资产。品牌 Logo、人物和商品图必须由有权使用的素材替换。

下一步

界面完成后进入 代码审查、Git 与 PR 闭环。大型 UI 架构调整先学习 可回退的重构与迁移。

参考

• OpenAI Prompting：Prototype from a screenshot
• OpenAI Prompting：Iterate on UI