# Ввод изображений (зрение)

Claude Code умеет не только читать код — он умеет **видеть изображения**. Передайте ему скриншот, макет дизайна, экран с ошибкой или схему архитектуры, и модель со зрением буквально «прочитает» содержимое картинки, а затем вместе с вашим запросом возьмётся за дело — превратит макет в UI, найдёт баг по скриншоту ошибки, объяснит схему архитектуры или график данных.

Эта страница — про **ввод изображений**: вы предоставляете картинку, модель её понимает. Это не то же самое, что «генерация изображений».

> **⚠️ Не путайте с генерацией изображений**
> Эта страница — про то, как **передать изображения модели, чтобы она их поняла** (ввод для зрения). Если вам нужно, чтобы ИИ **сгенерировал / отредактировал изображения** (постеры, иллюстрации, UI-макеты, вырезание/замена фона), это отдельная возможность — используйте `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

Дайте 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 и набросай по ней черновик API-документа
> Прочитай этот скриншот мониторинга @screenshots/latency.png — каков диапазон задержки p95? Есть ли аномальные пики?
```

---

## Какие модели умеют видеть изображения

Зрение — это свойство модели, и **не каждая модель умеет читать изображения**. Модели со зрением, доступные через QCode.cc:

| Модель | Примечания |
|--------|------------|
| `claude-opus-5` | Флагман; сильные зрение + рассуждение, первый выбор для сложных макетов / графиков |
| `claude-sonnet-5` | Сбалансированный вариант; отличное соотношение цены и качества для повседневного чтения изображений / воспроизведения UI |
| GPT (`gpt-6-sol`) | Vision-модели семейства OpenAI с сильным мультимодальным пониманием |

> Лёгкие модели, ориентированные только на текст / код, могут не поддерживать ввод изображений. Если передать картинку модели без зрения, изображение будет проигнорировано или вызовет ошибку — выбирайте одну из моделей выше. Vision-идентификаторы 4.x (`claude-sonnet-4-6`, `claude-opus-4-8`) по-прежнему в продаже. О переключении моделей см. [Выбор модели](/docs/usage/model-selection).

Преимущество QCode.cc в том, что **один API Key, начинающийся с `cr_`, охватывает все протоколы и модели**: один и тот же ключ работает и с vision-моделями Claude, и с GPT-5.x, переключаясь по необходимости без смены аккаунта. Эндпоинты и протокольные пути см. в [Эндпоинты и форматы API](/docs/getting-started/endpoints-and-api-paths) (пользователям в Китае стоит предпочесть `asia.qcode.cc`).

---

## Практические советы

- **Держите изображения чёткими**: при слишком низком разрешении или размытом тексте модель не прочитает их точно. Для макетов и скриншотов ошибок используйте оригиналы, не пережимайте.
- **Не сваливайте слишком много картинок сразу**: чем больше и крупнее изображения, тем больше токенов уходит и тем сложнее удержать суть. Сосредоточьтесь на одной-двух ключевых картинках за раз.
- **Поясняйте намерение текстом**: рядом с изображением напишите, что нужно сделать («воспроизвести на React», «найти причину ошибки», «извлечь данные таблицы») — это куда эффективнее, чем просто бросить картинку.
- **Сначала замаскируйте чувствительные данные**: ключи, токены, внутренние адреса, данные пользователей и т. п. на скриншоте скрывайте перед отправкой.
- **Для пакетных сценариев — пути**: чтобы обрабатывать изображения в скриптах / автоматизации, «ссылка на путь к файлу» наиболее управляема; в сочетании с headless-режимом из [Автоматизация и CI/CD](/docs/advanced/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) — пакетная передача изображений в скриптах

> С одним API Key QCode.cc пользуйтесь vision-моделями Claude и мультимодальными возможностями GPT-5.x, с квотой, общей для всех эндпоинтов. [Смотреть тарифы и цены →](https://qcode.cc/pricing)