3.6 图片与多模态
预计耗时：10 分钟
本关任务简报
浏览器报错截图、设计师给的 Figma 截图、监控大盘图表、竞品界面——这些信息用文字描述给 Claude 既费时又容易遗漏。
Claude Code 支持直接处理图片：把截图拖进来或粘贴进来，Claude 能读懂报错信息、识别 UI 细节、分析数据图表，不需要你把看到的东西先翻译成文字再转述。
通关奖励：解锁以下技能
- 🖼️ 掌握三种提供图片的方式（拖拽 / 粘贴 / 文件引用）
- 🐛 能用截图直接诊断报错界面
- 🎨 能从设计稿直接生成对应组件代码
- 💡 了解图片 token 消耗量，知道什么时候要控制数量
开始前先检查装备
| 前置知识 | 说明 |
|---|---|
| 2.1 界面概览 → | 了解输入框的基本操作——粘贴截图就是在这里操作的 |
图片功能的模型要求
多模态能力需要支持视觉的模型。Claude 官方模型（Sonnet 4.6、Opus 等）默认支持；如果通过中转接入国内模型，部分模型可能不支持图片输入，遇到报错说明该模型不支持。
机制解析
支持的图片格式
- PNG、JPEG、WebP、GIF（静态帧）
- 截图（系统截图工具直接粘贴）
- PDF 页面截图
三种提供图片的方式
方式一：粘贴截图
截图后用 Ctrl+V 粘贴到输入框，图片自动附加到当前消息。注意：别用 Cmd+V——macOS 的系统粘贴在这里粘进去的是文件路径文字而不是图片（iTerm2 是少数例外）；Windows / WSL 下如果 Ctrl+V 被终端拦截，改用 Alt+V。这是最快的方式，适合截完立刻发。
方式二：拖拽文件
把图片文件从文件管理器拖入 Claude Code 输入区域，自动添加到上下文。适合已经保存到本地的截图或设计文件。
方式三：@引用图片文件
@screenshot.png 这个错误界面是什么原因？
@design.jpg 根据这个设计稿生成对应的 React 组件适合图片文件已经在项目目录里的情况，可以和代码文件一起引用。
五个实用场景
场景 1：报错界面诊断
截图浏览器报错或终端错误，粘贴进来：
[粘贴报错截图]
这个报错是什么原因？如何修复？Claude 识别报错信息、HTTP 状态码、堆栈跟踪，给出诊断和具体修复建议。比复制粘贴错误文字更快，截图里的上下文（高亮颜色、行号标注）也会被识别到。
场景 2：设计稿转代码
@design-mockup.png
根据这个设计稿，用 React + Tailwind CSS 实现对应的组件。
保持颜色、间距、字体大小与设计稿一致。Claude 识别设计稿里的颜色值、布局结构、组件边界，生成对应的实现代码。
场景 3：UI 实现 vs 设计稿对比
@design.png @src/components/Card.tsx
对比设计稿和当前代码实现，列出所有不一致的地方。
（颜色、间距、圆角、字体大小等）同时引用设计图和代码文件，让 Claude 做逐项对比。
场景 4：数据图表分析
@analytics-dashboard.png
分析这个数据图表，提取关键指标，给出业务层面的解读。适合截图监控大盘、数据报告，让 Claude 帮你提炼结论。
场景 5：竞品 UI 分析
@competitor-ui.png @our-ui.png
对比这两个 UI，指出竞品在用户体验上的优势，以及我们可以借鉴的点。IDE 模式下的补充用法
在 VS Code 扩展里使用时：
- 截图任意区域后直接在 Claude Code 面板粘贴
- 可以同时附上相关代码文件，把视觉上下文和代码上下文一起给 Claude
@screenshot-of-bug.png @src/components/Button.tsx
图里的按钮点击后没有反应，帮我找出代码里的问题。图片 token 消耗说明
图片质量
截图分辨率越高，Claude 识别细节越准确。建议使用 2x 分辨率截图（Retina / HiDPI 屏幕截图效果最好）。
token 消耗
图片会占用较多 token——一张普通截图约等于 1000–3000 个文字 token。处理多张图片时注意上下文窗口，必要时用 /compact 释放空间。
开始闯关
目标：找一张真实的截图，用图片输入的方式让 Claude 分析它。
第 1 步：准备一张截图
选一种你真实遇到过的场景：
- 浏览器报错截图
- 设计稿或 UI 参考图
- 某个界面的 Bug 截图
第 2 步：用粘贴方式发给 Claude
截图后直接 Ctrl+V 粘贴，加上你的问题一起发送。
第 3 步：把图片和代码文件一起提供
如果场景允许，同时用 @文件 引用相关代码，看 Claude 在同时拿到视觉和代码上下文时的分析质量。
第 4 步：对比纯文字描述的效果
用文字把图里的内容描述一遍，再单独问一次，对比两次回答的准确度和效率。
通关检定
- [ ] 知道三种提供图片的方式（粘贴 / 拖拽 / @引用）
- [ ] 实际粘贴过一张截图，让 Claude 分析了它
- [ ] 知道图片可以和代码文件一起引用（@图片 @代码）
- [ ] 了解图片会消耗较多 token，多张图时需要注意上下文窗口
- [ ] 知道高分辨率截图能帮 Claude 识别更多细节
全部点亮就算通关 ✓
卡关了？翻车指南在这
粘贴截图后没有出现图片预览
部分终端不支持图片粘贴（尤其是基础的 CMD 和某些 SSH 场景）。改用拖拽文件的方式，或者把图片保存到本地后用 @文件名 引用。
Claude 识别的颜色值和设计稿不符
屏幕截图的颜色受显示器色彩设定影响，不一定完全准确。如果需要精确颜色，在提示词里说明："颜色值以设计稿标注的色值为准，图片仅供布局参考"，或者直接把色值文本提供给 Claude。
Claude 说看不清图片里的文字
可能是截图分辨率太低。重新截一张更大尺寸的，或者把图片里的文字同时以文本形式贴出来作为辅助：
@screenshot.png
图中的报错文字如下（供参考）：[把报错信息粘贴在这里]处理多张图片时回答质量下降
超过 3–4 张图时，Claude 的注意力会分散。建议分多轮处理：先发第一张，得到分析后再发下一张，而不是一次发完。
下一关
图片输入扩展了 Claude 的感知边界，下一关用 MCP 扩展 Claude 的行动边界——让它能真正打开浏览器、操作网页、访问数据库。