纯度AI让 Claude Code 看图：报错截图、设计稿和架构图怎么交给它，它看得有多细
报错截图、设计稿、架构图都能直接交给 Claude Code。本站实测四类图：报错能对上代码找到根因，照设计稿写的页面和原图几乎重合，架构图全读对；但 4K 截图会先被缩到 2000 像素再发，小字会抄错且不标问号，先裁出那一块再看就全对了。
本站已实测，测试日期：2026-10-21。
本页目录（11 节）
这篇解决一个问题：有些东西截图比打字说得清楚，比如一屏报错、一张设计稿、一张架构图。怎么交给 Claude Code，它又能看清多少？
本站在服务器上准备了四张图，让 Claude Code 分别去看，每次都从会话记录里把它实际发给模型的那张图解出来，量了尺寸。结论先放在这里：
- 截图里的报错，它会对上仓库里的代码找根因，不只是复述截图。
- 照设计稿写页面，写出来的和原图几乎重合。
- 架构图里的组件、箭头和箭头上的字全读对了。
- 大图会被 Claude Code 先缩小再发出去。 一张 3840×2160 的截图发出去时是 2000×1125。里面的小字它会抄错，而且不打问号；让它先裁出那一块再看，就全对了。
实测环境
| 项目 | 内容 |
|---|---|
| 日期 | 2026-10-21 |
| 版本 | Claude Code 2.1.304 |
| 系统 | Ubuntu 24.04，没有图形界面 |
| 模型 | Sonnet 5.5（--model claude-sonnet-5-5），都用 claude -p 跑 |
| 连接方式 | 通过酷站AI 中转站，不是直连官方 |
| 示例项目 | 一个小的 Python 项目：读订单文件，打印每单总额。图都是本站用无界面浏览器渲染的，放在 shots/ 下；设计稿和架构图的源文件不在项目里，它只能看图 |
| 花费 | 9 次运行，Claude Code 自己按官方价估算一共约 0.31 美元 |
服务器没有图形界面，所以终端里粘贴、拖拽图片这两种办法没有测，照文档写。
怎么把图交给它
官方文档列了三种办法：
| 办法 | 怎么做 | 本站 |
|---|---|---|
| 粘贴 | 复制图片后在输入框里按 Ctrl+V；macOS 上的 iTerm2 用 Cmd+V，Windows 和 WSL 用 Alt+V。输入框里会出现一个 [Image #1] 这样的标记，提问时可以用它指代 |
没有测 |
| 拖进窗口 | 把图片文件拖到 Claude Code 的窗口里 | 没有测 |
| 给路径 | 在提问里写图片的路径，或者用 @ 引用 |
测了 |
给路径的两种写法，实测走的路不一样：
| 写法 | 会话记录里看到的 |
|---|---|
@shots/error.png 这是报错截图…… |
图片作为附件，直接放进了第一条消息，它不用再去读 |
看一下 shots/error.png 这张截图…… |
它先调用读文件工具（Read）把图读进来，多一轮 |
两种写法回答的质量一样。另有一点：@ 一张 4K、964 KB 的大图时，会话记录里没有附件，它还是自己调了读文件工具。官方文档没有写这一点，本站只测到这一次。
回答里提到图片时（比如 [Image #1]），按住 Cmd（macOS）或 Ctrl（Windows、Linux）点它，可以用系统的看图程序打开。
一、报错截图：它会对上代码
截图是真跑出来的：订单文件里单价的字段叫 unit_price，代码读的是 price。
提问：
@shots/error.png 这是我跑报表时的报错截图。原因是什么？该改哪个文件的哪一行？先别改代码。它没有停在复述截图上：读了 prices.py、report.py，又打开 orders.json 看数据，结论是数据里叫 unit_price、代码读的是 price，该改 shop/prices.py 第 5 行，并说明两个订单都用 unit_price，所以改代码一处就够，不必改数据。和实际情况完全一致。花费约 2 美分。
还有个意外的发现。第一次渲染截图时窗口高度给小了，最后一行 KeyError: 'price' 没拍进去。两种写法它都照样找到了原因，而且都写明了截图最后一行被截掉、异常类型是它根据调用栈和数据推断的、没有实际运行。截图不全时，它会说出来。
二、设计稿：写出来的页面和原图几乎重合
给它一张登录页的设计稿，只给图：
照着 shots/mockup.png 写一个 login.html：单文件，CSS 写在 style 标签里，不引用任何外部资源。尽量还原布局、间距、颜色和字号，图里的文字照抄。写完不用解释。左边是设计稿，右边是它写的 login.html 在同样大小的浏览器窗口里的样子：
本站逐个比了元素的位置：横向完全对上；纵向每个元素差 2 到 7 像素，越往下累积得越多（按钮差 7 像素）。颜色、圆角、阴影、字号肉眼看不出差别，文字一字不差，没有引用任何外部资源。用了 3 轮，约 4 美分。
想要更准，可以接着让它在浏览器里打开对比，见《前端联调：让 Claude Code 自己开浏览器验证改动》。
三、架构图：组件和箭头全读对了
shots/arch.png 是我们的架构图。列出图里所有的组件，以及每一条箭头从哪到哪、箭头上写的字。用表格。8 个组件、7 条箭头、6 处标注（5 处中文加一个 HTTPS）全对，Nginx → API 服务 那条它也注明了没有文字。有一条它先读反了：把“取任务”写成了图片 Worker 指向消息队列，紧接着自己补了一行更正，说箭头头画在图片 Worker 那一侧，应该是消息队列指向图片 Worker。斜着的箭头，方向值得核对一眼。
四、大图里的小字：先缩小，再看
这一项是这篇最想说的。准备了一张 3840×2160 的日志截图，150 行，13 像素的等宽字，每行有一个 12 位的十六进制请求号。让它把第 087 到 092 行原样抄下来，看不清的用 ? 代替。
它看到的不是原图。 从会话记录里解出来，Claude Code 发给模型的是一张 2000×1125 的 JPEG（原图是 964 KB 的 PNG，发出去的是 255 KB）。官方文档说读文件工具会“缩小并重新压缩大图”，报错信息里出现的上限也是 2000×2000 像素。模型这一档本身能看到长边 2576 像素，Claude Code 在前面先缩到了 2000。
下面是那几行的局部。上面是缩小后的图里这一块（放大到同样宽度），下面是原图：
三种问法，各跑一次：
| 问法 | 发出去的图 | 抄错的字符（不算空格个数） |
|---|---|---|
| 给路径，直接抄 | 2000×1125 | 3 个：请求号里的 0 抄成了 9 或 8 |
@ 引用，直接抄 |
2000×1125 | 2 处：一个 0 抄成 9，还在 /healthz 前面多写了 /v1 |
| 让它先用 ffmpeg 裁出那一块再抄 | 先看整图，再看裁出来的 700×240 | 0 |
两点要注意：
- 看不清的时候它不一定说。 明确要求了看不清就写
?，三次都没有用，错的地方是直接猜的；两次错的位置还不一样。要拿截图里的 ID、哈希、版本号去干活，先核对。 - 让它裁图是官方的建议。 读文件工具的文档说，Claude 看漏了大图里的细节时，让它把你关心的那块裁出来再读。本站这次给了它
ffmpeg的权限（--allowedTools "Bash(ffmpeg *)"），它先量了图片尺寸，看了一眼整图估出那几行的位置，裁出 700×240 的一块读，六行全对。它还想再裁一条、放大 3 倍存到/tmp去看。读项目目录以外的文件要批准，-p模式下没人批，这一步被拒了，好在裁出的那块已经够了。裁出来的图放在项目目录里，免得读不了。
更省事的做法是截图时就只截要紧的那一块，官方排错文档也是这么建议的。
花多少 token
图片按 28×28 像素一块计费，⌈宽 / 28⌉ × ⌈高 / 28⌉。按开发平台文档的公式算这次的几张图：
| 图 | 发出去的尺寸 | 大约多少 token |
|---|---|---|
| 报错截图 | 1100×600 | 880 |
| 设计稿 | 1280×800 | 1,334 |
| 架构图 | 1600×1000 | 2,088 |
| 4K 日志截图 | 2000×1125（缩小后） | 2,952 |
| 裁出来的一块 | 700×240 | 225 |
每张都会留在上下文里，跟着后面的每一轮重发（多数时候命中缓存）。图多了，官方排错文档建议用 /compact 把攒下的图片清掉。
图片相关的报错
都出自官方的错误参考页，本站这次没有碰到：
| 报错 | 意思 | 怎么办 |
|---|---|---|
Image was too large、image dimensions exceed max allowed size |
图片超过了接口的尺寸或大小上限 | 文档说接口单张图长边最多 8000 像素，上下文里超过 20 张图时每张最多 3000 像素。截小一点再发 |
Request too large (max 32MB) |
对话里攒的图片和附件太多 | /compact，或者按两下 Esc 退回去 |
Unable to resize image |
Claude Code 没法把图缩小，比如 CMYK 的 JPEG、解不开的动图 | 转成 PNG、JPEG、GIF 或 WebP 再发 |
File is too large to read as an image (the limit is 128MB) |
读文件工具不读超过 128 MB 的图 | 导出一张小的 |
支持的格式是 PNG、JPEG、GIF、WebP，动图只看第一帧。
什么时候用图
- 报错、界面问题、设计稿、白板上的架构草图：截图比打字快，也比转述准。
- 截图里的报错文字能复制的话，文字比截图更好：不用担心看错，token 也少。
- 要它照着抄的长串（ID、哈希、版本号），给文字，别给图。非给图不可，只截那一块，或者让它先裁。
这次实测没有覆盖到的
- 粘贴和拖拽没有测，服务器没有图形界面。VS Code 扩展、桌面应用里加图片的方式也没有测。
- 只用了 Sonnet 5.5。 其他模型看图的准确度可能不同。
- 每种问法只跑了一次。 抄小字的错误每次不一样，三次的结果只能说明“会错、会猜”，说明不了错误率。
- 缩到 2000 像素是在 2.1.304 上测到的，以后的版本可能会变。
- 通过中转站看图和直连官方有没有差别，这次没有对比；经中转站发图片本身是正常的。