Z Claude Design do WordPressu: jak převést návrh na šablonu

Jaký výstup ti dal Claude Design?

Claude vytváří dva druhy výstupu a každý jde jinou cestou. Než začneš, ověř si, který máš, protože na tom závisí, jak dlouho konverze potrvá.

Co ti Claude dal	Co to je	Cesta
HTML artefakt	Samostatný soubor .html: kód, styly i skripty jsou přímo v něm.	Tento článek. Už je to ploché HTML, přesně ten vstup, který konvertor potřebuje.
React artefakt	Komponenta. Stránka se objeví až po spuštění JavaScriptu a HTML kolem ní je prázdný prvek, do kterého se aplikace připojí.	Návod pro Lovable: stejný druh vstupu, stejný krok navíc.

Pokud si nejsi jistý, otevři soubor a podívej se do <body>. Pokud tam vidíš své nadpisy a odstavce, máš HTML artefakt a jsi na správném místě. Když je tělo jeden prázdný <div> a značka skriptu, máš ten druhý druh.

Export z Claude Design do složky, včetně obrázků

Vstupem je vždy složka na tvém disku. Adresa živého webu není podporovaný vstup, a to záměrně. Kopie zveřejněné stránky zachová jen vykreslený výsledek a ztratí to, co ví zdrojový soubor.

Návrh z Claude proto exportuj (stáhni artefakt), vytvoř složku a ulož do ní soubor jako index.html. Pokud návrh odkazuje na obrázky, které nejsou přímo v souboru, dej je vedle něj, na stejná relativní místa, jaká kód očekává.

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # pokud návrh používá nějaké obrázky

Jedna stránka, nebo víc?

Jeden artefakt je jedna stránka a jednostránkový web se převede bez potíží. Stane se z něj úvodní stránka šablony. Pokud chceš web se stránkami O nás a Kontakt, požádej Claude i o ně a každou ulož jako samostatný soubor .html do stejné složky. Na názvech souborů záleží: analýza je čte a soubor jménem blog.html nebo about.html pochopí podle názvu.

Pokud zůstaneš u pěti souborů nebo méně, celá konverze se vejde do bezplatné verze.

Co potřebuje počítač na převod z Claude Design do WordPressu

I kratší cesta běží na tvém počítači a požadavky se nezmenší. Prohlížeč a dočasný WordPress slouží ke kontrole výsledku, ne k jeho výrobě:

• Node 20 nebo novější a Python 3 s balíčky Playwright a Pillow.
• Docker s příkazem docker compose. Spustí na tvém počítači dočasný WordPress a konvertor do něj nainstaluje šablonu dřív, než ji uvidíš.
• php-cli, protože každý PHP soubor projde kontrolou syntaxe, než jde do ZIPu.
• jq, curl, bash a tar. Cílový WordPress musí mít verzi 6.6 nebo novější.

První krok to všechno ověří. Oddělí to, co dokáže nainstalovat sám ve tvých vlastních složkách, od toho, o čem musíš rozhodnout ty. Docker za tebe nenainstaluje, pokud o to nepožádáš.

Spusť převod z Claude Design do WordPressu

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

Pak odkudkoli napiš:

/html2wp:html2wp

convert ./my-site

Cesta ke složce je celé zadání. Nepíšeš žádný konfigurační soubor a nevybíráš příkaz pro sestavení. V Codexu napiš convert ./my-site with html2wp. Pokud raději nechceš pracovat v terminálu, stejnou složku otevřeš i v desktopové aplikaci html2wp (návod se snímky obrazovky).

Flash trvá zhruba 30 minut a Full zhruba hodinu, podle počtu stránek a výkonu tvého počítače. Jednostránkový artefakt je na kratším konci, ale kontroly vždy proběhnou celé, ať je vstup jakkoli malý.

Co rozhodne za tebe a na co se zeptá

Než cokoli vygeneruje, změří tvoje soubory. Sepíše stránky a zjistí, které části kódu jsou společné a které jedinečné. Najde také designové tokeny, cokoli, co vypadá jako blog, a které stránky stojí samostatně. Pak zapíše, co plánuje udělat, a převádí podle tohoto plánu.

Vygenerovaný design často narazí na dvě věci:

• Každá varianta designu se zachová. Pokud tvoje stránky nesdílejí stejnou hlavičku, nevybere vítěze a ostatní nezploští. Místo toho vytvoří část šablony pro každou variantu a každou stránku napojí na tu, kterou opravdu používala. Artefakty z různých konverzací s Claude se často liší víc, než si pamatuješ.
• Složené závorky v textu přežijí. Mezikrok používá formát podobný JSX. Ukázka JSON nebo CSS v textu by jinak rozbila sestavení nebo by se na stránce ukázala jako {. Konvertor je ošetří, takže závorky zůstanou na stránce závorkami.

Opakující se skupiny, například karty, reference nebo FAQ, se ukládají jako kolekce, ne jako natvrdo zapsaný kód. Díky tomu je později opravdu upravíš, nevypadají jen jako upravitelné.

Kontrola, kterou nevynecháš

Konvertor dá každou stránku do jednoho obrázku vedle jejího originálu a ty si každý projdeš odshora dolů.

V jedné konverzi chyběla sekce níže na stránce a pixelové porovnání ukázalo rozdíl jen 0,4 %, takže kontrolou prošla. Tři druhy chyb číselné kontroly ze své podstaty nevidí. První je ovládací prvek, který vypadá dokonale, ale nic nedělá. Druhý je hodnota natvrdo převzatá z jediné stránky, ze které vznikla šablona. Třetí je cokoli, co se ukáže až po scrollování, kliknutí nebo odeslání formuláře.

Kontroluj také, jestli jde obsah upravovat. Stránka může sedět na pixel, a přesto nikdo nemůže upravit její FAQ nebo mřížku funkcí z wp-admin. Stalo se to a odhalila to právě tato kontrola, ne žádná automatická.

Úpravy po převodu z Claude Design do WordPressu: šablona, Visual Edit, nebo page builder

Do tvé složky přibudou dva soubory: ZIP se šablonou a vedle něj CONVERSION-REPORT.md. Zpráva uvádí, co konverze pokryla, co našla kontrola a co ještě zbývá. Šablonu instaluješ jako každou jinou šablonu WordPressu (Vzhled → Šablony → Přidat novou → Nahrát šablonu).

Šablona stojí sama o sobě. Stránky, blog, formuláře, menu, SEO i přesměrování jsou její vlastní kód. Ke svému běhu nepotřebuje plugin a nikdy nekomunikuje s naším serverem. Články blogu píšeš v blokovém editoru, text stránek zůstává v HTML. Na úpravu stránek bez kódu jsou dvě možnosti: Visual Edit a page builder.

Page builder je dobrá volba, když je design jen výchozí bod. Špatná je, když je design to, co předáváš. Pokud převádíš proto, aby vygenerovaný design přežil ve WordPressu, přestavba na widgety zruší důvod, proč jsi začal. Pokud ale rozložení za čtvrt roku předělá někdo jiný, jeho zkušenost s Elementorem může mít větší cenu než věrný design.

Lite, nebo Pro, pokud zvolíš Visual Edit

AI chat běží na tvém vlastním API klíči. Tokeny ti neprodáváme a jejich cenu řešíš se svým poskytovatelem.

Cena převodu z Claude Design do WordPressu a co konverze odmítne

Zdarma pro všechny, bez klíče a bez registrace: tři konverze po pěti stránkách a celkem pět opakovaných spuštění. Obě čísla se počítají na IP adresu, takže kancelář s jednou adresou má jeden limit. Bezplatná verze je na vyzkoušení nástroje, osobní weby a nekomerční práci.

Licence Pro ruší limit stránek a konverze i opakovaná spuštění jsou s ní neomezené. Odemkne také krok, který z obchodu udělá WooCommerce. Ten nikdy není zdarma: bezplatnou konverzi webu s obchodem aplikace rovnou odmítne, místo aby ji udělala napůl. Pro si můžeš koupit měsíčně nebo ročně na stránce s ceníkem a během bety je první platba o 30 % levnější.

Jedna výhrada: tohle je beta. Kontroly zachytí většinu rozdílů, ne všechny. Proto je čtení každé stránky vedle originálu součástí procesu, a ne volitelné doladění. A proto si nejdřív zdarma převeď něco vlastního a teprve pak tomu věř.

Návod na celý proces krok za krokem je v dokumentaci k aplikaci html2wp. Pokud je tvůj artefakt v Reactu, tuto cestu popisuje návod pro převod z Lovable do WordPressu.