Než začnešAplikace a návrh

Co potřebuješ na export Claude Design do WordPressu v aplikaci

Mac s čipem Apple (M1 nebo novější) a macOS 12 nebo novější.
Účet ChatGPT. Konverzi dělá AI z tvého vlastního předplatného, takže nám za kredity neplatíš.
Tvůj export Claude Design: návrh uložený jako HTML soubor. Pokud máš víc stránek, ulož každou jako samostatný soubor.

HTML z Claude je nejkratší cesta k šabloně, protože ho aplikace nemusí sestavovat ani nejdřív otevírat v prohlížeči. Bezplatná verze převede tři weby po nejvýš pěti stránkách. Na práci pro klienty potřebuješ licenci Pro ze stránky s ceníkem.

Instalace, prostředí a přihlášení

Stáhni si aplikaci pro Mac a přesuň ji do složky Aplikace. V nastavení (Settings) klikni na Prepare environment a aplikace stáhne Docker i prostředí pro konverzi. Pak se přihlas přes Connect with ChatGPT. Každý z těchto kroků podrobně a se snímky popisuje návod pro Lovable v aplikaci a pro Claude jsou stejné.

Aplikace html2wp s připraveným prostředím po kliknutí na Prepare environment — Prostředí je připravené a aplikace čeká na první projekt.

Export Claude Design do aplikace

Pro export Claude Design si v Claude stáhni artefakt jako soubor .html. 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 do stejné složky, na místa, která kód očekává. Další stránky, třeba O nás nebo Kontakt, patří vedle jako about.html a contact.html. Aplikace podle názvu souboru pozná, která stránka je která.

V aplikaci klikni na New project (⌘N), nech jako výstup HTML WordPress theme a zvol Choose a folder. Pokud máš složku zabalenou do ZIPu, použij místo toho Import a ZIP.

Nový projekt: výstup HTML WordPress theme a import ZIPu nebo složky.

Export Claude Design naimportovaný v aplikaci html2wp jako statické HTML — Po importu aplikace rozpozná statické HTML a originál nechá beze změny.

KonverzeZ návrhu na šablonu

Flash, nebo Full pro šablonu WordPressu

Flash je výchozí: každý krok proběhne jednou a trvá to zhruba půl hodiny. Full spustí každou kontrolu a pokusí se opravit chyby, takže trvá zhruba hodinu. Jednostránkový návrh bývá na kratším konci, ale kontroly i tak proběhnou celé.

Export Claude Design v aplikaci html2wp před spuštěním konverze Flash nebo Full — Projekt se statickým HTML před spuštěním konverze.

Během konverze ukazuje záložka Overview, co aplikace dělá. Pro pozastavení klikni na Stop conversion a pak pokračuj přes Continue.

Běžící konverze projektu z Claude Design v aplikaci html2wp — Průběh konverze s aktuálním krokem.

Kontrola návrhu v aplikaci

Záložka Compare ukazuje originál a verzi ve WordPressu vedle sebe, v šířce počítače i mobilu. Projdi si každou stránku, protože automatické kontroly zachytí většinu rozdílů, ale ne všechny. Když něco nesedí, napiš to do chatu. Změna proběhne v náhledu a Make release pak zabalí novou verzi šablony.

Záložka Compare v aplikaci html2wp s originálem a verzí ve WordPressu — Porovnání stránky po konverzi. Snímek je z ukázkového webu.

Aplikace html2wp po úpravě přes chat, s tlačítkem Make release — Po změně v chatu zabalíš šablonu přes Make release.

Export Claude Design do WordPressu: stažení šablony

V záložce Exports klikni u šablony WordPressu na Save a ulož si ZIP. Ve WordPressu ho nahraješ přes Vzhled → Šablony → Přidat novou → Nahrát šablonu. Šablona stojí sama o sobě: stránky, formuláře, menu i SEO fungují bez pluginu.

Záložka Exports v html2wp se ZIPem šablony z exportu Claude Design — Hotová šablona, zpráva o konverzi a původní projekt.

Editor Visual Edit přidá klientovi úpravy klikáním. Pokud pracuješ v terminálu, stejnou konverzi popisuje návod s pluginem pro Claude Code a Codex.

Export Claude Design do šablony WordPressu v aplikaci html2wp