Îi cereți lui Claude: "Adaugă o listă de locale-uri, căutare, filtru după țară și schimbă aspectul". Agentul modifică mai multe fișiere și anunță că a terminat. La prima vedere, pagina arată bine. Dar, după ce introduceți un termen de căutare, înregistrarea dorită dispare. Goliți câmpul, însă înregistrarea nu revine.

Ce s-a stricat? Căutarea, filtrul sau lista în sine? Toate au fost adăugate deodată și încă nu ați văzut nicio componentă funcționând separat. Îi cereți să repare căutarea, primiți alte modificări și verificați din nou toată pagina. Se lucrează, dar aveți tot mai puțină încredere în rezultat.

Ca să nu descâlciți mai multe modificări în același timp, împărțiți solicitarea în pași mici, care pot fi verificați. Mai întâi afișați lista și comparați înregistrările. Apoi adăugați căutarea și testați-o pe listă. După aceea treceți la filtru, iar schimbarea aspectului lăsați-o pentru un pas separat. Erorile sunt în continuare posibile, dar veți avea o stare inițială verificată și veți ști ce s-a schimbat recent. Să vedem cum alegeți acești pași și cum îi cereți agentului să-i urmeze.

Când lista, căutarea, filtrul și aspectul se schimbă deodată, dispariția unei înregistrări poate avea mai multe cauzeListăCăutareFiltruAspectRândul a dispărutCare e cauza?Schimbări simultaneFiecare componentătrebuie verificată
O singură eroare, mai multe cauze posibile

În stânga sunt reunite modificările făcute dintr-o singură încercare. În dreapta apare un simptom general, care nu indică încă o cauză anume. Dacă verificați componentele pe rând, va fi mai ușor să legați apariția erorii de ultima modificare.

Alegeți cel mai apropiat rezultat

Descompunerea înseamnă împărțirea unei sarcini în părți. Când lucrați cu un agent, e util să le alegeți astfel încât să puteți verifica separat rezultatul fiecăreia. De exemplu, afișați mai întâi lista, apoi adăugați căutarea în ea și, la urmă, filtrul.

Dacă lista funcționează deja, nu e nevoie s-o creați din nou. Începeți cu următorul comportament care lipsește. Iar când nu e clar dacă lista funcționează, deschideți mai întâi pagina și uitați-vă. Punctul de pornire depinde de starea proiectului, nu de un plan frumos pe hârtie.

Și formularea "mai întâi scrie HTML, apoi JavaScript" împarte munca, dar nu ajută întotdeauna la verificarea rezultatului. Pentru o căutare funcțională, poate fi nevoie în același timp de un câmp de introducere în HTML și de un handler în JavaScript. E un singur pas clar, chiar dacă implică două fișiere.

Împărțiți solicitarea după comportament

Catalogul de exemplu conține patru înregistrări. Codul de locale, limba și țara sunt indicate mai jos; vom folosi aceste date la verificare.

CodLimbăȚară
en-USEnglishUnited States
de-DEGermanGermany
fr-CAFrenchCanada
ja-JPJapaneseJapan

Pentru fiecare pas putem preciza acum rezultatul și acțiunea de verificare:

PasRezultatCum verificați
Afișarea listeiPe pagină apar patru înregistrăriComparați codul, limba și țara fiecărui rând cu tabelul de mai sus
Adăugarea căutăriiTermenul filtrează înregistrările după cod sau limbăGerman și de-DE găsesc de-DE; zzz nu găsește nimic; un câmp gol afișează toate cele patru înregistrări
Adăugarea filtruluiFiltrarea după țară funcționează împreună cu căutareaCanada păstrează fr-CA; cu termenul German lista e goală; resetarea căutării și a țării readuce toate cele patru înregistrări
  • Listă și verificare
  • Căutare și verificare
  • Filtru și verificare

Săgeata indică trecerea la pasul următor după verificare. Căutarea și filtrul își pot schimba ordinea, dar ambele au nevoie de listă. Lăsăm schimbarea completă a aspectului pentru un pas separat: rezultatul ei e mai ușor de evaluat după ce funcționează acțiunile de bază.

Stabiliți limitele pasului

Să presupunem că lista e gata. Cereți-i lui Claude să adauge căutarea și precizați clar ce trebuie păstrat acum. În exemplu, datele și comportamentul paginii sunt în app.js, iar marcajul HTML în index.html. În proiectul dumneavoastră, indicați căile reale.

Citește @index.html și @app.js.
Lista cu patru locale-uri funcționează deja.
Adaugă un câmp de căutare după codul de locale sau numele limbii.

Păstrează înregistrările inițiale, câmpurile lor și aspectul.
Poți adăuga elementele necesare pentru căutare.
Nu adăuga încă filtrul după țară.

Verificare: German și de-DE găsesc de-DE;
zzz nu găsește nicio înregistrare; un câmp gol le afișează pe toate patru.

Explică mai întâi ce vei modifica. Nu schimba încă fișierele.

Citiți răspunsul. Dacă agentul a inclus date noi, schimbarea temei sau filtrul, clarificați limitele înainte să înceapă. Dacă propunerea respectă solicitarea, cereți-i să facă pasul. Indicațiile scrise îl ajută să se orienteze, dar rezultatul trebuie verificat ca să vedeți dacă a respectat limitele.

Nu orice acțiune suplimentară e inutilă. Câmpul de introducere e necesar pentru căutare. Schimbarea completă a culorilor e deja o cerință separată. O întrebare utilă: puteți obține rezultatul ales fără această modificare?

Dacă nu știți de unde să începeți

Într-un proiect nou pentru dumneavoastră, poate fi nevoie mai întâi să citiți. Nu cereți adăugarea căutării până nu aflați de unde vin înregistrările și ce fișier afișează lista.

Află de unde obține pagina înregistrările și unde afișează lista.
Citește două-trei fișiere-cheie, dacă sunt suficiente.
Enumeră căile găsite și propune primul pas mic.
Dacă nu ai suficiente informații, spune ce mai trebuie citit.
Nu modifica încă fișierele.

Rezultatul acestui pas constă în fișierele găsite și explicația rolului lor. Comparați răspunsul cu fragmentele indicate. Numărul "două-trei" e doar un reper pentru început, nu o interdicție de a citi codul necesar.

Verificați înainte de pasul următor

Mesajul "căutarea e gata" nu spune încă ce s-a verificat. Deschideți pagina și încercați cazurile din solicitare: o potrivire, lipsa potrivirilor și golirea câmpului. Verificați și dacă înregistrările inițiale și câmpurile lor au rămas intacte.

Dacă după golire apar doar trei rânduri, continuați să lucrați la căutare. Spuneți-i agentului ce ați făcut, ce rezultat așteptați și ce ați obținut: "Am golit câmpul. Mă așteptam la patru înregistrări, dar văd trei". Adăugarea filtrului acum ar îngreuna găsirea cauzei.

Uneori trebuie să micșorați pasul. De exemplu, dacă nu se afișează nicio înregistrare, mai întâi reparați afișarea listei și verificați-o. Iar ideea nouă de sortare o puteți nota separat, ca să nu se piardă și să nu lărgească modificarea curentă.

După adăugarea căutării, verificați potrivirile și golirea câmpului: dacă apare o eroare, reparați și testați din nou căutarea; dacă totul e în regulă, treceți la filtruLucrăm la căutareVerificăm în browserPotrivirile și golirea câmpuluiReparați căutareași testați din nouAdăugați filtrulla pasul următorEroareTotul e corect
Pasul următor începe după verificarea celui curent

Ramura din stânga revine la căutare până când comportamentul ei corespunde solicitării. Cea din dreapta se deschide după o verificare reușită. După ce adăugați filtrul, verificați atât filtrul, cât și felul în care lucrează împreună cu căutarea: noul pas poate afecta un comportament care funcționa deja.

Împreună cu Claude Code

Înainte de fiecare modificare, formulați trei lucruri: ce rezultat urmăriți acum, ce trebuie păstrat și cum veți vedea rezultatul. Dați-i agentului fișierele necesare, conveniți asupra pasului următor și cereți-i să-l execute. După verificare, continuați sau ajustați modificarea curentă.

Un pas poate necesita mai multe mesaje. Important e să puteți spune oricând: "Acum adăugăm căutarea. Lista a fost deja verificată. Filtrul mai așteaptă".