Screenshot jako zadání pro agenta

Máte obrázek: web, který se vám líbil, a chtěli byste, aby vaše stránka vypadala podobně. Slovy se takový web popsat nedá. "Světlá, vzdušná, karty ve třech sloupcích, bezpatkové písmo, velké nadpisy" - to je už delší než prosté otevření obrázku, a stejně to není přesné. Odtud plyne logická otázka: agent pracuje s textem. Vidí vůbec obrázek?

Vidí. Screenshot můžete vložit přímo do promptu a agent ho dostane celý, ne váš popis. Obrázek je ale zadání jen z poloviny: říká, jak má výsledek vypadat, a mlčí o všem ostatním. Zbytek dopisujete vy a níže uvidíte přesně co.

1. Jak předat obrázek agentovi

Existují dva způsoby.

• Zkopírovat obrázek a vložit ho do promptu: Ctrl+V, na Windows a ve WSL Alt+V.
• Napsat @ a vybrat cestu z nabídky.

Po vložení se v promptu objeví značka [Image #1]. Dál se na obrázek odkazujete číslem, vy i agent; druhý bude [Image #2] a tak dále. Vypadá to takto:

[Image #1] Udělej mi stránku podobnou tomuto screenshotu.

Značku vkládá Claude Code, vy ji nepíšete. Takhle vypadá prompt složený z jednoho obrázku a jedné věty - to nestačí, ale o tom později. Pokud obrázek už leží v projektu, třeba návrh od designéra ve složce img/, hodí se spíš druhý způsob:

@img/reference.png Uprav index.html podle stylu tohoto vzoru.

Napište @, začněte psát jméno souboru a Claude Code doplní cestu. K takovému obrázku se snadno vracíte: v každém dalším promptu stačí znovu napsat @img/reference.png, místo abyste ho vkládali znovu. Soubor mimo projekt lze zadat taky, úplnou cestou.

Pokud si terminál Ctrl+V bere pro sebe, pomůže Alt+V. Formáty jsou běžné: PNG, JPEG, WebP, i GIF, jen z animace agent dostane první snímek. Screenshot z telefonu funguje. Fotka obrazovky je horší: odlesky a zkosení vedou k chybám při čtení.

A pořadí: nejdřív obrázek, pak slova. Agent tak pracuje lépe a vám se to taky lépe píše - nejdřív ukázat, pak vysvětlit.

2. Co agent na obrázku vidí

Samotný obrázek, ne popis. Velký screenshot se před odesláním zmenší, takže drobnosti na vaší obrazovce se agentovi mohou slít dohromady. Velké věci čte spolehlivě: jaké bloky a v jakém pořadí shora dolů, jejich proporce, jestli je stránka světlá nebo tmavá a jakou má akcentní barvu, čitelný text, celkový charakter - hutný nebo vzdušný, ostré rohy nebo zaoblené.

Jednoduchý způsob, jak si ověřit, že se agent dívá na totéž co vy: než začnete upravovat, požádejte ho, ať vzor popíše vlastními slovy, aniž by cokoli měnil. Zabere to minutu. Odpověď vypadá zhruba takto:

Světlá stránka. Nahoře úzká hlavička s názvem vlevo a třemi odkazy vpravo.
Pod ní velký nadpis na dva řádky a krátký odstavec.
Dál tři karty v řadě, stejně široké, s obrázkem nahoře a textem dole.
Jedna akcentní barva, tmavě modrá: tlačítko v hlavičce a podtržení.
Hodně vzduchu mezi bloky, zaoblené rohy, skoro žádné stíny.

U vašeho vzoru bude popis jiný a klidně v něm může být barevný kód, "mezera kolem 24 pixelů" a jméno fontu. Je to odhad okem, ne pipeta a ne pravítko: taková čísla se ověřují vedle vzoru, nepřijímají se jako naměřená. První pokus dá správný směr, jedna ku jedné to nevyjde. Je to vlastnost obrázku, ne chyba agenta, a níže uvidíte proč.

3. Co na obrázku není

Mezeru 24 pixelů agent nazve "kolem 24" a může se splést o třetinu, barevný kód vydá podobný, font vybere blízký charakterem. Najetí myší, klik, animace, sousední stránky, pohled na telefonu - na snímku nic z toho není a agent se to nedozví, dokud mu to neřeknete.

Zvlášť k telefonu. Screenshot je pořízený při jedné šířce obrazovky a agent vidí jen tu. Pokud záleží na pohledu na telefonu a vzor jde otevřít odkazem, pořiďte screenshot i na telefonu: dva snímky, dvě značky. Bez druhého snímku budete muset úzkou obrazovku popsat slovy a výsledek bude odpovídat popisu, ne vzoru.

4. Co dopsat slovy

Obrázek odpovídá na otázku "jak to má vypadat" a neodpovídá ještě na čtyři další. Vaším úkolem je dát vzor a říct, co s ním udělat. Čtyři řádky, podle kterých pak výsledek zkontrolujete.

Co je ve vzoru nejdůležitější. Barvy? Mřížka karet? Hlavička? Charakter písma? Bez toho agent vezme všechno najednou a v průměru, a průměr většinou není to, co jste chtěli. Slova pro tento řádek už máte: vezměte si je z popisu, který agent na začátku o vzoru napsal.

Co si ponechat. Text, strukturu stránky, odkazy, vlastní obrázky. Jinak agent klidně přepíše nadpisy podle vzoru: tam přece byly jiné.

Co nekopírovat. Logo, cizí texty, produkty, fotky. Vzor je styl, ne obsah.

Hranice. Jedna stránka, úpravy jen v index.html a style.css, bez knihoven a bez buildu. Čeho se nesmí dotknout.

Čtyři řádky vypadají vedle obrázku jako otrava. Bez nich vyjde výsledek hezký, ale ne ten, který jste chtěli, a přepracování zabere víc času než napsání těch čtyř řádků.

5. Jeden kompletní prompt

Obrázek první, čtyři řádky po něm:

[Image #1] Uprav mou stránku podle stylu tohoto vzoru.
Hlavně: světlá barevná paleta, karty ve třech sloupcích, velké bezpatkové nadpisy.
Text, strukturu a mé obrázky zachovej beze změny.
Logo, fotky a texty ze vzoru nepřenášej.
Uprav jen index.html a style.css, bez knihoven.

Čtyři řádky po obrázku jsou přesně ty čtyři věci, které na něm chybí.

Agent v odpovědi obvykle vyjmenuje, co ze vzoru převzal, a upraví soubory. První výsledek je směr, ne kopie. Pak přijdou upřesnění slovy, krátká, protože vzor je už v konverzaci a obrázek posílat znovu nemusíte:

Karty blíž vzoru: měkčí stíny, větší zaoblení, víc vzduchu mezi kartami.

Až agent řekne "hotovo", otevřete vzor a svou stránku vedle sebe a zkontrolujte je podle svých čtyř řádků. Pokud je výsledek celkově daleko od vzoru, neposílejte znovu tentýž obrázek se stejnou žádostí: pojmenujte jednu věc, která nesedí nejvíc, a opravujte po jedné. Hlášení "udělal jsem to jako na obrázku" se za kontrolu nepočítá. zvlášť když zní sebejistě.

6. Co si zapamatovat

• Obrázek určuje vzhled, slova určují hranice. Jedno bez druhého dá buď špatný výsledek, nebo dlouhou okliku.
• Z obrázku agent bere velké věci: strukturu, proporce, barevnou paletu, charakter. Detaily a chování jsou na vás.
• První pokus je směr. Upřesnění jsou krátká, protože vzor je už v konverzaci.
• Obrázek se hodí nejen jako vzor stylu. Pošlete ho vždy, když by popis slovy vyšel delší než samotný obrázek.

"Udělej to jako tady" zůstává dobrým začátkem. Dobrým zadáním se stane po čtyřech řádcích a jednom pohledu na výsledek vedle vzoru.

Klávesové zkratky a podoba značky obrázku se mohou v novějších verzích Claude Code lišit; způsob předání a hranice toho, co agent vidí, na verzi nezávisí.