Z Claude Design do WordPressu: ako previesť návrh na WordPress tému

Aký výstup ti dal Claude Design?

Claude vytvára dva druhy výstupu a každý ide inou cestou. Over si to skôr, ako začneš, lebo od toho závisí, ako dlho konverzia potrvá.

Čo ti Claude dal	Čo to je	Cesta
HTML artefakt	Samostatný súbor .html: kód, štýly aj skripty sú priamo v ňom.	Tento článok. Už je to ploché HTML, teda presne požadovaný vstup.
React artefakt	Komponent. Stránka vznikne až po spustení JavaScriptu a HTML okolo je prázdny prvok na pripojenie.	Návod pre Lovable: rovnaký druh vstupu, rovnaký krok navyše.

Ak si nie si istý, otvor súbor a pozri sa do <body>. Ak tam vidíš svoje nadpisy a odseky, máš HTML artefakt a si na správnom mieste. Keď je telo jeden prázdny <div> a značka skriptu, máš ten druhý.

Export z Claude Design do priečinka, aj s obrázkami

Vstupom je vždy priečinok na tvojom disku. Adresa živého webu nie je podporovaný vstup, a to zámerne. Kópia zverejnenej stránky zachová len vykreslený výsledok a stratí to, čo vie zdrojový súbor.

Návrh z Claude preto exportuj (stiahni artefakt), 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 vedľa neho na rovnaké relatívne miesta, aké kód očakáva.

mkdir moj-web && cd moj-web
mv ~/Downloads/artifact.html index.html
mkdir -p images        # ak návrh nejaké obrázky používa

Jedna stránka, alebo viac?

Jeden artefakt je jedna stránka a jednostránkový web sa prevedie bez problémov. Stane sa z neho úvodná stránka témy. Ak chceš web so stránkami O nás a Kontakt, popros Claude aj o ne a každú ulož ako samostatný súbor .html do toho istého priečinka. Na názvoch súborov záleží: analýza ich číta a súbor blog.html alebo about.html pochopí podľa názvu.

Ak ostaneš pri piatich súboroch alebo menej, celý prevod sa zmestí do bezplatnej verzie.

Čo potrebuje počítač na prevod Claude Design do WordPressu

Aj kratšia cesta beží u teba a požiadavky sa nezmenšia. Prehliadač a dočasný WordPress slúžia na kontrolu výsledku, nie na jeho výrobu:

• Node 20 alebo novší a Python 3 s balíkmi Playwright a Pillow.
• Docker s príkazom docker compose. Na tvojom počítači sa spustí dočasný WordPress a téma sa doň nainštaluje skôr, ako ju uvidíš.
• php-cli, lebo každý PHP súbor prejde kontrolou syntaxe pred zabalením do ZIP.
• jq, curl, bash a tar. Cieľový WordPress vo verzii 6.6 alebo novšej.

Prvý krok to všetko overí. Oddelí to, čo vie nainštalovať sám vo tvojich priečinkoch, od toho, o čom musíš rozhodnúť ty. Docker za teba nenainštaluje, keď si oň nepožiadal.

Spusti prevod 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

Potom odkiaľkoľvek napíš:

/html2wp:html2wp

convert ./moj-web

Cesta k priečinku je celé zadanie. Nepíšeš konfiguračný súbor a nevyberáš príkaz na zostavenie. V Codexe napíš convert ./moj-web with html2wp. Ak nechceš pracovať v termináli, ten istý priečinok otvoríš aj v desktopovej appke html2wp (návod so snímkami obrazovky).

Flash trvá zhruba pol hodiny, Full zhruba hodinu, podľa počtu stránok a výkonu tvojho počítača. Jednostránkový artefakt je na kratšom konci, no kontroly bežia celé bez ohľadu na veľkosť vstupu.

Čo rozhodne za teba a na čo sa spýta

Skôr ako niečo vygeneruje, zmeria tvoje súbory. Spíše stránky, zistí, ktoré časti kódu sú spoločné a ktoré jedinečné, aké sú dizajnové tokeny, čo vyzerá ako blog a ktoré stránky sú samostatné. Potom zapíše, čo chce urobiť, a podľa toho prevádza.

Vygenerovaný dizajn často narazí na dve veci:

• Každá varianta dizajnu sa zachová. Ak tvoje stránky nemajú rovnakú hlavičku, nevyberie víťaza a ostatné nezarovná. Pre každú variantu vytvorí časť šablóny a každú stránku napojí na tú, ktorú naozaj používala. Artefakty z rôznych konverzácií sa často líšia viac, než si pamätáš.
• Zložené zátvorky v texte prežijú. Medzikrok používa formát podobný JSX. Ukážka JSON alebo CSS v texte by inak pokazila zostavenie alebo by sa na stránke ukázala ako {. Konvertor ich ošetrí, takže na stránke zostanú zátvorky.

Opakujúce sa skupiny, napríklad karty, referencie či FAQ, sa uložia ako kolekcie, nie natvrdo v kóde. Vďaka tomu sa dajú neskôr naozaj upravovať a nielen tak vyzerajú.

Kontrola, ktorú nevynecháš

Každá stránka sa zloží do jedného obrázka vedľa originálu a ty si každý prečítaš zhora nadol.

V jednej konverzii chýbala sekcia nižšie na stránke a pixelové porovnanie ukázalo rozdiel len 0,4 %, takže kontrolou prešla. Tri druhy chýb číselné kontroly zo svojej podstaty nevidia. Prvý je ovládací prvok, ktorý vyzerá dokonale a nič nerobí. Druhý je hodnota natvrdo prevzatá z jedinej stránky, z ktorej vznikla šablóna. Tretí je čokoľvek, čo sa ukáže až po scrollovaní, kliknutí alebo odoslaní formulára.

Kontroluj aj to, či sa dá obsah upravovať. Stránka môže sedieť na pixel a jej FAQ či mriežku funkcií aj tak nikto z wp-admin neupraví. Stalo sa to a odhalila to práve táto kontrola, žiadna automatická.

Úpravy po prevode z Claude Design: téma, Visual Edit alebo page builder

Do priečinka pribudnú dva súbory: ZIP s témou a vedľa neho CONVERSION-REPORT.md. V reporte je, čo sa previedlo, čo našla kontrola a čo ešte zostáva. Inštaluješ bežnú WordPress tému (Vzhľad → Témy → Pridať novú → Nahrať tému).

Téma je samostatná. Stránky, blog, formuláre, menu, SEO aj presmerovania sú jej vlastný kód. Na beh nepotrebuje plugin a s naším serverom nekomunikuje. Články blogu píšeš v blokovom editore, text stránok ostáva v HTML. Na úpravu stránok bez kódu sú dve možnosti: Visual Edit a page builder.

Page builder je dobrá voľba, keď je dizajn len začiatok. Zlá je, keď je dizajn to, čo odovzdávaš. Ak prevádzaš preto, aby vygenerovaný dizajn prežil vo WordPresse, prestavba na widgety zruší dôvod, prečo si začal. Ak rozloženie o štvrť roka prerobí niekto iný, jeho skúsenosť s Elementorom môže mať väčšiu cenu ako vernosť dizajnu.

Lite alebo Pro, ak si vyberieš Visual Edit

AI chat beží na tvojom vlastnom API kľúči. Tokeny ti nepredávame a cenu za ich použitie riešiš so svojím poskytovateľom.

Cena a čo konverzia odmietne

Zadarmo pre každého, bez kľúča a registrácie: tri konverzie po piatich stránkach a päť opakovaných spustení spolu. Obe čísla sa rátajú na IP adresu, takže kancelária s jednou adresou má jeden limit. Bezplatná verzia je na vyskúšanie, osobné weby a nekomerčnú prácu.

Licencia Pro ruší limit stránok, konverzie aj opakované spustenia sú neobmedzené. Odomkne aj krok, ktorý z obchodu urobí WooCommerce. Ten zadarmo nie je: bezplatnú konverziu webu s obchodom appka odmietne celú, nie napoly. Pro nájdeš na stránke s cenami, mesačne alebo ročne, počas bety s 30 % zľavou na prvú platbu.

Jedna výhrada: ide o betu. Kontroly zachytia väčšinu odchýlok, nie všetky. Preto je čítanie každej stránky vedľa originálu súčasťou procesu, nie voliteľné doladenie. A preto je lepšie, keď si najprv zadarmo prevedieš niečo vlastné a až potom tomu uveríš.

Celý postup krok za krokom je v slovenskej dokumentácii. Ak je tvoj artefakt v Reacte, cestu opisuje návod z Lovable do WordPressu.