# 图像输入（视觉）

Claude Code 不仅能读代码，还能**看图**。把截图、设计稿、报错画面、架构图丢给它，具备视觉能力的模型会直接「读」图里的内容，再结合你的提示词干活——把 mockup 还原成 UI、对着报错截图定位 bug、解释一张架构图或数据图表。

本文讲的是**图像输入**：你提供图片、模型理解图片。这和「文生图」是两回事。

> **⚠️ 别和图像生成搞混了**
> 本文是把图片**喂给模型让它理解**（视觉输入）。如果你想让 AI **生成 / 编辑图片**（海报、配图、UI mockup、抠图换背景），那是另一个能力，用 `gpt-image-2`，请看 [gpt-image-2 图像生成](/docs/usage/image-2)。
> 一句话区分：**看图 = 本文；画图 = image-2。**

---

## 三种喂图方式

在 Claude Code 会话里，给模型提供图片有三种方式：

| 方式 | 操作 | 适用场景 |
|------|------|----------|
| **粘贴** | 复制图片后按 `Ctrl+V` 粘贴进输入框 | 截图工具截的图、剪贴板里的图 |
| **拖拽** | 把图片文件直接拖进终端窗口 | 文件管理器里现成的图片文件 |
| **引用路径** | 在提示词里写出图片文件路径 | 项目里已有的图片、脚本批量处理 |

> macOS 截图后默认进剪贴板，直接 `Ctrl+V` 即可；如果截图存成了文件，用拖拽或写路径更稳。终端 / 系统不同，粘贴与拖拽的支持程度会有差异，遇到不识别就改用「引用文件路径」这种最稳的方式。

### 引用文件路径示例

```
> 看一下 ./design/dashboard.png 这张设计稿，用 React + Tailwind 把它实现出来
> 这个报错截图 @screenshots/build-error.png 是什么原因？怎么修？
> 解释一下 docs/architecture.png 里的系统架构，各组件是怎么交互的
```

引用路径的好处是**可复现**：写进脚本、放进提示词模板，每次都能精确指向同一张图，不依赖手动粘贴。

---

## 典型用法

### 1. 设计稿 / 截图 → UI 代码

把一张 mockup 或现有页面的截图给 Claude Code，让它还原成可运行的前端代码。

```
> 这是设计稿 @mockups/pricing-page.png，用 Next.js + Tailwind 实现，
  布局、间距、配色尽量还原，组件拆分要合理
```

模型会读出图里的布局、文案、配色，生成对应的组件代码。还原度取决于图的清晰度和你提示词里的约束（框架、样式系统、命名规范等）。

### 2. 报错截图 → 定位与修复

IDE、浏览器控制台、终端里红彤彤的报错，截图丢给它即可，不用手敲长长的堆栈。

```
> @screenshots/ts-error.png 这个 TypeScript 报错怎么解决？相关代码在 src/api/client.ts
```

模型从截图里读出错误信息和堆栈，结合你指出的代码文件给出修复建议。

### 3. 架构图 / 数据图表 → 理解与说明

把架构图、时序图、流程图、监控面板、数据图表交给它，让它解释、提取数据、或据此写代码 / 文档。

```
> 解释 @diagrams/data-flow.png 这张数据流图，并据此写一份接口文档草稿
> 读一下这张监控截图 @screenshots/latency.png，p95 延迟在什么区间？有没有异常尖峰？
```

---

## 哪些模型能看图

视觉能力由模型决定，**不是所有模型都能读图**。通过 QCode.cc 接入、具备视觉能力的模型：

| 模型 | 说明 |
|------|------|
| `claude-opus-5` | 旗舰，视觉 + 推理俱强，复杂设计稿 / 图表首选 |
| `claude-sonnet-5` | 均衡之选，日常看图 / 还原 UI 性价比高 |
| GPT-5.x（`gpt-5.5` / `gpt-5.4` / `gpt-5.6-mini`） | OpenAI 系视觉模型，多模态理解能力强 |

> 纯文本 / 代码向的轻量模型可能不支持图像输入。把图喂给不支持视觉的模型时，图片会被忽略或报错——选模型时认准上面这几款。4.x 视觉型号（如 `claude-sonnet-4-6`、`claude-opus-4-8`）仍在售。模型切换见 [模型选择](/docs/usage/model-selection)。

QCode.cc 的优势是**一份 `cr_` 开头的 API Key 通吃所有协议和模型**：同一个密钥既能用 Claude 系视觉模型，也能调 GPT-5.x，按需切换不用换账户。接入域和协议路径见 [接入点与 API 格式](/docs/getting-started/endpoints-and-api-paths)（国内用户优先用 `asia.qcode.cc`）。

---

## 实用建议

- **图要清晰**：分辨率太低、字糊成一团，模型读不准。设计稿和报错截图尽量原图、别压缩过头。
- **一次别堆太多图**：图越多、越大，消耗的 token 越多、也越容易抓不住重点。一次聚焦一两张关键图。
- **配文字说清意图**：图旁边写明你要它干嘛（「还原成 React」「找出报错原因」「提取表格数据」），比只丢一张图效果好得多。
- **敏感信息先打码**：截图里的密钥、token、内网地址、用户数据等，喂图前先遮挡。
- **批量场景用路径**：要在脚本 / 自动化里处理图片，用「引用文件路径」最可控，配合 [自动化与 CI/CD](/docs/advanced/headless) 的 headless 模式可批处理。

---

## 相关文档

- [gpt-image-2 图像生成](/docs/usage/image-2) — 生成 / 编辑图片（与本文的「看图」相反）
- [模型选择](/docs/usage/model-selection) — 挑一个支持视觉的模型
- [接入点与 API 格式](/docs/getting-started/endpoints-and-api-paths) — 接入域、协议路径、自测方法
- [自动化与 CI/CD](/docs/advanced/headless) — 在脚本里批量喂图

> 用一份 QCode.cc API Key，畅享 Claude 视觉模型与 GPT-5.x 多模态能力，所有接入域共享配额。[查看套餐与价格 →](https://qcode.cc/pricing)