Codex CLI 图片输入：把截图交给 Codex 分析

适用场景

这篇手册适合想在终端里把截图交给 Codex 的用户。典型场景包括：页面布局截图、报错弹窗、终端错误截图、设计稿对比、移动端破版截图。

OpenAI 官方 CLI features 文档说明，Codex CLI 支持图片输入。图片可以帮助 Codex 理解纯文字难以描述的界面状态。

步骤 1：先准备清晰截图

截图要尽量包含完整上下文：

• 页面标题或路由。
• 出错组件。
• 浏览器或终端里的错误信息。
• 必要时包含窗口尺寸或设备状态。

不要只截一个模糊角落。Codex 需要看到问题和它周围的上下文。

步骤 2：去除敏感信息

上传前检查截图里是否有：

• API key、token、密码。
• 客户姓名、邮箱、手机号。
• 内部系统 URL。
• 私人聊天记录。
• 未公开业务数据。

能裁剪就裁剪，不能裁剪就打码。不要把未脱敏截图直接交给 Codex。

步骤 3：在 CLI 中附加图片

不同终端和版本的图片输入方式可能略有差异，以当前 CLI 提示为准。常见方式是把图片作为输入附件，或在提示中引用图片路径。

你可以写：

请查看这张页面截图，指出明显的布局问题。
只分析视觉问题，不要修改文件。

如果要让 Codex 修复问题，再补充：

请基于截图中的问题定位相关组件。
只修改必要样式，完成后运行 lint。

步骤 4：把截图和代码上下文连起来

只给截图，Codex 可能不知道对应代码在哪里。更好的做法是同时说明页面路径和文件线索：

这是 /manual 页面在 1280px 宽度下的截图。
相关代码可能在 src/app/manual/page.tsx 和 src/app/globals.css。
请先判断问题，不要立刻修改。

这样 Codex 更容易从视觉现象定位到代码位置。

步骤 5：用真实页面验证修复

截图能帮助定位，但修复后仍要重新验证：

• 重新打开页面。
• 截取新的截图。
• 运行 lint/build。
• 必要时检查移动端宽度。

不要只根据 Codex 的文字判断修复完成。

常见错误

不要上传模糊、裁剪过度或缺少上下文的截图。

不要用截图代替错误日志。能复制文本日志时，优先贴文本。

不要上传敏感截图。

不要让 Codex 根据截图大范围重构 UI。先要求它指出问题，再决定是否修改。

小结

图片输入适合补充视觉上下文。最稳流程是：准备清晰截图、脱敏、说明页面和文件线索、先分析再修改、最后用真实页面和命令验证。