Screenshot ako zadanie pre agenta

Máte obrázok: web, ktorý sa vám páčil, a chceli by ste, aby vaša stránka vyzerala rovnako. Slovami sa taký web opísať nedá. "Svetlý, vzdušný, karty v troch stĺpcoch, bezpätkové písmo, veľké nadpisy" - to je už dlhšie ako jednoducho otvoriť obrázok, a aj tak nepresné. Odtiaľ prirodzená otázka: agent pracuje s textom. Vidí vôbec obrázok?

Vidí. Screenshot môžete vložiť priamo do promptu a agent ho dostane celý, nie váš popis. Obrázok je ale zadanie len z polovice: hovorí, ako má výsledok vyzerať, a mlčí o všetkom ostatnom. Zvyšok dopisujete vy a nižšie uvidíte presne čo.

1. Ako odovzdať obrázok agentovi

Existujú dva spôsoby.

• Skopírovať obrázok a vložiť ho do promptu: Ctrl+V, na Windows a vo WSL Alt+V.
• Napísať @ a vybrať cestu z ponuky.

Po vložení sa v prompte objaví značka [Image #1]. Ďalej na obrázok odkazujete číslom, vy aj agent; druhý bude [Image #2] a tak ďalej. Vyzerá to takto:

[Image #1] Sprav mi stránku podobnú tomuto screenshotu.

Značku vkladá Claude Code, vy ju nepíšete. Takto vyzerá prompt zložený z jedného obrázka a jednej vety - to nestačí, ale o tom neskôr. Ak obrázok už leží v projekte, napríklad návrh od dizajnéra v priečinku img/, hodí sa skôr druhý spôsob:

@img/reference.png Uprav index.html podľa štýlu tohto vzoru.

Napíšte @, začnite písať meno súboru a Claude Code doplní cestu. K takému obrázku sa ľahko vraciate: v každom ďalšom prompte stačí znova napísať @img/reference.png - vkladať ho nanovo netreba. Súbor mimo projektu tiež môžete zadať, úplnou cestou.

Ak si terminál Ctrl+V berie pre seba, pomôže Alt+V. Formáty sú bežné: PNG, JPEG, WebP, aj GIF, ale z animácie agent dostane len prvú snímku. Screenshot z telefónu funguje. Fotka obrazovky je horšia: odlesky a skosený uhol vedú k chybnému čítaniu.

A poradie: najprv obrázok, potom slová. Agent tak pracuje lepšie a vám sa to tiež lepšie píše - najprv ukázať, potom vysvetliť.

2. Čo agent na obrázku vidí

Samotný obrázok, nie popis. Veľký screenshot sa pred odoslaním zmenší, takže drobnosti na vašej obrazovke sa agentovi môžu zliať. Veľké veci číta spoľahlivo: aké bloky a v akom poradí zhora nadol, ich proporcie, či je stránka svetlá alebo tmavá a akú má akcentnú farbu, čitateľný text, celkový charakter - hutný alebo vzdušný, ostré rohy alebo zaoblené.

Jednoduchý spôsob, ako si overiť, že sa agent pozerá na to isté čo vy: pred úpravami ho požiadajte, nech vzor opíše vlastnými slovami a nič pritom nemení. Zaberie to minútu. Odpoveď vyzerá zhruba takto:

Svetlá stránka. Hore úzka hlavička s názvom vľavo a tromi odkazmi vpravo.
Pod ňou veľký nadpis na dva riadky a krátky odsek.
Ďalej tri karty v rade, rovnako široké, s obrázkom hore a textom dole.
Jedna akcentná farba, tmavomodrá: tlačidlo v hlavičke a podčiarknutia.
Veľa vzduchu medzi blokmi, zaoblené rohy, takmer žiadne tiene.

Pri vašom vzore bude popis iný a pokojne v ňom môže byť farebný kód, "medzera okolo 24 pixelov" a meno fontu. Je to odhad okom, nie pipeta a nie pravítko: také čísla treba overiť vedľa vzoru, nie brať ako namerané. Prvý pokus dá správny smer, jedna k jednej to nevyjde. Je to vlastnosť obrázka, nie chyba agenta, a nižšie uvidíte prečo.

3. Čo na obrázku nie je

Medzeru 24 pixelov agent nazve "okolo 24" a môže sa pomýliť o tretinu, farebný kód vydá podobný, font vyberie blízky charakterom. Nabehnutie myšou, klik, animácia, susedné stránky, pohľad na telefóne - na zábere nič z toho nie je a agent sa to nedozvie, kým mu to nepoviete.

Zvlášť k telefónu. Screenshot je urobený pri jednej šírke obrazovky a agent vidí len tú. Ak záleží na pohľade na telefóne a vzor sa dá otvoriť odkazom, urobte screenshot aj na telefóne: dva zábery, dve značky. Bez druhého záberu budete musieť úzku obrazovku opísať slovami a výsledok bude zodpovedať popisu, nie vzoru.

4. Čo dopísať slovami

Obrázok odpovedá na otázku "ako to má vyzerať" a neodpovedá ešte na štyri ďalšie. Vašou úlohou je dať vzor a povedať, čo s ním urobiť. Štyri riadky, podľa ktorých potom výsledok skontrolujete.

Čo je vo vzore najdôležitejšie. Farby? Mriežka kariet? Hlavička? Charakter písma? Bez toho agent vezme všetko naraz a v priemere, a priemer väčšinou nie je to, čo ste chceli. Slová pre tento riadok už máte: vezmite si ich z popisu, ktorý agent na začiatku o vzore napísal.

Čo si ponechať. Text, štruktúru stránky, odkazy, vlastné obrázky. Inak agent pokojne prepíše nadpisy podľa vzoru: veď tam boli iné.

Čo nekopírovať. Logo, cudzie texty, produkty, fotky. Vzor je štýl, nie obsah.

Hranice. Jedna stránka, úpravy len v index.html a style.css, bez knižníc a bez buildu. Čoho sa nesmie dotknúť.

Štyri riadky vyzerajú vedľa obrázka ako otrava. Bez nich vyjde výsledok pekný, ale nie ten správny, a prerábka zaberie viac času než napísanie tých štyroch riadkov.

5. Jeden kompletný prompt

Obrázok prvý, štyri riadky po ňom:

[Image #1] Uprav moju stránku podľa štýlu tohto vzoru.
Hlavné: svetlá farebná paleta, karty v troch stĺpcoch, veľké bezpätkové nadpisy.
Text, štruktúru a moje obrázky zachovaj bez zmeny.
Logo, fotky a texty zo vzoru neprenášaj.
Uprav len index.html a style.css, bez knižníc.

Štyri riadky po obrázku sú presne tie štyri veci, ktoré na ňom chýbajú.

Agent v odpovedi zvyčajne vymenuje, čo zo vzoru prevzal, a upraví súbory. Prvý výsledok je smer, nie kópia. Potom prídu spresnenia slovami, krátke, pretože vzor je už v konverzácii a obrázok posielať znova nemusíte:

Karty bližšie k vzoru: mäkšie tiene, väčšie zaoblenie, viac vzduchu medzi kartami.

Keď agent povie "hotovo", otvorte vzor a svoju stránku vedľa seba a skontrolujte ich podľa svojich štyroch riadkov. Ak je výsledok od vzoru vzdialený celkovo, neposielajte znova ten istý obrázok s rovnakou žiadosťou: pomenujte jednu vec, ktorá nesedí najviac, a opravujte po jednej. Hlásenie "spravil som to ako na obrázku" sa za kontrolu nepočíta. obzvlášť ak znie sebaisto.

6. Čo si zapamätať

• Obrázok určuje vzhľad, slová určujú hranice. Jedno bez druhého dá buď niečo iné, než ste chceli, alebo dlhú okľuku.
• Z obrázka agent berie veľké veci: štruktúru, proporcie, farebnú paletu, charakter. Detaily a správanie sú na vás.
• Prvý pokus je smer. Spresnenia sú krátke, pretože vzor je už v konverzácii.
• Obrázok sa hodí nielen ako vzor. Pošlite ho vždy, keď by popis slovami vyšiel dlhší než samotný obrázok.

"Urob to ako tu" zostáva dobrým začiatkom. Dobrým zadaním sa stane po štyroch riadkoch a jednom pohľade na výsledok vedľa vzoru.

Klávesové skratky a podoba značky obrázka sa môžu v novších verziách Claude Code líšiť; spôsob odovzdania a hranice toho, čo agent vidí, na verzii nezávisia.