Vibecodovaný redesign travel blogu s Claude Code? To je nejnovější příběh Petra On The Way

AI vám umožní dělat věci, kterou jso za hranicí vašich běžných dovedností. Stačí vědět, co chcete. Poprosil jsem (ex)hvězdu české PPC scény a aktuální travel blogerku Petru Větrovskou, aby mi popsala, jak sama redesignovala cestovatelský blog, píše. Dál už „mluví“ Petra…

Můj travel blog potřeboval redesign už dlouho. Nejen kvůli vzhledu, ale i kvůli některým funkčním prvkům, které už jsou při větším než malém rozsahu webu nutné. Redesign v takovém rozsahu s webmasterem by šel úplně mimo můj rozpočet a trvalo by to dlouho. Ale hlavně, nedokázala jsem vytvořit zadání – celé si to v hlavě představit, promyslet a říct jak přesně to má vypadat. Rozhodla jsem se proto zkusit to svépomocí vibecodovat s Claude Code. Od grafického návrhu až po implementaci do WordPressu.

Rozsah redesignu

Internet je plný lidí, co prý vibecodují redesigny za půl dne. Tak to já nejsem, rovnou říkám, že zázrak na počkání se tady nekonal.

Dělali jsme 3 jazykové mutace a 9 odlišných typů stránky (homepage, detail článku, kategorie, bucket list, atd.). Některé části bylo potřeba i otextovat.

Workflow – jak jsem na to šla

Postupně. Jak správně řešit některé věci jsem konzultavala v chatu s Claudem, zadání jsem psala do Terminálu.

1. Nejdřív jsem prošla české i zahraniční travel blogy pro inspiraci, udělala si screenshoty věcí, co se mi líbí a dala jsem to Claudovi, ať to uloží do složky, projde a pochopí o co mi jde.
2. Řekla jsem mu nějaké cíle webu a cíle redesignu, jak to má působit, cílovou skupinu a můj style-guide pro psaní textů měl už z dřívějška.
3. Nechala jsem ho udělat prototyp homepage a detailu článku. Po mnoha iteracích jsme došli k výsledku, který stál za to nasadit.
4. Dala jsem Claudovi přístup k WP REST API, aby mohl dělat úpravy ve WordPressu a taky k FTP hostingu, abych tam nemusela nic ručně uploadovat já. A taky zákazy kam nesmí sáhnout.
5. Claude vymyslel, že nejlepší způsob bude vytvořit child-theme (k původní šabloně GeneratePress), kde upravoval jen 2 soubory: functions.php (pro vlastní PHP) a style.css (pro stylování).
6. Smazal všechno inline stylování. Postupně jsem ho nechala nasadit obecný styl webu, pak jednotlivé typové stránky a ladili jsme detaily a opravovali chyby.
7. Nakonec jsem ho nechala pročistit kód, projít vše co už se nepoužívá nebo zbytečně duplikuje. Nascreenshotovala jsem mu hodnocení z PageSpeed Insights a nechala ho opravit co mohl opravit.
8. Claude mi upravil i samotné rozhraní WordPressu pro lepší přehlednost v jazykových mutacích a pro ukládání informací o navštívených destinacích (které se pak promítají do mapy a přehledů na webu).

Co šlo hladce

Paradoxně věci, které mi přišly třeba trochu složitější zvládal za pár vteřin. Interaktivní mapu navštívených zemí s odkazy na články z těch zemí měl na první dobrou, já už jen ladila barvy. To bych třeba od webmastera ani neobjednávala, protože potřeba vs cena by nebyly v souladu.

Layout vyhodil vždycky hezký, čistý, ladila jsem jen detaily. Když mi něco nesedělo, vyhodil na počkání 5 alternativ a pak klidně dalších 5, dokud jsem nebyla spokojená.

Velmi dobře reagoval na vágní zadání vzhledu stránky typu “chci tam časovou osu, nevím jak, vymysli to, hlavně ať je to kompaktní”.

Jaké byly problémy

Tady se dostáváme k tomu, proč to u trochu složitějšího webu prostě není práce na jedno odpoledne. Spoustu věcí si Claude dělal po svém. Samozřejmě proto, že jsem ho nechala. Protože jsem v tu chvíli netušila, že to není excelentní kodér, kterému je třeba některé věci explicitně říct.

• Už od začátku jsem viděla, že z toho půjde vizuálně poznat, že to dělal Claude. že to vypadá jako už jiné weby, které jsem ho viděla navrhnout. Nevadí, devadesátkové weby vypadají taky všechny stejně. Beru to jako průmyslový standard, ve výsledku můj web stojí na obsahu a fotkách.
• Největší překvapení bylo, že ne všechny prvky uměl nahodit přesně tak, jak je nakreslil v prototypu. Právě o kousek menší font, o kousek větší mezera, jiné zarovnání prvků mi sežralo možná nejvíc času. Počítám, že je to dané tím, že bojoval s defaultním nastavením GeneratePress šablony, ale nepodařilo se mi to řešit jinak než mu říkat co je špatně a nechat ho to opravit. Možná by pomohlo na začátku nechat vynulovat nastavení všech prvků.
• Nehlídá si kontrast písma a pozadí, zvlášť u menších fontů. Později jsem mu zadala přesné minimální poměry pro jednotlivé velikosti a tloušťky fontu, ale bylo by mnohem jednodušší mít to zadané ještě před prototypem.
• Nerespektuje kodérská best-practices. Málo znovupoužívá styly, je schopný pro každou stránku vytvořit vlastní třídu a pak ji znovu vykreslit, místo aby použil hotový styl, což by bylo pro budoucí údržbu šílené. Špatně pracuje i s děděním vlastností a obecně dělá hodně workaroundů, nadužívá !important a pokyn “smaž prvek” chápe jako “schovej prvek” a víc než často používá display:none. Často používal inline styly místo aby použil už existující třídu. Tohle je taky potřeba nastavit mu předem.
• Než jsem si toho všimla a zakázala, hodně věcí upravoval přímo ve functions.php a do stránky ve WP mi vložil už jen shortcode, který celou tu věc vypsal. Což je ok třeba u mapy, ale on to dělal i tam, kde byl text, který bych mohla potřebovat editovat.
• Musela jsem přidat pravidlo “za chyby nikdy nemůže cache”, protože cokoliv mu nešlo opravit házel právě na cache, aniž by se snažil to vyřešit.
• Defaultně se nezamyslel nad tím, jestli danou věc už nemá přímo WP a nemůže ji použít. Takhle mi třeba vytvořil vlastní skript na výpis článků z blogu.

Kde jsem naopak házela klacky pod nohy já jemu bylo míň exaktní zadání. Ideální je samozřejmě říct mu rovnou kód barvy, počet pixelů. Já byla líná a tak jsme si díky mým “světlejší”, “větší”, “o kousek menší” prošli víc iteracema, než bylo možná nutné.

Výsledek?

Iterační způsob zadávání mi extrémně vyhovuje. Nemusela jsem mít dopředu vymyšlený celý web, prostě jsem postupně rozvíjela svou představu. Mohla jsem požádat o změnu kolikrát jsem chtěla a nakonec říct, že to necháme v původním stavu.

Celé to od začátku do konce bylo hotové za týden. Za cenu měsíčního Max (5x), 90 eur. Od webmastera by to bylo pár měsíců, nejspíš vyšší desítky tisíc a některé věci bych zřejmě kvůli úspoře vynechala.

Claude Design jsem nevyužila proto, že vyšel až 2 dny po mém redesignu.

Těžko říct, jestli znalost kódeřiny tu byla výhodou (přecijen jsem zarazila pár fakt blbě řešených věcí) nebo naopak na obtíž (zdržovalo to cestu k výsledku a někdy to bylo možná zbytečně přísné).

Mrknout jak to dopadlo můžete přímo na petraontheway.com.