Изображения и мультимодальность: прикрепите скриншот, и он все поймет
📚 Навигация по серии: В предыдущей статье 16 Распространенные рабочие процессы мы рассмотрели повседневные задачи, такие как чтение кода, исправление ошибок и написание тестов. В этой статье мы добавляем новое измерение — вы можете не только писать ему, но и напрямую показывать изображения: скриншоты ошибок, дизайн-макеты, архитектурные схемы; просто закиньте их, и он поймет.
Например, нужно превратить скриншот страницы от дизайнера в веб-страницу. Раньше нам приходилось измерять изображение пиксель за пикселем — каково здесь расстояние, какой размер шрифта, какой радиус скругления кнопок, и мы тратили все утро только на то, чтобы вытащить значения.
Теперь вам просто нужно перетащить этот PNG прямо в окно Claude Code и напечатать: «сгенерируй соответствующий CSS по этому дизайн-макету».
Через несколько минут он выдаст целый кусок CSS — макет, цветовая схема, скругления, тени, все совпадает; вставляете это в проект, обновляете браузер, и это выглядит почти идентично дизайн-макету. Разница в эффективности очевидна сразу: показать ему намного быстрее, чем рассказать.
Проще говоря, фраза «лучше один раз увидеть, чем сто раз услышать» буквально применима к Claude Code. Сегодня мы подробно разберем, «как загружать изображения и что можно с этим делать».
Прочитав эту статью, вы узнаете:
- Три способа загрузки изображений в Claude Code, просто следуйте им (включая ловушку с горячими клавишами, в которую обязательно попадут пользователи Mac)
- Три главных применения изображений: прикрепление скриншотов ошибок, воссоздание дизайн-макетов, чтение графиков / архитектурных схем
- Один критерий: когда следует использовать изображения, а когда достаточно просто напечатать текст
- Как использовать несколько изображений, как Claude ссылается на изображения, и как открыть в один клик то, о котором он говорит
01 Почему лучше показывать ему изображения, а не только печатать текст
Сначала вывод: когда что-то «сложнее описать, чем сделать скриншот», следует использовать изображение.
Это черно-белый критерий из официальной документации — «используйте изображения, когда текстовое описание неясно или громоздко».
Аналогия: лучше один раз увидеть, чем сто раз услышать. Если вы будете долго описывать другу, как выглядит красно-зеленое всплывающее окно с ошибкой, говоря: «в левом верхнем углу красный крестик, под ним строчка мелкого текста, а справа кнопка...», он все равно ничего не поймет; но стоит скинуть скриншот, как он сразу: «а, понятно». Показывать изображения Claude — то же самое: это экономит ваши силы на формулирование мыслей и его силы на догадки.
Какие сценарии особенно подходят для использования изображений? На практике в основном это три категории:
| Сценарий | Насколько утомительно печатать описание | Насколько удобнее загрузить изображение |
|---|---|---|
| Смещение на странице / неправильные стили | «Этот div смещен вправо примерно на двадцать пикселей и перекрывается с блоком ниже» | Делаете скриншот, и он сразу видит смещение |
| Всплывающее окно с ошибкой / красный текст в консоли | Набирать длинный стек вызовов вручную или копировать и выравнивать | Закидываете скриншот, передавая вместе с контекстом |
| Воссоздание дизайн-макета / копирование компонента | «Основной цвет — синий с фиолетовым оттенком, скругление среднее...» | Даете картинку, пусть измеряет сам |
Здесь нужно четко понимать ключевое различие: Claude Code смотрит на «содержимое изображения», а не делает скриншоты за вас. Шаг с созданием скриншота все равно нужно сделать вам (подойдет стандартный системный инструмент), а он отвечает за «понимание предоставленного вами изображения».
💡 Краткий итог: Критерий только один — если описывать сложнее, чем сделать скриншот, используйте изображение; официальная цитата: «используйте изображения, когда текст неясен или громоздок».
02 Три способа загрузки изображений: перетаскивание, вставка, указание пути
Как загрузить изображение? Официальная документация предлагает три способа, выбирайте любой, результат одинаковый. Я расположил их по «возрастанию сложности освоения».
На этом изображении объединены три пути добавления картинок: перетаскивание в окно, вставка через ctrl+v после копирования (на Mac тоже ctrl+v), или прямое указание пути к файлу — все три способа ведут к одному результату: передать изображение Claude, чтобы он «посмотрел и сделал».
Способ 1: Прямое перетаскивание в окно (самый интуитивный)
Перетащите файл изображения из Finder / файлового менеджера в окно терминала, где запущен Claude Code, отпустите, и оно загрузится.
Это способ, не требующий раздумий — ощущается так же, как перетаскивание файла в окно чата WeChat для отправки картинки. Новички обычно начинают с этого, порог входа нулевой.
Способ 2: Копирование изображения, вставка через ctrl+v (самый частый, но есть подвох)
Часто изображение вообще не сохранено в виде файла — вы только что сделали скриншот, или нажали правой кнопкой мыши «копировать изображение» на веб-странице, тогда проще всего сразу его вставить.
Но здесь кроется самая большая ловушка во всей статье, которую официально подчеркивает документация:
Скопируйте изображение и используйте ctrl+v, чтобы вставить его в CLI (не используйте cmd+v).
Внимание: на Mac для вставки изображений тоже используется ctrl+v, а не привычный вам cmd+v.
Насколько это нелогично? Пользователи Mac уже десять лет копируют и вставляют текст с помощью cmd+v, мышечная память укоренилась глубоко. При первой попытке вставить скриншот легко по привычке нажать cmd+v, в результате в терминале появится длинная непонятная строка пути, а картинка так и не загрузится, и вы можете подумать, что это не поддерживается. Если заглянуть в документацию, все проясняется — во многих терминалах cmd+v вставляет текстовый путь к файлу, и только ctrl+v надежно передает само изображение в Claude.
(Добавим: некоторые терминалы, например iTerm2, тоже понимают вставку картинок через cmd+v, но поведение разных терминалов отличается, поэтому ctrl+v — это универсальный рабочий путь, запомните его, чтобы избежать проблем.)
Запомните это правило:
| Платформа | Для вставки изображений используйте | Не используйте |
|---|---|---|
| Mac | ctrl+v | ❌ cmd+v (большинство терминалов вставит как текстовый путь) |
| Windows / Linux | ctrl+v (в WSL, если терминал перехватывает ctrl+v, используйте alt+v) | —— |
Небольшая деталь: после успешной вставки в поле ввода появится маркер-заполнитель [Image #1] (официально называется «чип (chip)»), означающий, что изображение прикреплено, и вы можете продолжить набирать текст в этом же запросе.
Способ 3: Прямое указание пути к изображению (лучше всего для скриптов / уже сохраненных картинок)
Если изображение уже сохранено как файл, и вы знаете путь к нему, самый простой способ — напрямую написать путь в запросе, чтобы он сам его прочитал:
Analyze this image: /path/to/your/image.pngПросто замените /path/to/your/image.png на реальный путь к вашему изображению (распознаются как относительные, так и абсолютные пути). Этот способ не зависит от перетаскивания мышью, он лучше всего подходит для написания скриптов или когда изображение спрятано глубоко в какой-нибудь директории проекта.
💡 Краткий итог: Перетаскивание в окно / вставка
ctrl+v/ прямое указание пути — выберите одно из трех; пользователям Mac нужно запомнитьctrl+v, не нажимайтеcmd+v.
03 Применение 1: Прикрепление скриншотов ошибок и UI, предоставление «места преступления»
Первый и самый практичный сценарий — скинуть ему скриншот проблемы, чтобы он посмотрел на место и вынес вердикт.
Почему этот прием так хорош? Потому что многие ошибки и проблемы со стилями просто невозможно полностью передать словами. Во всплывающем окне с ошибкой есть иконки, цвета, верстка; если вы будете набирать это вручную, то опишете лишь в общих чертах. То же самое со смещением UI: разницу в пару пикселей видно невооруженным глазом, но словами не объяснишь.
Аналогия: при походе к врачу не стоит просто описывать «здесь болит», покажите ему рентгеновский снимок. Вы говорите «ноющая боль в правом нижнем углу живота», и врачу остается только гадать; а если положить перед ним снимок КТ, сразу видно, в чем проблема. Скриншот — это и есть тот самый «снимок» для Claude.
Как именно это сделать? Загрузите скриншот (любым из трех способов), а затем добавьте одну фразу, описывающую ваш запрос. Официальный пример запроса очень хорош:
Here's a screenshot of the error. What's causing it?Или для проблем с UI:
Describe the UI elements in this screenshotНапример, вы настраиваете страницу React, и одна кнопка упорно съезжает вправо, а в CSS, как ни смотри, ошибки не видно. В этот момент вы просто делаете скриншот со смещением и закидываете его, добавляя фразу «почему эта кнопка сместилась вправо», и Claude посмотрев говорит: «у вашего родительского контейнера есть padding-right, плюс собственный margin кнопки, они наложились друг на друга» — одно предложение решает проблему, остается только исправить одну строку. Если бы вы пытались описать это смещение текстом, боюсь, пришлось бы обмениваться сообщениями несколько раз.
💡 Краткий итог: Проблемы с ошибками и UI, скриншот — это «фотография с места событий»; показать ему намного быстрее, чем рассказать, и решение найдется быстрее.
04 Применение 2: Воссоздание дизайн-макетов, генерация кода прямо со скриншота
Это тот самый сценарий «эффективность возрастает мгновенно» из начала статьи, который стоит выделить отдельно — дайте ему дизайн-макет, и он выдаст рабочий код.
Почему этот прием больше всего впечатляет? Потому что он избавляет от самой утомительной рутины на этапе «дизайн → код». Измерение значений по картинке, настройка отступов, подбор цветов — это изначально самая скучная часть фронтенда, а теперь вы можете поручить ему выдать версию, похожую на 80-90%, и затем уже корректировать мелочи.
Аналогия: показать портному фотографию и попросить сшить такую же одежду. Вам не нужно диктовать портному каждый размер, достаточно положить перед ним фотографию образца, и он сам снимет мерки, определит материал и швы. Скриншот дизайн-макета для Claude — это та самая «фотография образца».
В официальных примерах запросов достаточно запомнить эти два, чтобы начать работу:
照着这张设计稿生成对应的 CSSWhat HTML structure would recreate this component?Первая фраза просит его сгенерировать CSS по дизайн-макету, а вторая — вывести структуру HTML, которая воссоздаст этот компонент. Используйте обе вместе, и скелет статического компонента будет готов.
Честно говоря, нужно иметь реалистичные ожидания: это не воссоздание пиксель-в-пиксель, это предоставление вам отправной точки с высокой степенью готовности. Как и в случае с куском CSS в начале: общий макет и цветовая схема абсолютно верны, но в паре мест внутренние отступы отличаются на несколько пикселей, просто подправьте их вручную. Но это уже экономит как минимум час — писать CSS с нуля и править черновик, готовый на 80% — это совершенно разные объемы работы.
| Воссоздание дизайн-макета | ❌ Писать полностью вручную | ✅ Загрузить скриншот |
|---|---|---|
| Измерение значений | Ковырять каждый пиксель самостоятельно | Он оценивает сам по картинке |
| Создание скелета | Начинать с пустого файла | Сразу выдает рабочую версию |
| Ваша работа | Весь процесс с нуля | Доработать последние 10-20% |
💡 Краткий итог: Скриншот дизайн-макета + «сгенерируй соответствующий CSS по этому макету», он выдает вам черновик на 80%, вы доделываете оставшиеся 20%, и вся рутина экономится.
05 Применение 3: Чтение графиков и архитектурных схем, позвольте ему «понять структуру»
Третье применение — графики, схемы баз данных (schema), архитектурные схемы — эти «структурные» изображения он тоже понимает.
Почему они выделены в отдельную категорию? Потому что в первых двух (ошибки, дизайн-макеты) на картинках был «интерфейс», а на этих картинках — «отношения»: кто с чем связан, как текут данные, как распределены модули по слоям. Такие отношения очень сложно описать текстом, а на картинке все видно с первого взгляда, и это как раз то, что нужно Claude.
Аналогия: объясняя систему новому коллеге, блок-схема на доске полезнее долгих разговоров. Вы рассказываете новичку на словах: «сервис пользователей вызывает сервис заказов, сервис заказов зависит от инвентаря и оплаты...», и он слушает как в тумане; а если нарисовать пару блоков на доске и соединить их стрелками, он сразу все поймет. Тот же эффект будет, если скинуть эту блок-схему Claude.
Официальные примеры запросов охватывают два направления: «чтение» и «изменение»:
This is our current database schema. How should we modify it for the new feature?Are there any problematic elements in this diagram?Первая фраза — это взять существующую схему структуры базы данных и спросить, как изменить таблицы для новой функции; вторая — попросить его проверить, нет ли на этой схеме нелогичных моментов.
Очень распространенный вариант использования: вы беретесь за незнакомый проект, вам присылают PNG с архитектурной схемой, вы прямо загружаете ее в Claude и просите сначала рассказать, как примерно работает эта система. Он может прочитать модули и отношения вызовов с картинки и дать вам обзор — это намного быстрее, чем пялиться на картинку самому, как если бы кто-то заранее провел вас по схеме.
💡 Краткий итог: Изображения, рассказывающие об «отношениях», такие как графики, схемы баз данных (schema) и архитектурные схемы, загружайте ему в качестве контекста, пусть он поймет структуру, а затем поможет вам изменить ее или проверить.
06 Несколько изображений, ссылки, открытие в один клик: несколько полезных мелочей
В завершение пара деталей, упомянутых в официальной документации, которые сделают работу еще удобнее.
Можно загружать несколько изображений сразу
Не нужно загружать их по одному — в один запрос можно вставить несколько изображений. Например: «вот старый дизайн-макет, вот новый дизайн-макет, расскажи мне, что изменилось», загружаете оба вместе и просите его сравнить. При изменении дизайна так часто делают, избавляя от необходимости переключаться туда-сюда для описания.
Как Claude ссылается на изображения: [Image #1]
Когда Claude в своем ответе упоминает какое-то из предоставленных вами изображений, он будет использовать такие номера, как [Image #1], [Image #2], для их обозначения — какая картинка по счету, такой и номер. Когда картинок много, этот номер позволяет с одного взгляда понять, «о какой картинке он говорит».
Открытие картинки, о которой он говорит, в один клик
Появляющийся в его ответах маркер [Image #N] можно нажать, согласно официальной документации:
Когда Claude ссылается на изображения (например,
[Image #1]), кликните по ссылке сCmd+Click(Mac) илиCtrl+Click(Windows/Linux), чтобы открыть изображение в программе просмотра по умолчанию.
То есть, если хотите убедиться, какую именно картинку он имеет в виду, нажмите Cmd+Click на Mac или Ctrl+Click на Windows/Linux на этот номер, и системная программа просмотра изображений по умолчанию откроет эту картинку.
| Действие | Mac | Windows / Linux |
|---|---|---|
| Вставка изображения | ctrl+v | ctrl+v |
Клик по [Image #N] | Cmd+Click | Ctrl+Click |
Обратите внимание, что «разделение труда» у этих двух горячих клавиш перевернуто: для вставки изображения используется ctrl, а для открытия ссылки на картинку на Mac используется Cmd. Не перепутайте.
💡 Краткий итог: В один запрос можно вставить несколько изображений, Claude использует
[Image #N]для обозначения, нажатие на этот номер (на Mac —Cmd+Click) позволяет открыть изображение для проверки.
07 Практика: перетащите картинку, чтобы он ее прочитал, весь процесс за три шага
Теория без практики мертва. Ниже, используя любую случайную картинку на вашем компьютере, мы пройдем весь процесс «загрузки картинки → ее понимания» за три шага. Никакой проект не нужен, достаточно просто картинки на рабочем столе.
Шаг 1: Найдите любую картинку и запомните, где она находится
Сделайте скриншот или возьмите любой существующий файл PNG / JPG. На Mac скриншоты по умолчанию сохраняются на рабочем столе с именами вроде 截屏2026-06-10 下午3.20.15.png. Перетащите его в удобное место, например, оставьте прямо на рабочем столе.
Шаг 2: Запустите Claude Code в любой директории
claudeОжидаемый результат: появится экран приветствия с полем ввода внизу. (Для чтения картинок директория не имеет значения, запускайте где угодно.)
Шаг 3: Загрузите картинку и попросите ее описать
Выберите любой из трех способов, новичкам рекомендуется просто перетащить: перетащите картинку с рабочего стола в окно терминала, отпустите, и в поле ввода появится маркер [Image #1]. Затем напечатайте:
这张图里是什么？用中文描述一下你看到的内容И нажмите Enter.
Ожидаемый результат: Claude прочитает картинку и на китайском языке (как указано в запросе) расскажет вам, что на ней — если это скриншот, он перечислит элементы интерфейса, если фотография — опишет содержимое. Если вы видите, что он точно описал то, что находится на картинке = картинка успешно загружена, весь процесс работает.
⚠️ Для пользователей Mac, желающих попробовать путь «копировать-вставить»: сначала скопируйте изображение в предпросмотре / браузере, вернитесь в терминал и нажмите ctrl+v (а не cmd+v). Если после нажатия появляется строка с текстовым путем к файлу, а не маркер [Image #N], скорее всего, вы по привычке нажали cmd+v. Удалите это и попробуйте снова.
💡 Краткий итог: Перетаскивание /
ctrl+v/ указание пути — три шага для загрузки картинки; точное описание содержимого картинки от Claude означает успешное выполнение.
08 Заключение
В этой статье вы научились открывать для Claude Code путь «зрения» — перейдя от возможности только писать ему текст к возможности напрямую показывать изображения.
Краткий обзор ключевых моментов:
| Аспект | Ключевой момент |
|---|---|
| Как загружать | Перетащить в окно / вставить через ctrl+v / указать путь, выберите одно из трех |
| Самая большая ловушка | Для вставки картинок на Mac используйте ctrl+v, не нажимайте cmd+v |
| Три главных применения | Скриншоты ошибок / UI для места событий, воссоздание дизайн-макетов в код, чтение графиков / архитектурных схем для понимания структуры |
| Когда использовать изображения | Когда описать текстом сложнее, чем сделать скриншот |
| Несколько картинок и ссылки | В один запрос можно вставить несколько картинок, Claude ссылается на них как [Image #N], по номеру можно кликнуть, чтобы открыть |
Теперь вы должны уметь: загружать любой скриншот, дизайн-макет или архитектурную схему в Claude Code, чтобы он, глядя на изображение, помог вам диагностировать ошибку, написать код или разобраться в структуре; а также запомнили эту нелогичную комбинацию ctrl+v на Mac. Эта способность «показать ему» резко снизит ваши затраты на описание проблем в будущем — многие задачи, для которых раньше приходилось долго набирать текст, теперь решаются одной картинкой и одной фразой.
Следующая статья 18 «Руководство по использованию CLAUDE.md» — до сих пор мы загружали изображения, передавали требования, но каждый раз приходилось заново объяснять контекст проекта. Есть ли способ сделать так, чтобы Claude сразу при входе в проект автоматически знал, что это такое, и каким правилам следовать? В следующей статье мы поговорим об этом «справочнике сотрудника» для него — CLAUDE.md. Если вы его настроите, вам больше никогда не придется повторять одно и то же.