Lovable vs. Claude Code: Proč jsem přepsal React web na čisté HTML

Lovable mi vygeneroval 90+ souborů, 67 závislostí a přes 12 000 řádků kódu. Pro jednoduchou landing page. Claude Code to celé přepsal na 4 soubory a 2 295 řádků během pár desítek minut. Oba nástroje jsou dobré. Ale každý na něco jiného.

O čem to je

Většina AI nástrojů vám dnes vygeneruje web během pár minut. Napíšete prompt, kliknete a máte hotovo. Jenže málokdo řeší, jestli je výsledek zbytečně složitý.

Tohle je příběh o tom, jak jsem jedním nástrojem vytvořil web, který fungoval, ale pod kapotou byl naprosto předimenzovaný. A jak jsem druhým nástrojem dosáhl lepšího výsledku s desetinou kódu.

Zadání

Potřeboval jsem landing page pro 3DCap, naši firmu na algoritmický trading. Nic složitého: hero sekce, popis služeb, proces spolupráce, FAQ, kontakt přes Calendly a dvě jazykové verze (čeština a angličtina). Žádná dynamická data, žádný backend, žádná složitá interakce.

Co vytvořil Lovable

Lovable nahodil projekt za pár sekund. Na první pohled to vypadalo skvěle. Tmavý design, moderní karty, responsivní layout. Všechno fungovalo.

Pod kapotou ale Lovable vytvořil plnohodnotnou aplikaci s desítkami knihoven, překladovým systémem a kompletní infrastrukturou pro složité webové projekty. Prostě svůj standardní postup, který aplikuje na každý projekt bez ohledu na to, jestli je to jednoduchá prezentace nebo komplexní aplikace.

Výsledek? Přes 90 souborů, 67 knihoven a 12 400+ řádků kódu. Pro stránku, která zobrazuje statický text a pár obrázků.

Následovalo 50+ úprav. Ladění obsahu, barev, rozložení. Každá změna byla pomalejší, než by musela být, protože procházela celou tou mašinérií. Úprava jednoho nadpisu znamenala změnit ho na třech místech a spustit sestavení celého projektu.

Proč přepsat

Hlavní důvody byly dva: SEO a rychlost. Lovable verze posílala do prohlížeče obrovské množství kódu, než se stránka vůbec zobrazila. Pro landing page, kterou chcete mít vysoko ve vyhledávání, je to problém. A navíc, provozovat čisté HTML je řádově jednodušší a levnější než aplikaci, která vyžaduje sestavení a speciální prostředí na serveru.

Přepis přes Claude Code

Otevřel jsem Claude Code, dal mu kontext projektu a řekl: „Přepiš to na čistý HTML a CSS, žádný framework, zachovej design i obě jazykové verze."

Během pár promptů Claude Code:

1. Analyzoval celou aplikaci, komponenty, styly, překlady, rozložení
2. Smazal všech 90+ souborů
3. Vytvořil 4 soubory od nuly: dvě HTML stránky (CZ/EN), jeden CSS soubor a 60 řádků JavaScriptu pro animace
4. Zjednodušil nasazení, stačí nahrát soubory na server
5. Zachoval kompletní design včetně efektů, animací a rozložení

Žádné postupné refaktorování. Čistý přepis s pochopením toho, co web skutečně potřebuje.

Srovnání v číslech

Google PageSpeed Insights: 100 ze 100

Přepsaný web dosáhl v Google PageSpeed Insights plného skóre. 100 bodů ve všech čtyřech kategoriích: výkon, přístupnost, osvědčené postupy a SEO. A to při simulaci na pomalém mobilním připojení.

Klíčové metriky přepsané verze:

• First Contentful Paint: 0,8 s. Stránka se začne vykreslovat téměř okamžitě
• Largest Contentful Paint: 0,8 s. Hlavní obsah je viditelný za necelou sekundu
• Total Blocking Time: 0 ms. Prohlížeč nemusí čekat na žádný JavaScript
• Cumulative Layout Shift: 0. Nic na stránce neposkakuje při načítání

Nulové čekání. Nulové poskakování obsahu. Na emulovaném pomalém mobilu. Lovable verze může dosáhnout dobrých výsledků, ale vyžaduje výrazně víc optimalizací a kompromisů, protože samotný základ, na kterém běží, je větší než celý přepsaný web.

Proč to dopadlo takhle

Lovable není špatný nástroj. Udělal přesně to, co umí. Vygeneroval moderní webovou aplikaci. Problém je, že landing page žádnou aplikaci nepotřebuje.

Stránka si nepotřebuje nic pamatovat. Nemá formuláře (Calendly je vložený widget). Nemá dynamická data. Nepotřebuje navigaci mezi stránkami, jsou to dvě HTML stránky. Pro tenhle typ webu je celý ten složitý systém zbytečná vrstva, která zpomaluje načítání a přidává složitost.

Pár konkrétních příkladů:

• FAQ sekce: Lovable pro ni použil speciální knihovnu. Přitom HTML má nativní element <details>, který dělá přesně to samé bez jediného řádku JavaScriptu
• Dva jazyky: Lovable nasadil překladový systém se slovníky a detekcí jazyka. HTML řešení? Dva soubory, index.html a en/index.html. Hotovo
• Animace: Lovable na ně potřeboval složitý systém. Čistá verze to zvládá v 20 řádcích

Kdy ale framework smysl dává

Nechci být neférový. Jsou situace, kde je React nebo jiný framework správná volba:

• Aplikace se stavem, jako dashboardy, administrace nebo e-shopy s košíkem
• Hodně interaktivity, třeba filtry, real-time aktualizace, formuláře s validací
• Týmový vývoj, kde komponenty a typový systém pomáhají udržet konzistenci
• Rychlé prototypování, Lovable je výborný na to, abyste za hodinu měli funkční prototyp a mohli validovat nápad

Framework ale není default pro všechno. A to je přesně ta chyba, které se většina AI nástrojů dopouští. Používají jeden přístup bez ohledu na kontext.

Co si z toho odnést

AI nástroje pro generování webů jsou dneska úžasné. Lovable vám za minuty dá funkční prototyp. Claude Code je primárně nástroj pro programátory, ale jeho používání je čím dál jednodušší a doporučuji ho vyzkoušet i neprogramátorům. Celý přepis zvládl za pár minut.

V automatizaci nejde o to přidat další nástroj. Jde o to odstranit zbytečné vrstvy.

Tohle je přesně typ technologického rozhodnutí, které ve firmách dělám každý den. Hledat nejjednodušší řešení, které přináší největší efekt. Poznáte se v něčem z toho?

• Některé části vašeho workflow jsou pořád zbytečně ruční
• Máte víc nástrojů než výsledků
• Něco jste automatizovali, ale výsledek je složitý a těžko udržovatelný
• Nevíte, jak efektivně využít AI, aniž byste si přidělali práci

Pokud se ve firmě ptáte, jak udělat víc za méně, automatizovat rutinní kroky nebo lépe využít AI bez zbytečné složitosti, rád s vámi projdu vaše procesy a navrhnu řešení, které je technicky jednodušší, obchodně efektivní a připravené na další růst.

Domluvit nezávazný call o vaší automatizaci