AI přepracovala náš vlastní web
Z WordPressu na statický web na jedno sednutí — a ve druhém kole na Astro. Kódovací agent pi web nejdřív vizuálně prohlédl, sepisal návrh, přestavěl ho do čistého HTML a výsledek ověřoval screenshoty. Pak z webu udělal Astro: jeden společný layout, čisté adresy a formulář, který skutečně funguje. Žádný člověk nepřipsal ani řádek kódu.
Před / Po
Před — WordPress
WordPress + Elementor + Astra + Wordfence + WPForms + SuperPWA — plný CMS stack na web, který má dvě stránky. Každé otevření stálo několik megabajtů, pluginy bylo třeba neustále aktualizovat a patička pořád tvrdila „© 2021“, i když ta doba dávno přešla.
Po — statický web na Astro
Čtyři stránky nad jedním společným layoutem — head, navigace a patička napsané jednou. Tmavý mobile-first vzhled, ~15 kB CSS beze změny od prvního kola, žádné frameworky. Čisté adresy (/technologie, ne technologie.html), 301 přesměrování ze starých adres a kontaktní formulář jako Pages Function s ověřeným odesláním.
Majitel udělal jen dvě věci: ukázal agentovi současný web a odpověděl na pár otázek typu „co je o naší infrastruktuře vlastně pravda“.
Jak to probíhalo — první kolo
1. Prohlídka: dívat se, ne se ptát
Agent pořídil snímek celého aktuálního webu (šířka 1440 px) a prohlédl ho jako obrázek. Našel věci, kterých si za ty roky nikdo nevšiml:
- Chybějící responzivita: textový sloupec s pevnou šířkou uprostřed a mrtvý prostor po stranách na velkých monitorech
- V obsahu zůstal cizí snímek PHP editoru
- Popisek „Komentář“ z formuláře, který se dostal do textu stránky
- Patička, která pořád tvrdila „© 2021“
2. Návrh dřív než pixely
Než napsal jediný řádek kódu, agent sepisal návrh: co doporučuje (statická přestavba proti ponechání WordPressu), co upravit v textech, jak má web vypadat, jak vyměnit formulář, jak vyladit vyhledávače a rychlost a v jakém pořadí web nasadit. Majitel schválil postup — to byla jediná „schůzka“, kterou projekt potřeboval.
3. Stavba
Kompletní statický web o dvou stránkách: index.html, technologie.html, jeden společný style.css, ~20 řádků JavaScriptu (přepínač mobilní nabídky a automaticky doplňovaný rok), favicon, robots.txt a sitemap. Čisté HTML a CSS — žádný framework, žádné buildování, žádné knihovny navíc.
4. Kontrola přes screenshoty — rozhodující část
Tady se postup agenta liší od „vygeneruj kód a modli se“:
- Agent si web rozběhl u sebe v počítači (localhost:8123).
- Pořídil snímky obou stránek v šířce monitoru (1440 px) i mobilu (390 px).
- Snímky prohlédl jako obrázky a podíval se, jak je web rozložený.
- Našel skutečnou chybu: tlačítko mobilní nabídky se zobrazovalo i na monitoru, protože CSS skrylo menu, ale už ne tlačítko.
- Opravil CSS a snímky zopakoval, aby opravu ověřil.
Tahle smyčka — vykreslit → vyfotit → prohlédnout → opravit → vykreslit znovu — je stejná, jakou dělá lidský tester. Jen agent ji zvládne bez přestávek a bez „myslím, že to funguje, podívala by ses na to ještě jednou?“.
Druhý automatický test zkontroloval, že každý odkaz uvnitř webu vede na skutečný soubor a že obě stránky uvádějí jazyk a nastavení pro mobil. Obě kontroly prošly.
Druhé kolo — přestavba na Astro
Statický web fungoval, ale měl tři slabiny: head, navigace a patička zduplikované ve všech souborech, adresy končící na .html (sitemap už hlásil čisté adresy, které vedly na 404) a formulář bez backendu. Stejný postup jako v prvním kole: návrh, schválení, stavba, ověření.
1. Jeden layout místo čtyř
Společný Layout.astro: head, navigace a patička se píší jednou. Stránky neseč jen obsah — title, description, canonical a noindex přicházejí z frontmatteru. style.css i script.js přežily přestavbu bez jediné změny.
2. Čisté adresy
index.html → /, technologie.html → /technologie, a tak dále. Staré .html adresy chytá soubor _redirects a posílá je přes 301 na čisté. Sitemap i canonicaly, které do té doby vedly na 404, najednou platily — web se musel přestavět, ne opravit.
3. Formulář, který funguje
POST /kontakt běží jako Cloudflare Pages Function. Sdílený handler ověřuje e-mail a zprávu, hlídá honeypot proti botům, vytváří ticket v Zammadu a přesměruje na poděkovací stránku. Devět automatických testů proti handlerovi — všechny prošly. Build zvládne všechny čtyři stránky pod jednou vteřinou.
4. Co nás zastavilo
Přestavba na Astro 7 odhalila chybu, kterou nevidíte v terminálu: build bez jediné chyby dodal stránky se prázdným obsahem — nová verze Astro dostává obsah stránky do layoutu jiným způsobem, než staré návody říkají. Odhalila se až prohlídkou HTML přímo z buildu, ne dojmem z prohlížeče. Oprava byla jeden řádek podle dokumentace. Proto case study končí testem a výstupem buildu, ne „funguje to“.
Čísla
| Před (WordPress) | První kolo (statický) | Teď (Astro) | |
|---|---|---|---|
| Stránky | 2 + zbytečné pluginy | 2 | 4 (o poděkování za formulář navíc) |
| Rychlost načtení | několik MB (Elementor CSS/JS, jQuery, lazy-load, PWA šablona) | ~15 kB | ~15 kB — CSS i JS bez jediné změny |
| K čemu je web připoutaný | ~10 pluginů, 1 téma, průběžné aktualizace | 0 | 1 build nástroj, 0 JS na klientu |
| Head, navigace, patička | 4× zduplikované | 4× zduplikované | 1× — jeden layout |
| Adresy | stranka.html | stranka.html | čisté: /stranka, staré 301 |
| Kam může útočit | WordPress + ekosystém pluginů | 2 HTML soubory | statický dist/ + 1 malá function |
| Kontaktní formulář | WPForms | čekal na backend | funguje — 9 testů, ticket do Zammadu |
| Údržba | aktualizace pluginů a témat, bezpečnostní záplaty | upravit text | upravit .astro, npm run build |
| Zobrazení na mobilu | rozházené | mobile-first, ověřeno při 390 px | mobile-first — stejný CSS |
| Čas | — | méně než 30 minut — vše na jedno sednutí | jedno sednutí, včetně odhalení chyby v buildu |
Co to znamená pro malý firemní web
Malý firemní web s kontaktním formulářem CMS nepotřebuje. WordPress stack platil každý měsíc za aktualizace, zranitelná místa a pomalé načtení — výměnou za funkce, které web stejně nepoužíval. Úkolem agenta nebylo „napsat kód“, ale podívat se na současný web, poradit čestně, stavět minimum a výsledek doložit screenshoty i testy.
Druhé kolo ukázalo totéž na jiném místě: i hotový web se dá přestavovat po kusech. Každé kolo mělo návrh, schválení a měřitelný výsledek — a jednou z nich byl i bug, který build hlásil jako úspěch. Smyčka „vykreslit → ověřit → opravit“ chytí i věci, které se neprojevují v konzoli.
Stejný postup se dá zopakovat kdekoli: ukážete agentovi starší web, vyžádáte návrh, schválíte ho a dostanete ověřenou přestavbu se záznamem screenshotů a testů.
Co zbývá: skutečné údaje o infrastruktuře na stránce Technologie, analytika a přepojení DNS s 301 přesměrováním ze starých WordPress adres.