Codex 用截图说明界面问题
本页目标
学完本页，你能提交一张真实界面截图，让 Codex 指出指定区域的问题，并把视觉判断对应到项目中的真实文件。
验证范围（2026-07-11） CLI 图片输入能力和参数已对照 OpenAI 官方文档；下方问题图由本站练习页真实拍摄，但图片附件交互未在制作环境完成 CLI 实机回放。请以当前客户端的附件显示为准。
开始前
截图中不要出现账号、密钥、客户资料或私人消息。最好用方框或箭头标出问题区域，并在文字中说明“现在怎样、希望怎样”。截图只能证明视觉现象，不能单独证明代码原因。
Codex CLI 可以在交互输入框中粘贴图片，也可以用 -i 或 --image 附加 PNG、JPEG 等常见图片。界面和附件显示方式随版本变化，以当前界面为准。
跟着做
- 打开可复现练习页，把浏览器调到约 390px 宽，保存问题截图为
ui-problem.png。 - 在对应项目中启动 Codex，把图片粘贴到交互输入框。
- 在同一次请求中提交下面的完整提示词，暂时不要要求修改代码。
- 打开回答提到的组件和样式文件，核对它给出的原因。
Codex · 可复制提示词
根据截图定位界面问题
这张图是当前页面。红框内的“提交”按钮在 390px 宽度时越出卡片，期望它完整留在卡片内。
请先只读分析：
1. 用一句话复述你在红框内看到的现象；
2. 在当前项目中定位最相关的组件和样式文件，并给出路径；
3. 说明最可能原因、置信度和最小修复思路；
4. 给出修复后需要检查的屏幕尺寸。
不要修改文件。无法仅凭截图确认的内容请明确标为推测。预期结果
得到视觉现象、代码证据、可能原因和验证尺寸组成的只读报告
如果更习惯单次命令，也可以用 codex -i ui-problem.png "{完整提示词}"，但要把上面的完整提示词作为这一次请求的参数，不要先提交简短请求再重复分析。
结果检查
第一句话应与截图中的现象一致，随后至少出现一个真实组件或样式路径。若回答把视觉推测写成确定事实，或者引用不存在的路径，应指出错误并要求重新检查，而不是直接让它修改代码。
合格报告还会给出可重复的验证条件，例如 390px 和 768px 两个宽度。这样下一步修复时，才能判断问题是否真的消失。
练习
动手练习
比较修改前后两张图
附加 before.png 和 after.png，让 Codex 只列出三处视觉变化以及仍需确认的问题。
完成标准：回答能区分两张图，并且没有凭截图断言无法看到的代码实现。
本页小结
截图能补足文字难以描述的视觉信息，但仍要说明重点、现状和预期。可靠结果必须同时包含图像观察、真实代码证据和可重复的验证条件。