17 · 图片与多模态使用指南

向 Claude Code 提供截图、设计稿和错误界面的方式，图片上下文适合解决什么问题，以及视觉还原时的验收要点。

Claude Code 不只会处理文字，它还能「看」图片。这一篇讲怎么用好多模态能力。

「提供图片的方式」通常是：把截图、设计稿、报错界面的图片直接贴给它，或者指定图片文件路径让它读取。

「适合解决的问题」很明确：当你用文字描述不清时，一张图顶千言。比如「这个按钮应该长这样」（贴设计稿）、「报了这么个错」（贴报错截图）、「页面渲染成这样」（贴页面截图）。

「视觉还原」类任务是图片上下文的典型场景：你给它一张设计稿，让它照着写前端界面。这时图片就是最直接的「需求文档」。

「提示词写法」上，配图时同样要讲清目标：你要它「照着这张图还原界面」，还是「分析这个报错的原因」，目的不同，它看图的重点也不同。

「验收要点」很关键：视觉类任务的验收，不能只看「代码没报错」，还要「肉眼对得上」。让它把结果也以截图形式回给你，或者你自己跑起来看，确认还原度。

「图片上下文」的局限也要清楚：它「看」的是图片内容，不是「像素级复刻」。复杂的视觉细节、精确的配色，可能有偏差，需要你验收时把关。

一句话：能贴图就别只靠文字描述。图片是最高效的「上下文」之一，用对了能省掉大段解释。

常见误区：很多新手会把这一篇讲的「基本规则」当成「教条」——什么都严格遵守。其实这些规则的核心是「降低风险、提高效率」，理解了动机，规则就自然内化了，不用死记硬背。

五分钟练习：① 找一个一分钟能完成的代码任务 ② 用这一篇的方法描述给 Codex ③ 看它执行时有没有触发你刚学的那个机制 ④ 验证结果是否符合预期。这一轮做下来，你对这一篇的理解会深 3 倍。

与其他篇的关系：这一篇是本组的基础。如果你跳过了前面几篇，建议先回去看，否则这里有些概念可能看着突兀。如果都看过了，那你可以直接进入更后面的实战环节，把这里学到的东西用上。

复盘清单：每做完一个任务，可以花一分钟复盘——目标说清楚了吗？范围限定了吗？结果验证了吗？审查过 diff 了吗？下次哪里能更好？这 5 步能让你的 Codex 使用从「能用」进化到「好用」。