多模态能力
Multimodal Capabilities
Claude Code 不仅能处理文本和代码，还支持图片、截图和 PDF 等多种媒体格式。多模态能力让 Claude 能够理解视觉信息，大幅扩展了辅助开发的场景。
图片支持概览
Image Support Overview
Claude Code 可以接收和分析多种图片格式，理解其中的内容并据此执行操作。
支持的图片格式
| 格式 | 扩展名 | 说明 |
|---|---|---|
| PNG | .png | 最常用，适合截图和 UI 设计 |
| JPEG | .jpg, .jpeg | 适合照片和复杂图像 |
| GIF | .gif | 支持静态 GIF，动画 GIF 取第一帧 |
| WebP | .webp | 现代格式，体积更小 |
图片大小限制
| 限制类型 | 值 |
|---|---|
| 最大文件大小 | 约 20MB |
| 最大分辨率 | 建议不超过 8000x8000 像素 |
| 单次对话图片数 | 多张（受上下文窗口限制） |
| Token 消耗 | 取决于图片大小和复杂度 |
截图分析
Screenshot Analysis
截图分析是 Claude Code 最实用的多模态功能之一。
使用场景
Bug 截图分析
bash
# 拖拽 bug 截图到终端
> [拖入 error-screenshot.png]
> 这个错误截图显示了什么问题？如何修复？
# Claude 的分析:
从截图中我可以看到一个 React 渲染错误:
"TypeError: Cannot read property 'map' of undefined"
错误发生在 UserList.tsx 的第 23 行。
这表明 users 数据在组件渲染时尚未加载。
修复建议:tsx
// 修复前
function UserList({ users }) {
return (
<ul>
{users.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}
// 修复后 - 添加空值检查
function UserList({ users }) {
if (!users || users.length === 0) {
return <p>暂无用户数据</p>;
}
return (
<ul>
{users.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}UI 审查
bash
> [拖入 design-mockup.png]
> 对比这个设计稿，检查当前实现的 CSS 问题
# Claude 可以识别:
# - 间距不一致
# - 字体大小差异
# - 颜色不匹配
# - 布局偏移
# - 响应式问题设计稿还原
bash
> [拖入 figma-export.png]
> 根据这个设计稿实现一个 React 组件
# Claude 会分析设计稿中的:
# - 布局结构
# - 颜色方案
# - 字体样式
# - 间距和对齐
# - 交互元素
# 然后生成对应的组件代码图片输入方式
Image Input Methods
拖拽图片到终端
在支持的终端中，你可以直接将图片文件拖拽到 Claude Code 的输入区域。
支持拖拽的终端
| 终端 | 支持情况 | 备注 |
|---|---|---|
| iTerm2 (macOS) | 完全支持 | 推荐使用 |
| Warp (macOS) | 支持 | |
| Windows Terminal | 部分支持 | 取决于版本 |
| VS Code 终端 | 支持 | 通过 VS Code 扩展 |
| Ghostty | 支持 | |
| Alacritty | 部分支持 | 需要配置 |
| 标准 Terminal.app | 有限支持 | 功能受限 |
拖拽操作步骤
1. 在文件管理器中找到图片文件
2. 将图片拖拽到终端窗口的 Claude Code 输入区域
3. 图片会自动加载到上下文中
4. 输入你的问题或指令
5. 按 Enter 发送从剪贴板粘贴图片
在支持的环境中，你可以直接从剪贴板粘贴截图。
bash
# 操作步骤:
# 1. 使用系统截图工具截取屏幕 (Cmd+Shift+4 或 Win+Shift+S)
# 2. 截图自动保存到剪贴板
# 3. 在 Claude Code 输入区域粘贴 (Cmd+V 或 Ctrl+V)
# 4. 图片被加载到上下文
# 5. 输入指令并发送通过文件路径引用
bash
# 直接在对话中引用图片文件路径
> 请分析这张截图: /path/to/screenshot.png
# 在 VS Code 中使用 @-mention
> 请查看 @assets/mockup.png 并实现对应的组件通过 Read 工具读取
Claude Code 的 Read 工具也支持读取图片文件：
bash
# Claude 可以主动使用 Read 工具
> 请读取 docs/images/architecture.png 并描述系统架构
# Claude 会使用 Read 工具加载图片
# 然后分析并描述其中的内容在 VS Code 中使用
Using in VS Code
VS Code 扩展提供了更丰富的图片交互方式。
@-mention 引用图片
bash
# 在 VS Code 的 Claude Code 面板中
> 请根据 @src/assets/login-design.png 实现登录页面
# 或引用多张图片
> 对比 @screenshots/before.png 和 @screenshots/after.png 的差异从编辑器拖拽
1. 在 VS Code 资源管理器中找到图片
2. 将图片拖拽到 Claude Code 的聊天输入框
3. 图片会作为附件添加到消息中截图比较工作流
bash
# 一个典型的 UI 调试工作流
# 1. 截取当前页面
> [粘贴当前页面截图]
> 这个页面有什么 CSS 问题？
# 2. 获取修复建议并应用
> 请修复刚才提到的间距问题
# 3. 截取修复后的页面
> [粘贴修复后截图]
> 修复后的效果是否正确？还有其他问题吗？PDF 处理能力
PDF Processing
Claude Code 可以读取和分析 PDF 文档，提取其中的文本和视觉信息。
PDF 支持详情
| 功能 | 支持情况 | 说明 |
|---|---|---|
| 文本提取 | 支持 | 准确提取 PDF 中的文本 |
| 表格识别 | 支持 | 识别表格结构 |
| 图表理解 | 支持 | 理解图表含义 |
| 多页处理 | 支持 | 需要指定页面范围 |
| 扫描件 OCR | 部分支持 | 依赖图像质量 |
| 加密 PDF | 不支持 | 需要先解密 |
使用方式
bash
# 读取 PDF 文件
> 请阅读 docs/api-spec.pdf 并总结 API 设计
# 指定页面范围（大型 PDF 必须指定）
> 请读取 docs/manual.pdf 的第 1-5 页
# 提取表格数据
> 请从 reports/q4-report.pdf 中提取销售数据表格
# 理解图表
> 请分析 docs/architecture.pdf 第 3 页的系统架构图PDF 读取限制
大型 PDF 文件注意事项:
├── 超过 10 页的 PDF 必须指定页面范围
├── 每次请求最多读取 20 页
├── 大文件会消耗大量上下文空间
└── 建议分批读取长文档PDF 使用示例
bash
# 从 API 文档生成代码
> 请读取 @docs/api-v2.pdf 中的接口定义，
生成对应的 TypeScript 类型定义
# 从需求文档提取用户故事
> 读取 @docs/requirements.pdf 的第 5-10 页，
提取所有用户故事并创建 GitHub Issues 的模板
# 从表格数据生成代码
> 请读取 @docs/database-schema.pdf 中的数据库表结构，
生成 Prisma schema使用场景详解
Detailed Use Cases
场景 1：Bug 截图分析
当 QA 或用户提交 bug 报告时，截图是最直观的描述方式。
bash
> [拖入 bug-report.png]
> 用户报告了这个问题。请分析截图中的错误信息，
定位可能的原因并提供修复方案。
# Claude 可以:
# 1. 识别错误消息文本
# 2. 分析错误类型（JavaScript 错误、网络错误、样式问题等）
# 3. 根据错误堆栈定位代码位置
# 4. 提供具体的修复代码场景 2：UI 还原
从设计稿直接生成前端代码。
bash
> [拖入 card-component.png]
> 请根据这个设计稿创建一个 React 组件。
使用 Tailwind CSS 进行样式设计。
# Claude 的输出:tsx
// components/ProductCard.tsx
interface ProductCardProps {
image: string;
title: string;
price: number;
rating: number;
}
export function ProductCard({ image, title, price, rating }: ProductCardProps) {
return (
<div className="rounded-xl shadow-md overflow-hidden bg-white max-w-sm">
<img
src={image}
alt={title}
className="w-full h-48 object-cover"
/>
<div className="p-4">
<h3 className="text-lg font-semibold text-gray-900">{title}</h3>
<div className="flex items-center mt-2">
<span className="text-yellow-500">{'★'.repeat(Math.round(rating))}</span>
<span className="text-gray-500 ml-1">{rating.toFixed(1)}</span>
</div>
<p className="text-xl font-bold text-blue-600 mt-3">
¥{price.toFixed(2)}
</p>
<button className="w-full mt-4 bg-blue-600 text-white py-2 rounded-lg
hover:bg-blue-700 transition-colors">
加入购物车
</button>
</div>
</div>
);
}场景 3：文档提取
从 PDF 或截图中提取结构化数据。
bash
> [拖入 database-diagram.png]
> 请从这个数据库 ER 图中提取所有表和关系，
生成 SQL 建表语句。
# Claude 分析 ER 图并生成:sql
-- 从 ER 图中提取的表结构
CREATE TABLE users (
id SERIAL PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
email VARCHAR(100) UNIQUE NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE orders (
id SERIAL PRIMARY KEY,
user_id INTEGER REFERENCES users(id),
total_amount DECIMAL(10, 2) NOT NULL,
status VARCHAR(20) DEFAULT 'pending',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE order_items (
id SERIAL PRIMARY KEY,
order_id INTEGER REFERENCES orders(id),
product_id INTEGER REFERENCES products(id),
quantity INTEGER NOT NULL,
unit_price DECIMAL(10, 2) NOT NULL
);
CREATE TABLE products (
id SERIAL PRIMARY KEY,
name VARCHAR(100) NOT NULL,
description TEXT,
price DECIMAL(10, 2) NOT NULL,
stock INTEGER DEFAULT 0
);场景 4：架构图理解
bash
> [拖入 system-architecture.png]
> 分析这个系统架构图，指出可能的性能瓶颈和改进建议。
# Claude 可以:
# 1. 识别架构中的各个组件
# 2. 理解数据流向
# 3. 分析潜在的瓶颈
# 4. 提供改进建议场景 5：手绘草图转代码
bash
> [拖入 wireframe-sketch.jpg]
> 这是一个手绘的页面草图。请根据草图创建 HTML 页面。
# Claude 能识别手绘草图中的:
# - 布局结构（头部、侧边栏、主内容区）
# - UI 元素（按钮、输入框、列表）
# - 文字标注
# 然后生成对应的代码多模态交互最佳实践
Best Practices for Multimodal Interaction
图片质量建议
| 建议 | 原因 |
|---|---|
| 使用高清截图 | 确保文字和细节可识别 |
| 裁剪无关区域 | 减少干扰，聚焦关键内容 |
| 避免模糊图片 | 模糊图片降低分析准确度 |
| 标注重点区域 | 用红框或箭头标注关注点 |
| 控制图片大小 | 过大的图片消耗更多 token |
提问技巧
bash
# 好的提问 - 明确指出需要关注的内容
> [截图] 请关注右上角的报错弹窗，分析错误原因
# 一般的提问 - Claude 需要猜测你关注什么
> [截图] 这个页面有什么问题？Token 消耗优化
bash
# 如果图片主要是文字内容
# 考虑直接粘贴文字而非截图
> 错误日志:
TypeError: Cannot read property 'map' of undefined
at UserList (src/UserList.tsx:23:15)
# 比发送整个页面截图更高效
# 如果确实需要视觉信息（布局、样式、设计稿）
# 则使用图片是最佳选择限制说明
Limitations
当前限制
| 限制 | 说明 |
|---|---|
| 视频不支持 | 无法处理视频文件 |
| 动画 GIF | 只分析第一帧 |
| 极小文字 | 低分辨率图片中的小文字可能无法识别 |
| 复杂图表 | 非常密集的数据可视化可能识别不完全 |
| 手写识别 | 手写文字的识别准确度取决于书写质量 |
| 3D 渲染 | 3D 场景的深度信息无法完全理解 |
| 加密 PDF | 无法读取密码保护的 PDF |
提高准确度的方法
bash
# 1. 提供额外的文字说明
> [截图] 这是 Figma 中的登录页设计。
品牌色是 #3B82F6，字体使用 Inter。
请注意登录按钮下方有一个"忘记密码"链接。
# 2. 分步处理复杂图片
> [截图] 首先描述你在这张截图中看到的所有 UI 元素
# 确认识别正确后
> 现在请根据这些元素生成 React 组件
# 3. 拆分大图
# 将复杂的设计稿拆分为多张小图
> [header.png] 先实现头部导航栏
> [sidebar.png] 再实现侧边栏
> [content.png] 最后实现主内容区格式兼容性总结
| 格式 | 支持 | 最佳用途 |
|---|---|---|
| PNG | 完全支持 | 截图、UI 设计 |
| JPG/JPEG | 完全支持 | 照片、复杂图像 |
| GIF | 静态支持 | 简单图示 |
| WebP | 完全支持 | 网页图片 |
| 完全支持 | 文档、规格说明 | |
| SVG | 作为代码读取 | 矢量图（作为 XML 处理） |
| BMP | 部分支持 | 不推荐使用 |
| TIFF | 不支持 | 需要先转换格式 |
小结
Summary
Claude Code 的多模态能力为开发者提供了文字之外的交互维度。核心要点：
- 截图分析 - 快速理解 Bug 报告和 UI 问题
- 设计还原 - 从设计稿直接生成前端代码
- 文档提取 - 从 PDF 和图片中提取结构化信息
- 灵活输入 - 支持拖拽、粘贴和文件引用多种方式
- 注意限制 - 了解图片大小、格式和识别能力的边界
合理利用多模态能力可以极大提高与 Claude Code 协作的效率，特别是在涉及视觉元素的开发任务中。