У вас є картинка: сайт, який сподобався, і хочеться, щоб ваша сторінка мала такий самий вигляд. Словами такий сайт не опишеш. "Світлий, повітряний, картки в три колонки, шрифт без засічок, заголовки великі" - це вже довше, ніж просто відкрити картинку, і все одно неточно. Звідси закономірне запитання: агент працює з текстом. Чи бачить він картинку взагалі?
Бачить. Скриншот можна вставити безпосередньо в запит, і агент отримає його цілком, а не ваш переказ. Але картинка це завдання лише наполовину: вона каже, який має бути вигляд, і мовчить про все інше. Решту дописуєте ви, і нижче видно, що саме.
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; спосіб передачі і межі того, що агент бачить, від версії не залежать.