Predtým, ako začnešAppka a návrh

Čo potrebuješ na prevod Claude Design do WordPressu v appke

Mac s čipom Apple (M1 a novší) a macOS 12 alebo novší.
Účet ChatGPT. Konverziu robí AI z tvojho predplatného, takže nám za kredity neplatíš.
Návrh z Claude uložený ako HTML súbor. Ak máš viac stránok, každú ako samostatný súbor.

HTML z Claude je najkratšia cesta k téme, lebo appka ho nemusí zostavovať ani otvárať v prehliadači navyše. Bezplatná verzia prevedie tri weby po najviac piatich stránkach. Na prácu pre klientov potrebuješ licenciu Pro z cenníka.

Inštalácia, prostredie a prihlásenie

Stiahni appku pre Mac a presuň ju do priečinka Aplikácie. V nastaveniach klikni na Prepare environment, appka si stiahne Docker aj prostredie na konverziu. Potom sa prihlás cez Connect with ChatGPT. Každý z týchto krokov podrobne aj so snímkami opisuje návod pre Lovable v appke, pre Claude sú rovnaké.

Appka html2wp s pripraveným prostredím po kliknutí na Prepare environment — Prostredie je pripravené a appka čaká na prvý projekt.

Návrh z Claude Design v appke

V Claude si artefakt stiahni ako súbor .html. Vytvor priečinok a ulož ho doň ako index.html. Ak návrh odkazuje na obrázky, ktoré nie sú priamo v súbore, daj ich do toho istého priečinka na miesta, ktoré kód očakáva. Ďalšie stránky, napríklad O nás alebo Kontakt, ulož vedľa ako about.html a contact.html. Appka podľa názvu pochopí, čo je ktorá stránka.

V appke klikni na New project (⌘N), nechaj výstup HTML WordPress theme a vyber Choose a folder. Ak máš priečinok zbalený, použi Import a ZIP.

Nový projekt: výstup HTML WordPress theme a import ZIP alebo priečinka.

Návrh z Claude Design naimportovaný v appke html2wp ako statické HTML — Po importe appka rozpozná statické HTML a ponechá originál bez zmeny.

PrevodZ návrhu na tému

Flash alebo Full pre Claude Design do WordPressu

Flash je predvolený, každý krok prebehne raz a trvá zhruba pol hodiny. Full prejde všetky kontroly a chyby skúsi opraviť, trvá zhruba hodinu. Jednostránkový návrh býva na kratšom konci, kontroly však bežia celé.

Návrh z Claude Design v appke html2wp pred spustením Flash alebo Full — Projekt so statickým HTML pred spustením konverzie.

Počas konverzie vidíš v záložke Overview, čo appka práve robí. Zastavíš ju tlačidlom Stop conversion a pokračuješ cez Continue.

Bežiaca konverzia návrhu z Claude Design v appke html2wp — Priebeh konverzie s aktuálnym krokom.

Kontrola návrhu z Claude Design v appke

V záložke Compare vidíš originál a verziu vo WordPresse vedľa seba, v šírke počítača aj mobilu. Prezri si každú stránku, lebo automatické kontroly zachytia väčšinu rozdielov, nie všetky. Čo nesedí, napíš do chatu. Zmena sa urobí v náhľade a tlačidlom Make release potom zabalíš novú verziu témy.

Záložka Compare v appke html2wp s originálom a verziou vo WordPresse — Porovnanie stránky po konverzii. Snímka je z ukážkového webu.

Appka html2wp po úprave cez chat s tlačidlom Make release — Po zmene v chate zabalíš tému tlačidlom Make release.

Export témy z Claude Design do WordPressu

V záložke Exports klikni pri téme WordPress na Save a ulož si ZIP. Vo WordPresse ho nahráš cez Vzhľad → Témy → Pridať novú → Nahrať tému. Téma je samostatná, stránky, formuláre, menu aj SEO fungujú bez pluginu.

Záložka Exports v appke html2wp so ZIP témou z návrhu Claude Design — Hotová téma, správa o konverzii a pôvodný projekt.

Úpravy klikaním pre klienta pridá editor Visual Edit. Ak pracuješ v termináli, rovnaký prevod opisuje návod s pluginom pre Claude Code a Codex.

Export z Claude Design: prevod návrhu do WordPressu v appke html2wp