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

Передавайте изображения в Claude Code: вставка, перетаскивание или ссылка на путь к файлу — чтобы модель читала скриншоты, макеты, схемы архитектуры и графики. На базе vision-моделей QCode.cc — один API Key работает на всех эндпоинтах.

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

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

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

⚠️ Не путайте с генерацией изображений Эта страница — про то, как передать изображения модели, чтобы она их поняла (ввод для зрения). Если вам нужно, чтобы ИИ сгенерировал / отредактировал изображения (постеры, иллюстрации, UI-макеты, вырезание/замена фона), это отдельная возможность — используйте gpt-image-2. См. Генерация изображений gpt-image-2. Одной фразой: читать картинки = эта страница; рисовать картинки = image-2.

Три способа передать изображение¶

В сессии Claude Code есть три способа отдать изображение модели:

В 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:

Лёгкие модели, ориентированные только на текст / код, могут не поддерживать ввод изображений. Если передать картинку модели без зрения, изображение будет проигнорировано или вызовет ошибку — выбирайте одну из моделей выше. О переключении моделей см. Выбор модели.

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

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

• Держите изображения чёткими: при слишком низком разрешении или размытом тексте модель не прочитает их точно. Для макетов и скриншотов ошибок используйте оригиналы, не пережимайте.
• Не сваливайте слишком много картинок сразу: чем больше и крупнее изображения, тем больше токенов уходит и тем сложнее удержать суть. Сосредоточьтесь на одной-двух ключевых картинках за раз.
• Поясняйте намерение текстом: рядом с изображением напишите, что нужно сделать («воспроизвести на React», «найти причину ошибки», «извлечь данные таблицы») — это куда эффективнее, чем просто бросить картинку.
• Сначала замаскируйте чувствительные данные: ключи, токены, внутренние адреса, данные пользователей и т. п. на скриншоте скрывайте перед отправкой.
• Для пакетных сценариев — пути: чтобы обрабатывать изображения в скриптах / автоматизации, «ссылка на путь к файлу» наиболее управляема; в сочетании с headless-режимом из Автоматизация и CI/CD можно делать пакетную обработку.

Связанные документы¶

• Генерация изображений gpt-image-2 — генерация / редактирование изображений (противоположность «чтению картинок» здесь)
• Выбор модели — выберите модель со зрением
• Эндпоинты и форматы API — эндпоинты, протокольные пути, способы самопроверки
• Автоматизация и CI/CD — пакетная передача изображений в скриптах

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