Da Claude Design a WordPress: convertire un design di Claude in un tema

Che output ti ha dato Claude Design?

Claude crea due tipi di output, e ognuno segue una strada diversa. Controlla quale hai prima di iniziare, perché decide quanto dura la conversione.

Cosa ti ha dato Claude	Cos'è	Strada
Artifact HTML	Un file .html autonomo: codice, stili e script sono tutti al suo interno.	Questo articolo. È già HTML statico, esattamente l'input che serve al convertitore.
Artifact React	Un componente. La pagina compare solo dopo l'esecuzione del JavaScript, e l'HTML intorno è un elemento vuoto in cui si monta l'app.	La guida Lovable: lo stesso tipo di input, lo stesso passaggio in più.

Se non sei sicuro, apri il file e guarda dentro il <body>. Se lì vedi i tuoi titoli e paragrafi, hai un artifact HTML e sei nel posto giusto. Quando il body è un solo <div> vuoto più un tag script, hai l'altro tipo.

Esporta da Claude Design in una cartella, immagini comprese

L'input è sempre una cartella sul tuo disco. L'indirizzo di un sito online non è un input supportato, ed è una scelta voluta. Una copia di una pagina pubblicata conserva solo il risultato renderizzato e perde quello che sa il file sorgente.

Quindi esporta il design da Claude (scarica l'artifact), crea una cartella e salvaci il file come index.html. Se il design punta a immagini che non sono dentro il file, mettile accanto, negli stessi percorsi relativi che il codice si aspetta.

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

Una pagina o più?

Un artifact è una pagina, e un sito di una pagina si converte senza problemi. Diventa la homepage del tema. Se vuoi un sito con le pagine Chi siamo e Contatti, chiedi a Claude anche quelle e salva ognuna come file .html a sé nella stessa cartella. I nomi dei file contano: l'analisi li legge e capisce dal nome un file chiamato blog.html o about.html.

Se resti entro cinque file, l'intera conversione rientra nel piano gratuito.

Cosa serve al tuo computer per passare da Claude Design a WordPress

Anche la strada più breve gira sul tuo computer, e i requisiti non diminuiscono. Il browser e il WordPress temporaneo servono a controllare il risultato, non a produrlo:

• Node 20 o più recente e Python 3 con i pacchetti Playwright e Pillow.
• Docker con il comando docker compose. Avvia un WordPress temporaneo sul tuo computer, e il convertitore ci installa il tema prima che tu lo veda.
• php-cli, perché ogni file PHP passa un controllo di sintassi prima di entrare nello ZIP.
• jq, curl, bash e tar. Il WordPress di destinazione deve avere la versione 6.6 o successiva.

Il primo passaggio controlla tutto questo. Separa quello che può installare da solo nelle tue cartelle da quello che devi decidere tu. Docker non te lo installa, a meno che tu non lo chieda.

Avvia la conversione da Claude Design a 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

Poi, da qualsiasi cartella, scrivi:

/html2wp:html2wp

convert ./my-site

Il percorso della cartella è tutta l'istruzione. Non scrivi file di configurazione e non scegli un comando di build. In Codex scrivi convert ./my-site with html2wp. Se preferisci non lavorare nel terminale, puoi aprire la stessa cartella nell'app desktop html2wp (una guida con screenshot).

Flash richiede circa 30 minuti e Full circa un'ora, a seconda del numero di pagine e della velocità del tuo computer. Un artifact di una pagina sta verso il limite più breve, ma i controlli girano sempre per intero, per quanto piccolo sia l'input.

Cosa decide per te e cosa ti chiede

Prima di generare qualcosa, misura i tuoi file. Elenca le pagine e capisce quali parti del codice sono condivise e quali uniche. Trova anche i design token, tutto ciò che somiglia a un blog e quali pagine stanno da sole. Poi scrive cosa intende fare e converte secondo quel piano.

In un design generato capitano spesso due cose:

• Ogni variante del design viene mantenuta. Se le tue pagine non hanno lo stesso header, non ne sceglie uno vincente appiattendo gli altri. Crea invece una template part per ogni variante e collega ogni pagina a quella che usava davvero. Gli artifact di chat diverse con Claude spesso differiscono più di quanto ricordi.
• Le parentesi graffe nel testo sopravvivono. Il passaggio intermedio usa un formato simile a JSX. Senza accorgimenti, un esempio JSON o CSS nel tuo testo romperebbe la build o comparirebbe nella pagina come {. Il convertitore le gestisce, così sulla pagina le graffe restano graffe.

I gruppi ripetuti, per esempio card, testimonianze o FAQ, vengono salvati come collezioni invece che come markup fisso. Per questo poi puoi modificarli davvero, e non sembrano solo modificabili.

La revisione che non puoi saltare

Il convertitore mette ogni pagina in un'unica immagine accanto al suo originale, e tu le leggi tutte dall'alto in basso.

In una conversione mancava una sezione più in basso nella pagina, e il confronto dei pixel mostrava una differenza di appena lo 0,4%, quindi ha passato il controllo. Per loro natura, i controlli numerici non vedono tre tipi di difetto. Primo: un elemento interattivo che sembra perfetto ma non fa niente. Secondo: un valore fisso preso dall'unica pagina da cui è nato un template. Terzo: tutto ciò che compare solo dopo uno scroll, un clic o l'invio di un modulo.

Controlla anche se i contenuti si possono modificare. Una pagina può coincidere al pixel, e nessuno riesce comunque a modificarne le FAQ o la griglia delle funzioni da wp-admin. È successo, e l'ha scoperto questa revisione, non un controllo automatico.

Modifiche dopo la conversione in WordPress: tema, Visual Edit o page builder

Nella cartella arrivano due file: lo ZIP del tema e, accanto, CONVERSION-REPORT.md. Il report elenca cosa ha coperto la conversione, cosa ha trovato la revisione e cosa resta aperto. Installi il tema come qualsiasi altro tema WordPress (Aspetto → Temi → Aggiungi nuovo → Carica tema).

Il tema è autonomo. Pagine, blog, moduli, menu, SEO e redirect sono tutti codice suo. Non gli serve nessun plugin per funzionare e non comunica mai con il nostro server. Gli articoli del blog si scrivono nell'editor a blocchi, mentre il testo delle pagine resta nell'HTML. Per modificare le pagine senza codice ci sono due opzioni: Visual Edit e un page builder.

Un page builder è una buona scelta quando il design è solo un punto di partenza. È una cattiva scelta quando il design è ciò che consegni. Se converti perché il design generato sopravviva in WordPress, ricostruirlo come widget annulla il motivo per cui hai iniziato. Ma se qualcun altro rifarà il layout il prossimo trimestre, la sua esperienza con Elementor può valere più di un design fedele.

Lite o Pro, se scegli Visual Edit

La chat AI funziona con la tua chiave API. Non ti vendiamo token, e quello che costano lo regoli con il tuo provider.

Prezzo e cosa rifiuta la conversione

Gratis per tutti, senza chiave e senza registrazione: tre conversioni da cinque pagine ciascuna e cinque riesecuzioni in totale. Entrambi i numeri valgono per indirizzo IP, quindi un ufficio con un solo indirizzo ha un'unica quota. Il piano gratuito serve a provare lo strumento, per siti personali e lavori non commerciali.

Una licenza Pro toglie il limite di pagine e rende illimitate conversioni e riesecuzioni. Sblocca anche il passaggio che trasforma un negozio in WooCommerce. Quel passaggio non è mai gratuito: l'app rifiuta subito la conversione gratuita di un sito con un negozio, invece di farne metà. Puoi comprare Pro al mese o all'anno nella pagina dei prezzi, e durante la beta il primo pagamento ha il 30% di sconto.

Una riserva: questa è una beta. I controlli trovano la maggior parte delle differenze, non tutte. Per questo leggere ogni pagina accanto al suo originale fa parte del processo e non è una rifinitura facoltativa. Ed è anche il motivo per cui conviene convertire prima gratis qualcosa di tuo, e solo dopo fidarti.

Una guida passo passo all'intero processo è nella documentazione dell'app html2wp. Se il tuo artifact è React, quella strada la descrive la guida Lovable in WordPress.