Jak jsem vytvořil tento web za jedno odpoledne pomocí AI

Začalo to jako další položka v zápisníku: postavit SvetAI.cz. Magazín, ze kterého má být veřejný důkaz toho, že v CZMM neumíme AI jen popisovat, ale skutečně používat.

Texty se sbíhaly, brand byl nakreslený, směr jasný. Chyběl ten zbytek — produkční web. SEO. Autoři. Vizuální identita. Distribuce. Redakční workflow, který by tým mohl reálně používat. Všechno najednou.

A místo měsíců práce s týmem vývojářů jsem to zvládl za jedno odpoledne. Ne proto, že na to máme magickou cestu. Proto, že jsem za posledních pár let vybrousil workflow, ve kterém AI funguje jako pracovní vrstva, ne jako kouzelná hůlka.

Tohle je pracovní deník toho, jak to celé proběhlo. Bez marketingových frází. Přesně tak, jak to běželo — včetně momentů, kdy AI nestačila a bylo potřeba vzít montérky a jít do práce.

Co se vlastně řešilo

SvetAI.cz vznikal s jednoduchým cílem: ne další blog plný AI-generovaných článků o tom, že „AI mění svět". Magazín, který ukazuje konkrétní postupy, srovnání nástrojů a reálné zkušenosti z praxe. Píšeme pro majitele firem a manažery, ne pro vývojáře a ne pro AI nadšence.

Měl jsem připravený Next.js základ. Pár článků, sedm fixních kategorií, statický export, admin panel s integrací na Claude API pro draft writing. Ale to byl jen kostlivec — bez SEO foundations, bez autorského systému, bez branded identity, bez distribuce a bez redakčního pocitu.

Druhý problém: nemohl jsem to celé dělat tradičně. V CZMM běží klientské projekty, termíny tlačí. Kdybych čekal na pomalý vývoj přes celý tým, web by stál ještě v listopadu. Potřeboval jsem ho teď.

Co nefungovalo

Klasický postup tady selhal hned ze tří důvodů.

Nebyla volná developer kapacita — práci na klientech jsem zastavit nechtěl. Bylo potřeba řešit příliš mnoho oblastí najednou — SEO, brand, UX, autory, redakční workflow, admin polish. To není jedna úloha. To je deset úloh v různých doménách, každá s vlastním kontextem. A kompromisy nebyly přijatelné. Magazín o praktickém použití AI nemůže působit jako AI startup demo s placeholdery a stock fotkami.

Tady se ukázalo, že teorie nestačí. Bylo potřeba spojit několik nástrojů, vlastní procesy a hodně času ve stoje u terminálu.

Jak to celé proběhlo

Krok 1 — strategická vrstva v ChatGPT

Každá větší fáze začínala v ChatGPT. Ne proto, že tam vzniká kód. Proto, že tam vzniká struktura.

Zadání mělo vždy stejný formát: co potřebuji, co naopak nesmím přidat (žádná agent infrastructure, žádný backend redesign — to patří do jiného projektu), aktuální stav, žádaný výstup.

ChatGPT vyhodil plán. Plán prošel rychlou kontrolou — co dává smysl, co ne, co bych v reálu udělal jinak. Z toho vznikl handoff dokument v Markdownu, který se ručně přenesl do dalšího nástroje. Bez tohoto kroku by AI v repu pracovala bez kontextu a vytvářela by řešení, která vypadají dobře, ale nesedí na to, co skutečně potřebujeme.

Krok 2 — implementace přes Claude Code

Handoff šel do Claude Code, agentního nástroje, který běží přímo v repozitáři a vidí kontext celého projektu — soubory, kód, git status, lockfiles, existující komponenty.

Pracovní cyklus jednoho dílčího úkolu vypadal takhle: popsání úkolu se scope, prozkoumání relevantních souborů, návrh implementace po menších krocích — komponent, schema, route. Po každé větší změně typecheck, lint, build. Pro vizuální věci screenshot přes Playwright. Bez něj se některé hover stavy a mobilní layouty prostě neviděly.

To zní jednoduše. V praxi je to desítky iterací, korekcí a vět typu „počkej, tohle ne — vrať to a udělej to jinak".

Krok 3 — Cursor pro rychlé úpravy

Některé úpravy se dělaly mimo Claude Code, přímo v Cursoru. Hlavně tam, kde stačila jednorázová úprava — copy text, malý CSS tweak, fix jednoho řádku ve frontmatteru. Cursor je lepší, když potřebujete editovat konkrétní místo bez celého agentního cyklu kolem.

Krok 4 — git workflow

Žádná práce přímo na main. Feature commity. Před prod buildem rm -rf .next && npm run build. Banální, ale šetří hodiny debuggingu.

Tady mimochodem vznikl jeden z nejvíc poučných momentů. Jeden den dev server začal vracet HTTP 500 s hláškou „missing required error components, refreshing…". Bílá stránka. Internal error. Web se nenačítal.

Problém nebyl v kódu. Problém byl v tom, že dev server běžel od rána. Mezitím jsem přidal lib/authors.ts, změnil schema článku, zavedl BrandMark komponent a další pět souborů importovalo nové cesty. Webpack HMR ten diff prostě nepobral. In-memory module graph držel staré chunky, které už neodkazovaly na nic reálného. Browser stahoval JavaScript, který odkazoval na exporty, které neexistovaly.

Fix? Žádný kódový. Tři příkazy:

pkill -f "next dev"
rm -rf .next
npm run dev

To je jeden z těch okamžiků, kdy AI nepomůže, dokud člověk nepozná, kde se problém skutečně schovává. Někdy není problém v nástroji. Problém je v chaosu kolem něj.

Krok 5 — Playwright vizuální kontrola

Pro kritické změny — homepage redesign, brand polish, autorské stránky — jsem používal Playwright. Claude si otevřel skutečný prohlížeč, navštívil produkční build na localhost a vrátil screenshoty.

Tam se objevily věci, které kód sám neukázal. Že hover gradient stripe na kategorii scaluje ze špatného originu. Že breadcrumb na mobilu wrapuje špatně. Že OG fallback obrázek vede na neexistující cestu, protože jsme zapomněli přepsat referenci po smazání staré PNG.

Bez vizuálního kola by ty věci šly do produkce. To není detail. Návštěvníkovi to nebude vadit racionálně — bude mu to vadit pocitově. A pocit rozhoduje o tom, jestli zůstane.

Krok 6 — typecheck + lint + build jako safety net

Před každým „tohle je hotové" prošla základní pipeline. Typecheck na nula chyb. Lint na nula warningů. Build na 30+ stránek prerendered bez failed routes. Prod smoke test na všechny URL — homepage, články, kategorie, autoři, RSS, sitemap, admin (musí být 401 bez creds).

To není pojistka pro klienta. To je pojistka pro to, abych o půlnoci neřešil produkční chybu, která se dala chytit v pět minut prohlédnutím buildu.

Co používáme

Stack rozdělený podle účelu. Ne abstraktně. To, co máme reálně otevřené na obrazovce.

Strategie a struktura: ChatGPT pro plánování fází a vyhledání slepých míst, ručně psané handoffy v Markdownu, vlastní system prompts upravované podle fáze projektu, editorial dokumenty (ONBOARDING.md, PUBLISHING.md) přímo v /docs/ repu.

Vývoj a kód: Claude Code přímo v repozitáři, Cursor pro rychlé jednorázové úpravy, Next.js 15 + React 19 + Tailwind 3 (statický export, file-based content), Git, GitHub, lokální dev server, ručně testovaný prod build.

Kontrola a vizuál: Playwright pro vizuální QA každé fáze, Browser DevTools pro detailní debugging hydration warnings, inline SVG brand komponenty místo image asset chain (žádný flicker, žádný fallback handling), screenshoty jako součást review procesu, ne jako finální výstup.

Obsah a vizuály mimo web: Freepik a Canva pro doprovodné editorial obrázky, vlastní obrazové prompty pro konzistentní brand, CapCut pro krátká doprovodná videa.

Co teprve přijde: vlastní AI agenti propojení přes interní systém, automatizovaný handoff mezi nástroji (dnes je to stále hodně copy-paste), n8n workflow pro publikační rutinu, BroOS / Agency OS — interní vrstva, která drží procesy napříč klienty.

Nepopisuju nástroje obecně. Každý z nich má v tomto workflow konkrétní místo a konkrétní okamžik, kdy se přepíná.

Co se tím reálně změnilo

Není to o tom, že by AI psala kód místo lidí. Je to o tom, že hodiny chaotické práce se mění v krátké řízené bloky.

Co by trvalo týmu týden — homepage redesign, sjednocení brandu, SEO foundation, autorský systém — proběhlo za jeden den intenzivní práce. Ne proto, že je to lehké. Proto, že každý jednotlivý krok byl řízený a okamžitě testovatelný.

Místo „až vývojář bude mít čas" vznikl postup, který může opakovat kdokoliv s podobným setupem. Místo závislosti na konkrétním člověku vznikl systém, který drží práci a předává ji dál. Debug, který by jinak zabral hodinu hledání, zabere pět minut: AI prozkoumá kontext, najde inkriminované místo, navrhne opravu.

Ne všechno bylo bezchybné. Bylo několik momentů, kdy AI navrhla řešení, které vypadalo logicky, ale nedávalo smysl v kontextu Next.js 15. Tehdy se to muselo zarazit, opravit ručně a vysvětlit AI, proč to bylo špatně. To je realita práce s nástrojem. Ne kouzelná hůlka. Nástroj.

Co se z toho naučit

Stale chunks v dev serveru jsou tichý zabiják. Když dev server běží přes větší změny, jednou za čas spadne na „missing required error components". Reflex: pkill -f "next dev" && rm -rf .next && npm run dev. Bez ostudy a bez hledání bugu, kde žádný není.

Soft-404 je SEO problém, ne UX. Když Next.js bez dynamicParams = false rendruje neexistující slugy s HTTP 200 a year-long cache, crawler indexuje neexistující stránky jako reálné. Statický enum slugů + dynamicParams = false = clean 404 s no-cache headers. Fix na jeden řádek, SEO dopad obrovský.

Brand mark musí být inline SVG. Žádný flicker, žádný fallback handling, žádné HTTP requesty. Komponent přebírá currentColor a vlastní gradient. Můžete ho použít kdekoli — header, footer, avatar, watermark, CTA dekorace, admin empty state — bez nutnosti řešit, kde je soubor.

Autorský systém není feature, je to E-E-A-T. Bez autorů s rolí, bio a sameAs v JSON-LD vypadá magazín jako jednou-založený-blog. Google to vidí. Person → worksFor → Organization → sameAs řetěz drží entitní strukturu, kterou si search engine umí spojit dohromady.

Vizuální QA musí být v procesu, ne na konci. Screenshot po každé větší změně odhalí věci, které kód neukáže. Špatné odsazení breadcrumbu. Gradient strip, který se zobrazí jen při hover, ale s špatným originem. Mobilní wrap chaos. To se v IDE nevidí.

Pár slov k osobní rovině

Mám jednu vlastnost, které si na sobě vážím: nezůstanu stát vedle problému. Když HTTP 500 padá v cyklu a kód vypadá v pořádku, jdu se podívat, co reálně běží na portech. Jaké procesy drží .next cache. Jestli mi visí dva instance dev serverů z různých hodin a každý si žije vlastním životem.

Většinu věcí, které dělám, dělám sám. Není to vždy elegantní. Není to vždy pohodlné. Ale často právě tam vznikne největší posun. Nikdo jiný to za vás neudělá. A někdy je to dobře — protože pak vznikne systém, který opravdu odpovídá tomu, jak pracujete.

Tohle není o vývojářském egu. Je to o tom, že realita projektů — klienti, termíny, weby, problémy — neumožňuje čekat. A když umíte spojit AI nástroje s vlastní zkušeností a vlastním workflow, dokážete neskutečné věci. AI není kouzelná hůlka. Je to pracovní nástroj. A když ho člověk umí použít, šetří hodiny denně.

Kam to celé směřuje

Tohle workflow už dnes funguje. Ale upřímně — pořád je v něm hodně copy-paste. Z ChatGPT do handoffu. Z handoffu do Claude Code. Z Claude Code zpět do brainstormingu, když narazí. Z projektové dokumentace do promptu. Z výsledků jednoho kola do zadání toho dalšího.

Každé předání je vrácená energie. Každé předání je drobný zdroj chyb.

Dlouhodobý směr je převést toto workflow do vlastních AI agentů, kteří budou přebírat handoffy mezi sebou. Číst projektovou dokumentaci a workflow definice. Pracovat podle pravidel daných centrálním systémem. Kontrolovat git status a working tree před změnami. Připravovat pull requesty s rozumnými commit messages. Generovat reporty z proběhlých změn. A postupně snižovat nutnost ruční koordinace.

Kdybych měl možnost se na týden zavřít a nedělat nic jiného, velkou část tohoto workflow bych už dnes převedl do vlastních agentů. Jenže realita je jiná. Běží zakázky. Běží klienti. Běží weby, problémy a termíny. Takže systém nevzniká v laboratoři. Vzniká za pochodu. Přímo v práci.

Cílem není používat AI. Cílem je postavit vlastní systém práce, ve kterém je AI jen jednou z vrstev. Vrstva, kterou kontrolujeme my, ne ona nás.

SvětAI.cz — magazín, který právě čtete — je první veřejný kus toho systému. Postavený přesně tím způsobem, o kterém píše.

Pro firmy, které tohle čtou jinak

Pokud čtete tenhle text jako majitel firmy nebo marketér a říkáte si, jestli to není jen vývojářská sranda, krátká odpověď: není.

V CZMM stavíme weby, aplikace, reklamy, automatizace a interní AI workflow pro firmy, které chtějí zrychlit a zlevnit věci, které dnes dělají ručně. To, co popisuju výše, není teoretický postup. Je to způsob, jakým reálně řešíme klientské projekty.

Pokud chcete podobné AI workflow zavést ve firmě nebo zrychlit tvorbu webů, obsahu a interních procesů, ozvěte se nám. Neprodáváme kouzelnou AI. Stavíme pracovní systémy, které šetří čas a snižují chaos.