15. 图片输入与生成

本节目标：学会把截图、设计稿、报错画面喂给 Codex，知道图片生成在哪能用、怎么用，掌握参考图迭代工作流。

为什么需要图片输入

有些东西用文字描述又慢又不准。一个报错弹窗，你打字描述「红色的框，上面写着 TypeError，后面跟了一串路径」—Codex 听得云里雾里。直接截个图丢给它，它一眼就知道怎么回事。

再比如设计稿。你让 Codex 照着 Figma 截图实现一个组件，比用文字描述「左边一个圆角按钮，右边一个输入框，间距大概是 16px」靠谱多了。图片输入就是让你的眼睛和 Codex 的眼睛对齐。

CLI 里喂图片：—image 参数

在 CLI 里，用 --image（简写 -i）把图片跟提示词一起喂给它：

codex -i error.png "这个报错怎么回事，帮我修"

可以一次喂多张：

codex -i design.png -i current.png "对照设计稿，当前页面还差什么"

Note

CLI 的输入框也能直接粘贴图片。复制一张截图到剪贴板，在输入框里粘贴，它会像普通附件一样附在消息上。

桌面 App 和 IDE 里喂图片

桌面 App 和 IDE 扩展喂图片更直观，不用记参数。

桌面 App

在桌面 App 的输入框里，直接拖拽图片文件进去，或者粘贴剪贴板里的截图。图片会作为附件附在消息上，和文字一起发给 Codex。

IDE 扩展（VS Code）

在 VS Code 的 Codex 聊天框里，也可以拖拽图片。但有个坑得记住：

Warning

拖放图片时按住 Shift，否则 VS Code 会拦住扩展的拖放。这和 VS Code 处理附件的机制有关，不是 Codex 的 bug。

Appshot：一键截屏喂给 Codex（macOS 专属）

macOS 版 ChatGPT 桌面应用有个很方便的功能叫 Appshot。按下左右两个 Command 键（或你自定义的快捷键），它会把当前最前方的应用窗口截下来，直接塞进聊天。

一张 Appshot 捕获的不只是可见的图像，还包括该窗口提供的文本—包括屏幕上可见的文字，以及应用在当前滚动区域之外公开的文字。

适合的场景：

分享 API 参考页面，让 Codex 编写使用该 API 的脚本
分享错误、设置面板或难以用文字描述的应用状态
分享设计工具或预览窗口，让 Codex 修改相关资源或代码

Note

Appshot 需要 macOS 的「屏幕与系统音频录制」和「辅助功能」权限。第一次使用会弹窗提示，按提示给就行。Appshot 只能在 macOS 桌面应用里创建；如果聊天里已有 Appshot，在 CLI 里继续这个聊天时它仍属于聊天历史，但 CLI 无法创建新的 Appshot。

图片输入的典型场景

你手里的图	你想干啥	怎么说
报错截图	让它诊断并修复	「这个报错怎么回事，帮我修」
设计稿截图	照着实现组件	「照这张设计稿实现这个卡片组件，用 TailwindCSS」
当前页面截图	让它找 UI 问题	「对照设计稿，当前页面还差什么」
API 文档截图	让它写调用代码	「按这个 API 文档写一个调用脚本」
手绘草图	让它生成原型代码	「照这个草图生成一个 HTML 原型」

Tip

喂图片时，别光丢图不说话。配上几句具体指令—你想让它看图的哪个部分、要做什么、有什么约束—效果比光丢一张图好得多。

图片生成

Codex 不只能读图，还能生成图片。在桌面 App 和 IDE 扩展里，你可以直接让 Codex 画图。

怎么用

直接在对话里用自然语言描述你要什么图：

帮我生成一个网站的 og-image，尺寸 1200x630，
深色背景，中间放一个发光的代码编辑器图标，底部写上"Codex 教程"

Codex 会调用图像生成能力，把图直接画出来给你。

图片编辑

生成的图还能继续编辑。你可以说「把背景换成浅色」「把文字放大一点」「加一个 logo 在左上角」，它会基于上一张图迭代修改，不用从头来。

参考图迭代

这是最实用的组合技：先用图片输入给一张参考图，再让它基于参考图生成新图。

比如你有一张旧版 logo，想做个新版：

[附上旧 logo 截图]
参考这个 logo 的风格和配色，帮我生成一个新版，
把文字改成"Codex"，图标换成代码括号

它会读参考图的风格、配色、布局，基于这些信息生成新图。比纯文字描述「风格类似但不太一样」精确得多。

Note

图片生成与本地消息、云端任务共用通用额度。根据图片质量和尺寸，平均消耗速度约为不含图片生成的类似会话轮次的 3-5 倍。用完包含额度后，图片生成也会继续消耗 credits。Free 计划不提供图片生成；通过 API key 使用时按 API 价格计费。

图片输入的注意事项

图片是会话上下文的一部分。 你喂的每张图都会占用 token 额度—大图比小图费得多。如果一张截图只有左上角那一小块有用，先裁一下再喂，别整张 4K 截图直接丢进去。

截图里别带敏感信息。 你喂给 Codex 的图片会被当作上下文处理。如果截图里不小心带了 API key、密码、内部 URL—这些信息就可能进入会话历史。截图前先检查一眼。

Warning

在 IDE 扩展里，自动上下文（/auto-context）开启时，它可能自动带上你最近打开的文件。如果你最近在看敏感文件，喂图片前先确认一下附带上下文里有没有不该出现的东西。

动手：用截图让 Codex 修 bug

截一张报错截图。遇到报错时，别急着打字描述，先截个图：

# macOS: Cmd+Shift+4 选区截图
# Windows: Win+Shift+S 选区截图

在 CLI 里喂给它：

codex -i error.png "这个报错怎么回事，帮我修"

或者在桌面 App / IDE 的输入框里粘贴截图，配上指令。

看它怎么诊断。Codex 会读图里的报错信息，自己去翻对应代码、定位问题、给出修复方案。
如果是 UI 问题，截当前状态和期望状态两张图：

codex -i current.png -i design.png "当前页面和设计稿对比，帮我修到一致"

跑通这几步，你就把「截图喂给 Codex 让它干活」这条最实用的多模态链路走了一遍。

小结

能力	在哪用	怎么用
图片输入（CLI）	CLI	`codex -i image.png "指令"` 或粘贴
图片输入（桌面 App）	桌面 App	拖拽或粘贴到输入框
图片输入（IDE）	VS Code 等	拖拽（按住 `Shift`）或粘贴
Appshot	macOS 桌面 App	按左右两个 Command 键
图片生成	桌面 App / IDE	自然语言描述，直接画
图片编辑	桌面 App / IDE	基于上一张图迭代修改
参考图迭代	全入口	先喂参考图，再让它基于参考图生成

图片输入是 Codex 多模态能力里最实用的部分—报错截图、设计稿、UI 对比，这些日常场景用图片比用文字快十倍。图片生成则是顺手能用的辅助能力，生成 og-image、画示意图、做原型预览，不用再切到别的工具。记住一条：喂图时配几句具体指令，效果比光丢图好得多。

下一章咱们讲 Web 搜索与内置浏览器—怎么在终端里搜最新信息、用内置浏览器预览本地页面。