Robil som stránku, kde si zákazník poskladá cenovú ponuku: vyberie výrobky z katalógu, vidí cenu aj s dopravou a pošle dopyt. Klient vyrába betónový mobiliár, teda kvetináče, lavice, koše a fontány pre obce a firmy.
Prvá funkčná verzia bola hotová rýchlo. Kód písal Claude Code a za pár hodín fungoval katalóg, košík, výpočet dopravy aj odoslanie dopytu.
Vyzerala však presne tak, ako dnes vyzerá skoro všetko, čo vyrobí AI: veľa textu, návodné nadpisy a karty, ktoré poskočia, keď niečo pridáte do košíka. Fungovalo to, ale nepôsobilo to ako firma, ktorá túto prácu robí desaťročia.
Na druhý deň som na nej strávil asi 10 hodín. Git hovorí: 108 commitov od 7:02 do 19:59. Takmer žiadny nepridal novú funkciu.
Čo sa vlastne opravovalo
Keď som commity prešiel, dali sa rozdeliť do štyroch skupín.
Nič sa nemá hýbať
Najviac ma rušili drobné skoky. Tlačidlo „+ Do ponuky“ sa po kliknutí zmenilo na riadok s počtom kusov a celá mriežka kariet sa posunula o pár pixelov. Otvorený krok formulára mal inú hlavičku ako zatvorený, takže pri prepnutí všetko poskočilo.
Oprava je vždy rovnaká: prvok musí mať v každom stave rovnakú výšku. Tlačidlo nahradí počítadlo presne tej istej veľkosti a štítok „Pridané“ sa zobrazí na fotke, nie ako nový riadok.
Menej textu
Približne každý štvrtý commit niečo mazal. Nadpis „Vyberte výrobky do ponuky“ nad katalógom, v ktorom je to aj tak jasné z tlačidiel. Štítok „Nezáväzne“ pri súhrne. Jeden z dvoch rovnakých stĺpcov s cenou. Katalógové čísla v názvoch výrobkov, z ktorých ostalo napríklad len „Fontána Barcelona“.
AI rada pridáva vysvetľujúci text, lebo je to bezpečná voľba. Zákazník ho však musí prečítať skôr, než sa dostane k tomu, čo chce.
Konzistencia
Všetky polia a tlačidlá majú rovnakú výšku. Prechod myšou vyzerá rovnako na všetkom, na čo sa dá kliknúť. Suma je v hlavičke, v lište aj v košíku zobrazená rovnako a vždy s označením, či je s DPH alebo bez. Košík sa všade volá košík, nie raz „ponuka“ a inde „výber“.
Všetky obrazovky
Mobil je samostatný pohľad, nie zmenšený počítač. Na notebooku s rozlíšením 1440 × 900 sa posledný krok zmestí bez rolovania. Na veľkom monitore sa stránka plynulo zväčší a neostane z nej úzky pás uprostred bielej plochy. Len veľkostí obrazovky sa týkalo 12 zo 108 commitov.
Čo AI nezvládla
Všetko vyššie AI zvládne, keď jej poviete, na čo sa má pozerať. Väčšinu týchto opráv nakoniec aj napísala.
Niektoré veci by však sama nenašla:
- Dva výrobky mali v katalógu fotky iných výrobkov. Kód bol v poriadku, chyba bola v dátach. Všimne si to len niekto, kto vie, ako výrobok vyzerá.
- Na jednom mieste stálo „27 rokov skúseností“, na inom „od roku 1997“. To spolu nesedí. Ktoré číslo platí, vie len klient, takže kým neodpovie, nie je na webe ani jedno.
- Logá obcí pri referenciách. Vyzerali dobre a pôsobili dôveryhodne, ale súhlas obcí s použitím erbov sme nemali. Išli preč.
- Otázky, ktoré zákazníci naozaj kladú. Časté otázky pod formulárom napísal obchodník, ktorý so zákazníkmi denne telefonuje. Nie sú vymyslené.
- Označenie ilustračných obrázkov. Dlaždice kategórií sú vizualizácie, ktoré vyrobila AI podľa skutočných výrobkov. Pri každej je napísané, že je ilustračná.
Práve na týchto veciach zákazníkovi záleží najviac: či výrobok vyzerá tak ako na fotke a či môže firme veriť. Ani jedna sa nedá opraviť v kóde.
Čo si z toho beriem
Z celého dňa som spravil kontrolný zoznam a dal ho Claudovi ako postup. Keď mu poviem „vypiluj to“, spraví snímky stránky v piatich veľkostiach obrazovky od mobilu po 4K a prejde ich podľa zoznamu v tomto poradí:
- Funguje všetko a má každý prvok všetky stavy (načítavanie, chyba, prázdny košík)?
- Nehýbe sa nič, čo sa hýbať nemá?
- Dá sa niečo vyškrtnúť?
- Vyzerá to isté všade rovnako?
- Funguje to na každej obrazovke?
- Je obsah pravdivý a potvrdený klientom?
- Vidí zákazník, prečo by mal firme veriť a ako sa ozvať?
- Sú v konzole nejaké chyby? Je stránka dosť rýchla a prístupná?
Potom opravuje po jednej veci na commit, kým už nič nenájde. Pridal som aj zoznam typických znakov „AI dizajnu“, ktoré má odstrániť: fialové prechody farieb, karty v kartách, všetko vycentrované, efektné animácie.
Ďalší web už 10 hodín trvať nebude. Body 6 a 7, teda pravdivý obsah a dôvera, však ostanú na človeku, ktorý sa s klientom rozpráva.