Un screenshot ca sarcină pentru agent

Aveți o imagine: un site care v-a plăcut, și vreți ca propria pagină să arate la fel. În cuvinte, un asemenea site nu se descrie. "Deschis la culoare, aerisit, carduri pe trei coloane, font fără serife, titluri mari" - e deja mai lung decât să deschideți pur și simplu imaginea, și tot inexact. De aici o întrebare firească: agentul lucrează cu text. Vede el, de fapt, o imagine?

Vede. Screenshot-ul se poate lipi direct în cerere, iar agentul îl primește întreg, nu descrierea dumneavoastră. Dar imaginea e sarcina doar pe jumătate: ea spune cum trebuie să arate rezultatul și tace despre tot restul. Restul îl adăugați dumneavoastră, și mai jos vedeți exact ce anume.

1. Cum transmiteți imaginea agentului

Sunt două moduri.

• Copiați imaginea și lipiți-o în linia de introducere: Ctrl+V, iar pe Windows și în WSL Alt+V.
• Tastați @ și alegeți calea din lista de sugestii.

La lipire, în linia de introducere apare eticheta [Image #1]. Mai departe, atât dumneavoastră, cât și agentul faceți referire la imagine după număr; a doua va fi [Image #2] și tot așa. Arată astfel:

[Image #1] Fă pagina să semene cu acest screenshot.

Eticheta o pune Claude Code, dumneavoastră nu o tastați. Așa arată o cerere dintr-o singură imagine și o singură frază, și nu e de ajuns, dar despre asta mai jos. Dacă imaginea se află deja în proiect, de exemplu un mockup de la designer în folderul img/, e mai comod al doilea mod:

@img/reference.png Adaptează index.html la stilul acestui model.

Tastați @, începeți să scrieți numele fișierului, iar Claude Code completează calea. La o astfel de imagine e ușor să reveniți: în orice cerere ulterioară e suficient să scrieți din nou @img/reference.png, în loc s-o lipiți iar. Un fișier din afara proiectului poate fi indicat și el, cu calea completă.

Dacă terminalul interceptează Ctrl+V pentru propriile scopuri, vă ajută Alt+V. Formatele sunt cele obișnuite: PNG, JPEG, WebP, GIF merge și el, numai că dintr-o animație agentul primește doar primul cadru. Un screenshot de pe telefon merge bine. O fotografie a ecranului merge mai prost: reflexiile și unghiul strâmb duc la citiri greșite.

Și ordinea: mai întâi imaginea, apoi cuvintele. Așa agentul lucrează mai bine, și așa e mai comod și pentru dumneavoastră - întâi arătați, apoi explicați.

2. Ce vede agentul pe imagine

Imaginea în sine, nu o descriere. Un screenshot mare se micșorează înainte de trimitere, de aceea detaliile mici de pe ecranul dumneavoastră se pot pierde pentru agent. Ce preia sigur: ce blocuri sunt și în ce ordine de sus în jos, proporțiile lor, dacă pagina e deschisă sau întunecată și care e culoarea de accent, text lizibil, caracterul general - dens sau aerisit, colțuri ascuțite sau rotunjite.

Un mod simplu de a vă asigura că agentul se uită la aceleași lucruri ca dumneavoastră: înainte de modificări, cereți-i să descrie modelul, fără să schimbe nimic. Durează un minut. Răspunsul arată cam așa:

O pagină deschisă la culoare. Sus, un antet îngust cu numele în stânga și trei linkuri în dreapta.
Mai jos un titlu mare pe două rânduri și un paragraf scurt sub el.
Apoi trei carduri într-un rând, de aceeași lățime, cu imagine sus și text jos.
O singură culoare de accent, albastru închis: butonul din antet și sublinierile.
Mult spațiu între blocuri, colțuri rotunjite, aproape fără umbre.

Pentru modelul dumneavoastră descrierea va fi alta, și în ea foarte bine pot apărea un cod de culoare, "un spațiu de vreo 24 de pixeli" și un nume de font. E o estimare din ochi, nu o pipetă și nu o riglă: astfel de cifre se verifică lângă model, nu se iau drept măsurători. Prima trecere dă direcția corectă, identic nu va ieși. E o proprietate a imaginii, nu o greșeală a agentului, și mai jos vedeți de ce.

3. Ce nu se vede pe imagine

Un spațiu de 24 de pixeli agentul îl va numi "cam 24" și poate greși cu o treime, pentru un cod de culoare va da unul asemănător, iar fontul îl va alege pe unul apropiat ca stil. Hover, clic, animație, pagini vecine, vizualizarea pe telefon - pe captură nu apar, și agentul nu va afla de ele până nu i le spuneți.

Și un cuvânt aparte despre telefon. Screenshot-ul e făcut la o singură lățime de ecran, și agentul vede doar această lățime. Dacă vizualizarea pe telefon contează și modelul se deschide printr-un link, faceți o captură și de pe telefon: două capturi, două etichete. Fără a doua captură, despre ecranul îngust va trebui să spuneți în cuvinte, iar rezultatul va fi varianta agentului, nu a modelului.

4. Ce adăugați în cuvinte

Imaginea răspunde la întrebarea "cum trebuie să arate" și lasă fără răspuns alte patru. Partea dumneavoastră de muncă e să dați modelul și să spuneți ce să facă agentul cu el. Patru rânduri, și tot după ele veți verifica apoi rezultatul.

Ce contează cel mai mult în model. Culorile? Grila de carduri? Antetul? Caracterul fonturilor? Fără asta agentul va lua totul deodată, făcând o medie, iar media de obicei nu e ce trebuie. Cuvintele pentru acest rând le aveți deja: luați-le din descrierea modelului pe care a făcut-o agentul la început.

Ce păstrați din pagina dumneavoastră. Textul, structura paginii, linkurile, propriile imagini. Altfel agentul poate rescrie titlurile după model: acolo, la urma urmei, erau altele.

Ce să nu copiați. Logo-ul, textele altora, produsele, fotografiile. Modelul e stil, nu conținut.

Limitele. O singură pagină, modificări doar în index.html și style.css, fără biblioteci și fără build. Ce nu se atinge.

Patru rânduri par plictisitoare lângă o imagine. Fără ele iese frumos, dar nu ce trebuie, iar refacerea durează mai mult decât aceste rânduri.

5. O cerere completă

Imaginea prima, patru rânduri după:

[Image #1] Adaptează pagina mea la stilul acestui model.
Esențial: gamă deschisă, carduri pe trei coloane, titluri mari fără serife.
Textul, structura și imaginile mele păstrează-le așa cum sunt.
Logo-ul, fotografiile și textele de pe model nu le prelua.
Modifică doar index.html și style.css, fără biblioteci.

Cele patru rânduri de după imagine sunt exact acele patru lucruri care nu se văd pe ea.

Ca răspuns, agentul de obicei enumeră ce a luat de la model și face modificările în fișiere. Primul rezultat e o direcție, nu o copie. Apoi urmează precizări în cuvinte, scurte, pentru că modelul e deja în conversație și nu trebuie repetată imaginea:

Fă cardurile mai asemănătoare cu modelul: umbre mai moi, rotunjire mai mare, mai mult spațiu între carduri.

Când agentul spune "gata", deschideți modelul și pagina dumneavoastră alături și verificați după cele patru rânduri. Dacă rezultatul e departe de model în ansamblu, nu repetați aceeași imagine cu aceeași cerere: numiți un singur lucru, cel care deranjează cel mai tare, și corectați pe rând, câte unul. Un raport "am făcut ca pe imagine" nu se consideră verificare. oricât de sigur ar suna.

6. Ce rămâne de reținut

• Imaginea stabilește aspectul, cuvintele stabilesc limitele. Una fără cealaltă duce fie la "nu e ce trebuie", fie la mult timp pierdut.
• Agentul ia de pe imagine lucrurile mari: structura, proporțiile, gama, caracterul. Detaliile mici și comportamentul rămân în seama dumneavoastră.
• Prima trecere e o direcție. Precizările sunt scurte, pentru că modelul e deja în conversație.
• Imaginea e utilă nu doar ca model. Dați-o acolo unde descrierea iese mai lungă decât imaginea însăși.

"Fă ca aici" rămâne un început bun. Devine o sarcină bună după patru rânduri și o privire asupra rezultatului lângă model.

Combinațiile de taste și forma etichetei imaginii pot diferi în versiunile noi de Claude Code; modul de transmitere și limitele a ceea ce vede agentul nu depind de versiune.