html2wp / Blog / Claude Design în WordPress
Din Claude Design în WordPress: cum convertești un design Claude
Dintre toate designurile generate, drumul din Claude Design în WordPress e cel mai scurt. Dacă Claude ți-a dat designul ca HTML, e exact intrarea pe care o vrea convertorul: fără build, fără un pas suplimentar în browser și fără framework. Singurul lucru de verificat e dacă un singur artifact e suficient pentru site-ul tău. Conversia rulează totuși pe propriul calculator, deci are nevoie de Docker, Node și Python. Lista e mai jos și e scurtă.
Publicat pe · actualizat pe · mai scurt decât drumul Lovable, fără pas de buildCe rezultat ți-a dat Claude Design?
Claude creează două tipuri de rezultat, iar fiecare merge pe alt drum. Verifică pe care îl ai înainte să începi, pentru că de el depinde cât durează conversia.
| Ce ți-a dat Claude | Ce este | Drumul |
|---|---|---|
| Artifact HTML |
Un fișier .html de sine stătător: codul, stilurile și scripturile sunt toate în el. |
Acest articol. E deja HTML static, exact intrarea de care are nevoie convertorul. |
| Artifact React |
O componentă. Pagina apare abia după rularea JavaScript-ului, iar HTML-ul din jurul ei e un element gol în care se montează aplicația. | Ghidul Lovable: același tip de intrare, același pas suplimentar. |
Dacă nu ești sigur, deschide fișierul și uită-te în <body>. Dacă vezi acolo titlurile și paragrafele tale, ai un artifact HTML și ești în locul potrivit. Când body-ul e un singur <div> gol plus un tag de script, ai celălalt tip.
De ce HTML e cazul mai ușor
Un proiect React trebuie întâi compilat și apoi deschis într-un browser real ca să existe ceva de convertit. Un artifact HTML sare peste acest pas. Codul e deja scris în fișier, iar fiecare pas următor citește din el.
Exportul din Claude Design într-un folder, cu imagini
Intrarea e mereu un folder pe discul tău. Adresa unui site live nu e o intrare acceptată, și asta intenționat. O copie a unei pagini publicate păstrează doar rezultatul randat și pierde ce știe fișierul sursă.
Așa că exportă designul din Claude (descarcă artifact-ul), creează un folder și salvează fișierul în el ca index.html. Dacă designul trimite la imagini care nu sunt în fișier, pune-le lângă el, în aceleași locuri relative pe care le așteaptă codul.
mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images # if the design uses any images
O pagină sau mai multe?
Un artifact e o pagină, iar un site de o pagină se convertește fără probleme. Devine pagina principală a temei. Dacă vrei un site cu paginile Despre și Contact, cere-i lui Claude și pe acestea și salvează-le pe fiecare ca fișier .html separat, în același folder. Numele fișierelor contează: analiza le citește și înțelege un fișier numit blog.html sau about.html după nume.
Dacă rămâi la cel mult cinci fișiere, toată conversia încape în planul gratuit.
De ce are nevoie calculatorul pentru conversia din Claude Design în WordPress
Și drumul mai scurt rulează pe calculatorul tău, iar cerințele nu se micșorează. Browserul și WordPress-ul temporar sunt acolo ca să verifice rezultatul, nu ca să îl producă:
- Node 20 sau mai nou și Python 3 cu pachetele Playwright și Pillow.
- Docker cu comanda
docker compose. Pornește un WordPress temporar pe calculatorul tău, iar convertorul instalează tema acolo înainte să o vezi. - php-cli, pentru că fiecare fișier PHP trece printr-o verificare de sintaxă înainte să intre în ZIP.
jq,curl,bashșitar. WordPress-ul țintă trebuie să fie versiunea 6.6 sau mai nouă.
Primul pas verifică toate acestea. El separă ce poate instala singur în propriile tale foldere de ce trebuie să decizi tu. Nu îți instalează Docker decât dacă îi ceri.
Docker nu e opțional, și asta îi surprinde cel mai mult pe oameni
Un convertor din browser nu are nevoie de el, pentru că sare peste acest pas. Aici tema generată intră într-un WordPress real, iar convertorul o testează acolo înainte să o vezi. Pentru asta e containerul. Dacă Docker nu rulează, conversia se oprește chiar la primul pas și îți spune imediat, nu la final.
Rulează conversia din Claude Design în WordPress
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
Apoi, de oriunde, scrie:
/html2wp:html2wp
convert ./my-site
Calea folderului e toată instrucțiunea. Nu scrii niciun fișier de configurare și nu alegi o comandă de build. În Codex, scrie convert ./my-site with html2wp. Dacă preferi să nu lucrezi în terminal, poți deschide același folder în aplicația desktop html2wp (un ghid cu capturi de ecran).
Flash durează cam 30 de minute, iar Full cam o oră, în funcție de numărul de pagini și de cât de rapid e calculatorul tău. Un artifact de o pagină stă la capătul scurt, dar verificările rulează mereu complet, oricât de mică ar fi intrarea.
Ce decide în locul tău și ce te întreabă
Înainte să genereze ceva, îți măsoară fișierele. Listează paginile și stabilește ce părți din cod sunt comune și care sunt unice. Găsește și tokenii de design, tot ce seamănă cu un blog și paginile care stau singure. Apoi notează ce plănuiește să facă și convertește după acel plan.
Un design generat se lovește des de două lucruri:
- Fiecare variantă de design se păstrează. Dacă paginile tale nu au același header, convertorul nu alege un câștigător ca să le aplatizeze pe celelalte. Creează în schimb câte un template part pentru fiecare variantă și leagă fiecare pagină de cea pe care a folosit-o de fapt. Artifact-urile din chaturi Claude diferite diferă adesea mai mult decât îți amintești.
- Acoladele din text supraviețuiesc. Pasul intermediar folosește un format asemănător cu JSX. Altfel, un exemplu JSON sau CSS din textul tău ar strica build-ul sau ar apărea pe pagină ca
{. Convertorul le tratează, deci acoladele rămân acolade pe pagină.
Grupurile care se repetă, de exemplu carduri, testimoniale sau un FAQ, se salvează ca colecții, nu ca markup scris direct în cod. Datorită acestui lucru le poți edita cu adevărat mai târziu, nu doar par editabile.
Revizuirea pe care nu o poți sări
Convertorul pune fiecare pagină într-o imagine lângă originalul ei, iar tu le citești pe toate de sus până jos.
Într-o conversie lipsea o secțiune mai jos pe pagină, iar comparația pe pixeli arăta o diferență de doar 0,4%, așa că a trecut verificarea. Prin natura lor, verificările numerice nu văd trei tipuri de defecte. Primul e un control care arată perfect, dar nu face nimic. Al doilea e o valoare scrisă direct în cod, preluată din singura pagină din care provine un template. Al treilea e orice apare doar după ce derulezi, dai clic sau trimiți un formular.
Verifică și dacă poți edita conținutul. O pagină poate corespunde la pixel, dar nimeni nu poate edita FAQ-ul sau grila de funcții din wp-admin. S-a întâmplat, iar această revizuire a prins problema, nu o verificare automată.
Editarea după conversia din Claude Design în WordPress: temă, Visual Edit sau page builder
În folderul tău ajung două fișiere: ZIP-ul temei și, lângă el, CONVERSION-REPORT.md. Raportul listează ce a acoperit conversia, ce a găsit revizuirea și ce mai e deschis. Instalezi tema ca pe orice temă WordPress (Aspect → Teme → Adaugă temă nouă → Încarcă tema).
Tema e de sine stătătoare. Paginile, blogul, formularele, meniurile, SEO și redirecționările sunt toate propriul ei cod. Nu are nevoie de niciun plugin ca să ruleze și nu vorbește niciodată cu serverul nostru. Articolele de blog se scriu în editorul de blocuri, iar textul paginilor rămâne în HTML. Ca să editezi paginile fără cod, există două opțiuni: Visual Edit și un page builder.
| Drumul | Ce primești | Ce te costă |
|---|---|---|
| Doar tema | Codul tău, neschimbat, fără nimic instalat deasupra. Nimic de reînnoit, nimic care să se strice la actualizarea altcuiva. | Fără plugin, textul paginilor se schimbă în HTML. Dacă clientul vrea să-l editeze singur, o face cu Visual Edit (Lite e gratuit). |
| Visual Edit, pluginul nostru | Dai clic pe un titlu de pe pagină, scrii peste el și salvezi. Editezi texte, imagini, linkuri, formulare și meniuri acolo unde sunt, iar codul rămâne cum era. Lite e gratuit și nu are nevoie de cheie de licență. | Încă un plugin instalat. Lite păstrează 10 pași de istoric și nu are chat AI. Pro le adaugă pe amândouă și costă 59 € pe an. |
| Elementor sau alt page builder |
Un spațiu de lucru cunoscut pentru oricine îl folosește deja și un client care poate reface o pagină fără tine. | Codul e reconstruit ca widgeturi ale builderului. Nu mai e designul făcut de Claude. Apoi site-ul nu se mai poate afișa fără Elementor, iar tu moștenești structura, CSS-ul și actualizările lui. |
Un page builder e o alegere bună când designul e doar un punct de plecare. E una proastă când designul e chiar ce livrezi. Dacă faci conversia ca designul generat să supraviețuiască în WordPress, reconstruirea lui din widgeturi anulează motivul pentru care ai început. Dar dacă altcineva va reface layoutul trimestrul viitor, experiența lui cu Elementor poate valora mai mult decât un design fidel.
Lite sau Pro, dacă alegi Visual Edit
| Lite (gratuit) | Pro | |
|---|---|---|
| Editarea conținutului prin clic | ✓ | ✓ |
| Formulare, meniuri, câmpuri SEO | ✓ | ✓ |
| Editare prin chat AI | – | ✓, cu propria cheie API |
| Exportul temei | – | ✓ |
| Protecția formularelor cu Turnstile | – | ✓ |
| Editarea imaginilor cu AI și animații din imagini | – | ✓ |
| Istoricul editărilor | 10 pași | 300 de pași |
Chatul AI rulează pe propria ta cheie API. Nu îți vindem tokeni, iar costul lor îl reglezi cu furnizorul tău.
Prețul și ce refuză conversia
Gratuit pentru toți, fără cheie și fără înregistrare: trei conversii de câte cinci pagini și cinci rerulări în total. Ambele cifre se numără per adresă IP, deci un birou cu o singură adresă primește o singură alocare. Planul gratuit e pentru încercarea uneltei, site-uri personale și lucrări necomerciale.
O licență Pro elimină limita de pagini și face conversiile și rerulările nelimitate. Deblochează și pasul care transformă un magazin în WooCommerce. Acest pas nu e niciodată gratuit: aplicația refuză complet o conversie gratuită a unui site cu magazin, în loc să facă doar jumătate din ea. Pro îl cumperi lunar sau anual pe pagina de prețuri, iar cât durează beta prima plată are 30% reducere.
O rezervă: e o versiune beta. Verificările prind majoritatea diferențelor, nu pe toate. De aceea citirea fiecărei pagini lângă original face parte din proces și nu e o finisare opțională. Tot de aceea ar trebui să convertești întâi ceva al tău, gratuit, și abia apoi să ai încredere.
Un ghid pas cu pas pentru tot procesul găsești în documentația aplicației html2wp. Dacă artifact-ul tău e React, ghidul despre conversia din Lovable în WordPress descrie acel drum.