Požádáte Claude: "Přidej seznam lokalizací, vyhledávání, filtr podle země a uprav vzhled". Agent změní několik souborů, oznámí, že je hotovo, a stránka na první pohled vypadá dobře. Po zadání dotazu ale požadovaný záznam zmizí. Vymažete pole, jenže záznam se nevrátí.

Co se pokazilo? Vyhledávání, filtr, nebo samotný seznam? Všechno vzniklo najednou a žádnou část jste zatím neviděli fungovat samostatně. Požádáte o opravu vyhledávání, dostanete další úpravy a znovu kontrolujete celou stránku. Práce pokračuje, ale důvěry ve výsledek ubývá.

Abyste nemuseli rozplétat několik změn najednou, rozdělte požadavek na malé ověřitelné kroky. Nejdřív zobrazte seznam a zkontrolujte záznamy. Pak přidejte vyhledávání a otestujte ho na tomto seznamu. Potom přejděte k filtru a změnu vzhledu nechte jako samostatný krok. Chyby se mohou objevit i tak, ale budete mít ověřený výchozí stav a jasně vymezený okruh posledních změn. Podívejme se, jak takové kroky vybrat a zadat agentovi.

Když se seznam, vyhledávání, filtr a vzhled změní najednou, při zmizení záznamu musíte prověřit několik možných příčinSeznamHledáníFiltrVzhledZáznam zmizelKde hledat příčinu?Změnili jste vše najednouKaždá částvyžaduje ověření
Jedna chyba, několik možných příčin

Vlevo jsou změny provedené najednou. Vpravo je vidět společný příznak, který ještě neukazuje na konkrétní příčinu. Když budete jednotlivé části ověřovat postupně, snáz spojíte vznik chyby s poslední úpravou.

Vyberte nejbližší výsledek

Dekompozice znamená rozdělení úkolu na části. Při práci s agentem je užitečné vybrat je tak, aby šel výsledek každé části ověřit samostatně. Například nejdřív zobrazit seznam, pak do něj přidat vyhledávání a nakonec filtr.

Pokud už seznam funguje, není třeba ho vytvářet znovu. Začněte nejbližším chybějícím chováním. A jestli nevíte, zda funguje, nejdřív stránku otevřete a podívejte se. Výchozí bod určuje stav projektu, ne hezky sestavený plán.

Věta "nejdřív napiš HTML, potom JavaScript" také rozděluje práci, ale ne vždy usnadní ověřování výsledku. Aby vyhledávání fungovalo, může být potřeba současně přidat vstupní pole v HTML a obslužnou funkci v JavaScriptu. Je to jeden srozumitelný krok, i když se týká dvou souborů.

Rozdělte požadavek podle chování

V ukázkovém katalogu jsou čtyři záznamy. Níže jsou uvedené kódy lokalizace, jazyky a země; tato data použijeme k ověření.

KódJazykZemě
en-USEnglishUnited States
de-DEGermanGermany
fr-CAFrenchCanada
ja-JPJapaneseJapan

Teď můžeme u každého kroku určit výsledek a způsob ověření:

KrokVýsledekJak ověřit
Zobrazit seznamNa stránce jsou vidět čtyři záznamyPorovnejte kód, jazyk a zemi v každém řádku s tabulkou výše
Přidat vyhledáváníDotaz vybírá záznamy podle kódu nebo jazykaGerman a de-DE najdou de-DE; zzz nenajde nic; prázdný dotaz vrátí čtyři záznamy
Přidat filtrFiltrování podle země funguje spolu s vyhledávánímCanada ponechá fr-CA; s dotazem German je seznam prázdný; zrušení dotazu i výběru země vrátí čtyři záznamy
  • Seznam a ověření
  • Vyhledávání a ověření
  • Filtr a ověření

Šipka označuje přechod po ověření. Vyhledávání a filtr můžete prohodit, ale oba potřebují seznam. Úplnou změnu vzhledu nechte jako samostatný krok. Snáz ji vyhodnotíte, až budou hlavní funkce fungovat.

Určete hranice kroku

Předpokládejme, že seznam už funguje. Požádejte Claude o přidání vyhledávání a jasně uveďte, co se má zachovat. V příkladu jsou data a chování stránky v souboru app.js, značkování v index.html. Ve svém projektu doplňte skutečné cesty.

Přečti si @index.html a @app.js.
Seznam čtyř lokalizací už funguje.
Přidej vyhledávací pole podle kódu lokalizace nebo názvu jazyka.

Zachovej původní záznamy, jejich pole i vzhled.
Můžeš přidat prvky potřebné pro vyhledávání.
Filtr podle země zatím nepřidávej.

Ověření: German a de-DE najdou de-DE;
zzz nenajde žádné záznamy; prázdný dotaz vrátí všechny čtyři.

Nejdřív vysvětli, co budeš měnit. Soubory zatím neupravuj.

Přečtěte si odpověď. Pokud se v ní objeví nová data, změna motivu nebo filtr, ještě před provedením upřesněte hranice. Jestli vše odpovídá požadavku, nechte agenta tento krok provést. Slovně stanovené hranice pomáhají práci usměrnit, jejich dodržení ale stejně ověřte podle výsledku.

Ne každá dodatečná činnost je zbytečná. Vstupní pole je pro vyhledávání potřeba. Úplná změna barev je ale samostatný požadavek. Položte si jednoduchou otázku: půjde požadovaného výsledku dosáhnout i bez této úpravy?

Když nevíte, kde začít

V cizím projektu může být potřeba nejdřív něco přečíst. Než požádáte o přidání vyhledávání, zjistěte, odkud záznamy pocházejí a který soubor zobrazuje seznam.

Zjisti, odkud stránka získává záznamy a kde zobrazuje seznam.
Pokud to stačí, přečti si dva až tři klíčové soubory.
Uveď nalezené cesty a navrhni první malý krok.
Pokud informace nestačí, řekni, co dalšího je potřeba přečíst.
Soubory zatím neupravuj.

Výsledkem takového kroku jsou nalezené soubory a vysvětlení jejich role. Porovnejte odpověď s uvedenými částmi kódu. Počet "dva až tři" je jen orientační hodnota pro začátek, ne zákaz přečíst si potřebný kód.

Ověřte výsledek před dalším krokem

Zpráva "vyhledávání je hotové" ještě neříká, co přesně agent ověřil. Otevřete stránku a vyzkoušejte příklady z požadavku: shodu, žádné výsledky a vymazání pole. Zároveň se ujistěte, že zůstaly původní záznamy i jejich pole.

Pokud po vymazání vidíte jen tři řádky, zůstaňte u vyhledávání. Popište agentovi akci, očekávaný a skutečný výsledek: "Vymazal jsem pole. Čekal jsem čtyři záznamy, vidím tři." Přidání filtru by teď jen ztížilo hledání příčiny.

Někdy je potřeba krok ještě zmenšit. Pokud se například nezobrazují vůbec žádné záznamy, nejdřív obnovte seznam a ověřte ho. Nový nápad na řazení si můžete poznamenat jako samostatný bod, aby se neztratil a nerozšířil současnou úpravu.

Po přidání vyhledávání ověřte shody a vymazání pole: při chybě vyhledávání opravte a znovu otestujte, při úspěchu přejděte k filtruPracujeme na hledáníOvěřujeme v prohlížečiShody a vymazání poleOpravit vyhledávánía znovu ověřitPřidat filtrv dalším krokuChybaVše v pořádku
Další krok začíná po ověření toho předchozího

Levá větev vrací k vyhledávání, dokud jeho chování neodpovídá požadavku. Pravá větev se otevře po úspěšném ověření. Až přidáte filtr, otestujte ho samostatně i společně s vyhledáváním: nový krok může ovlivnit chování, které už fungovalo.

Ve spojení s Claude Code

Před další úpravou si ujasněte tři věci: jaký má být teď výsledek, co se má zachovat a jak výsledek ověříte. Předejte agentovi potřebné soubory, dohodněte nejbližší krok a pověřte ho jeho provedením. Po ověření pokračujte dál, nebo upřesněte současnou úpravu.

Jeden krok může zabrat několik zpráv. Důležité je, abyste kdykoli dokázali říct: "Teď přidáváme vyhledávání. Seznam už je ověřený. Na filtr dojde později."