У вас есть картинка: сайт, который понравился, и хочется, чтобы своя страница выглядела так же. Словами такой сайт не описать. "Светлый, воздушный, карточки в три колонки, шрифт без засечек, заголовки крупные" - это уже длиннее, чем просто открыть картинку, и всё равно неточно. Отсюда законный вопрос: агент работает текстом. Видит ли он картинку вообще?
Видит. Скриншот можно вставить прямо в запрос, и агент получит его целиком, а не ваш пересказ. Но картинка это задание только наполовину: она говорит, как должно выглядеть, и молчит обо всём остальном. Остальное дописываете вы, и ниже видно, что именно.
1. Как передать картинку агенту
Способа два.
- Скопировать картинку и вставить в строку запроса:
Ctrl+V, а на Windows и в WSLAlt+V. - Набрать
@и выбрать путь из подсказки.
При вставке в строке запроса появляется метка [Image #1]. Дальше и вы, и агент ссылаетесь на картинку по номеру; вторая будет [Image #2], и так далее. Выглядит это так:
[Image #1] Сделай страницу похожей на этот скриншот.Метку вставляет Claude Code, вы её не набираете. Так выглядит запрос из одной картинки и одной фразы, и этого мало, но об этом дальше. Если картинка уже лежит в проекте, например макет от дизайнера в папке img/, удобнее второй способ:
@img/reference.png Подгони index.html под стиль этого образца.Наберите @, начните печатать имя файла, и Claude Code подставит путь. К такой картинке легко возвращаться: в любом следующем запросе достаточно снова написать @img/reference.png, а не вставлять её заново. Файл за пределами проекта тоже можно указать, полным путём.
Если терминал перехватывает Ctrl+V под свои нужды, выручает Alt+V. Форматы обычные: PNG, JPEG, WebP, GIF тоже, только от анимации агенту достанется первый кадр. Скриншот с телефона подходит. Фотография экрана - хуже: блики и перекос читаются с ошибками.
И порядок: сначала картинка, потом слова. Так агент работает лучше, и так удобнее вам - сперва показать, потом объяснить.
Скриншот живёт в разговоре вместе с текстом и перечитывается агентом на каждом ходу. Один-два образца это нормально. Десять подряд заметно утяжелят сессию, а отработанные картинки незачем тащить в новую задачу.
2. Что агент видит на картинке
Саму картинку, не описание. Крупный скриншот перед отправкой уменьшается, поэтому мелкое на вашем экране для агента может слиться. Крупное он берёт надёжно: какие блоки и в каком порядке сверху вниз, их пропорции, светлая страница или тёмная и какой цвет акцентный, читаемый текст, общий характер - плотно или с воздухом, углы острые или скруглённые.
Простой способ убедиться, что агент смотрит туда же, куда вы: до правок попросите его пересказать образец, ничего не меняя. Минута времени. Ответ выглядит примерно так:
Светлая страница. Сверху узкая шапка с названием слева и тремя ссылками справа.
Ниже крупный заголовок в две строки и короткий абзац под ним.
Дальше три карточки в ряд, одинаковой ширины, с картинкой сверху и текстом снизу.
Акцентный цвет один, тёмно-синий: кнопка в шапке и подчёркивания.
Много воздуха между блоками, углы скруглённые, теней почти нет.У вашего образца пересказ будет свой, и в нём вполне могут оказаться код цвета, "отступ около 24 пикселей" и название шрифта. Это оценка на глаз, а не пипетка и не линейка: такие числа проверяют рядом с образцом, а не принимают как измеренные. Первый проход даст верное направление, один в один не выйдет. Это свойство картинки, а не ошибка агента, и ниже видно, почему.
3. Чего на картинке нет
| Берёт надёжно | Не видит или видит приблизительно |
|---|---|
| расположение и порядок блоков | точные размеры в пикселях - примерно |
| гамму и акцентный цвет | коды цветов - примерно |
| характер шрифта | название шрифта - подберёт похожий |
| читаемый текст | очень мелкий текст и иконки - после уменьшения теряются |
| общий характер: воздух, скругления, контраст | поведение: наведение, клик, анимация - нет |
| то, что в кадре | другие страницы, вид на телефоне, то, что за краем, - нет |
| сколько крупных элементов, обычно верно | точный счёт мелких - приблизительно |
Отступ в 24 пикселя агент назовёт "около 24" и может ошибиться на треть, код цвета выдаст похожий, шрифт подберёт близкий по характеру. Наведение, клик, анимация, соседние страницы, вид на телефоне - на снимке этого нет, и агент про это не узнает, пока не скажете.
Картинки, логотип и иллюстрации с образца на вашей странице не появятся. Агент понимает изображения, но не рисует новых. Свои картинки нужно принести в папку проекта самому и сказать, где они лежат.
Если мелкая деталь важна, обрежьте скриншот до неё и отдайте вторым файлом - руками или попросив агента вырезать нужную область. Но не вырезайте всё вокруг ради того, чтобы текст стал крупнее: агенту нужно видеть, где эта часть стоит и что рядом с ней.
Отдельно про телефон. Скриншот снят при одной ширине экрана, и агент видит только её. Если вид на телефоне важен и образец открывается по ссылке, снимите его и с телефона: два снимка, две метки. Без второго снимка про узкий экран придётся сказать словами, и результат будет его, а не образца.
4. Что дописать словами
Картинка отвечает на вопрос "как должно выглядеть" и не отвечает ещё на четыре. Ваша часть работы - дать образец и сказать, что с ним делать. Четыре строки, и по ним же потом сверите результат.
Что главное в образце. Цвета? Сетка карточек? Шапка? Характер шрифтов? Без этого агент возьмёт всё сразу и в среднем, а в среднем обычно не то. Слова для этой строки уже есть: возьмите их из пересказа образца, который агент сделал в начале.
Что сохранить у себя. Текст, структуру страницы, ссылки, свои картинки. Иначе агент может переписать заголовки под образец: там же были другие.
Что не копировать. Логотип, чужие тексты, товары, фотографии. Образец это стиль, а не содержание.
Границы. Одна страница, правки только в index.html и style.css, без библиотек и сборки. Что нельзя трогать.
Четыре строки выглядят занудно рядом с картинкой. Без них выходит красиво, но не то, и переделка занимает дольше, чем эти строки.
5. Один запрос целиком
Картинка первой, четыре строки после:
[Image #1] Подгони мою страницу под стиль этого образца.
Главное: светлая гамма, карточки в три колонки, крупные заголовки без засечек.
Текст, структуру и мои картинки сохрани как есть.
Логотип, фотографии и тексты с образца не переноси.
Правь только index.html и style.css, без библиотек.Четыре строки после картинки - это и есть те четыре вещи, которых на ней нет.
В ответ агент обычно перечисляет, что взял с образца, и вносит правки в файлы. Первый результат - направление, не копия. Дальше уточнения словами, короткие, потому что образец уже в разговоре и повторять картинку не нужно:
Карточки ближе к образцу: тени мягче, скругление больше, между карточками больше воздуха.Когда агент скажет "готово", откройте образец и свою страницу рядом и сверьте по своим четырём строкам. Если результат далёк от образца целиком, не повторяйте ту же картинку с той же просьбой: назовите одно, что не так сильнее всего, и правьте по одному. Отчёт "сделал как на картинке" проверкой не считается. особенно уверенный.
6. Что запомнить
- Картинка задаёт вид, слова задают границы. Одно без другого даёт либо "не то", либо долго.
- Агент берёт с картинки крупное: структуру, пропорции, гамму, характер. Мелкое и поведение остаются за вами.
- Первый проход - направление. Уточнения короткие, потому что образец уже в разговоре.
- Картинка полезна не только как образец. Отдавайте её там, где описание получается длиннее самой картинки.
Красный текст в консоли, странно съехавший блок, окно с непонятным сообщением - снимите и отдайте как есть. Агент прочитает с картинки то, что вы переписывали бы руками и с опечатками.
"Сделай как тут" остаётся хорошим началом. Хорошим заданием оно становится после четырёх строк и одного взгляда на результат рядом с образцом.
Сочетания клавиш и вид метки картинки могут отличаться в новых версиях Claude Code; способ передачи и границы того, что агент видит, от версии не зависят.