Case study · IA e WordPress

Ho descritto una Home a parole. WordPress l’ha ricevuta in blocchi.

In un forum ho letto che, per alcuni, non esisterebbe un modo per andare da una richiesta in linguaggio naturale a una pagina scritta nativamente in blocchi WordPress. Questo articolo racconta come sia successo davvero, con il codice reale della Home di questo sito.

Vai dritto ai blocchi ↓ Vedi la Home live

Il punto di partenza

«Non esiste un’IA che scriva pagine in blocchi WordPress»

È l’argomento che ho letto in un forum frequentato da chi promuove una piattaforma concorrente di WordPress: secondo loro, nessuno strumento riesce ancora a partire da una descrizione in linguaggio naturale e arrivare a una pagina composta da blocchi nativi, editabili uno per uno come farebbe un umano nell’editor.

Invece di discuterne in astratto, ho preferito mostrare un caso reale: la Home di questo sito, rifatta due volte, nello stesso modo in cui l’ho chiesta e ottenuta io.

La richiesta

Cosa ho chiesto, in italiano

La vecchia Home raccoglieva tutti i contenuti dentro un’unica tab centrale: un contenitore per tutto, quindi niente che emergesse davvero. La richiesta di partenza, riassunta, è stata questa:

In sintesi

Togliere dalla Home i contenuti accumulati nella tab centrale e spostarli su pagine dedicate, separate.
Costruire una nuova Home snella, con una gerarchia chiara: apertura, problema, metodo di lavoro, perché funziona, domande frequenti, invito finale all’azione.
Un’unica azione da compiere, non dieci link in competizione tra loro.

Primo passaggio · prima chat

HTML e CSS pronti per un blocco Avanzato

Alla prima richiesta ho ottenuto una pagina completa: HTML semantico e CSS con classi dal prefisso univoco, pensata per essere incollata in un blocco «HTML personalizzato» (Avanzato) di Gutenberg. L’ho incollata, pubblicata, e ha funzionato al primo tentativo.

Home2-blocco-HTML-Advanced.html — estratto reale

.rshm-hero{background-color:#12181a;padding-top:110px;padding-bottom:100px;}
.rshm-hero .rshm-wrap{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:22px;max-width:760px;width:100%;}
.rshm-h1{color:#f5f7f4;font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:800;
  line-height:1.18;letter-spacing:-0.01em;margin:0;}
.rshm-cta{display:inline-block;background-color:#467C45;color:#ffffff;
  font-weight:700;padding:16px 38px;border-radius:8px;
  box-shadow:0 8px 24px rgba(70,124,69,0.35);}

Funzionante, ma dal punto di vista di Gutenberg era un unico blocco: tutta la Home viveva dentro una sola scatola di HTML.

Secondo passaggio · chat successiva

La stessa Home, questa volta in blocchi GreenShift nativi

Nella chat successiva ho chiesto la pagina identica, ma generata come blocchi Gutenberg nativi tramite GreenShift/GreenLight, così che nel backend comparissero blocchi veri — non un HTML incollato. Il risultato: un blocco Style Manager con tutte le classi CSS come stili locali, e un albero di blocchi greenshift-blocks/element che riproduce la stessa struttura, elemento per elemento.

Home3-blocchi-GreenShift.txt — estratto reale

<!-- wp:greenshift-blocks/element {"tag":"h1","className":"rshm-h1","type":"inner"} -->
<h1 class="rshm-h1">
  <!-- wp:greenshift-blocks/element {"textContent":"Il tuo sito non converte?","tag":"span"} -->
  <span>Il tuo sito non converte?</span>
  <!-- /wp:greenshift-blocks/element -->
  ...
</h1>
<!-- /wp:greenshift-blocks/element -->

Ogni titolo, paragrafo e bottone è un blocco Gutenberg a sé stante, selezionabile e modificabile singolarmente nell’editor visuale.

Il confronto

Perché il secondo passaggio conta di più

Blocco HTML Avanzato

Un solo blocco opaco: per cambiare qualcosa bisogna toccare il codice.
Nessun controllo visuale di GreenLight su ombre, bordi, animazioni.
Non spostabile né duplicabile sezione per sezione in Gutenberg.

Blocchi nativi GreenShift

Ogni sezione è un blocco reale: si seleziona, si sposta, si duplica.
Ombre, bordi, transizioni e animazioni si regolano dal pannello di GreenLight, senza codice.
Restano modificabili nel tempo da chiunque usi l’editor, non solo da chi ha scritto il CSS.

Sotto il cofano

Come si passa dal testo ai blocchi, nella pratica

Descrivo la pagina in italiano

Spiego a Claude obiettivo, gerarchia dei contenuti e tono della pagina — niente codice, solo linguaggio naturale.

Claude genera HTML e CSS puliti

Markup semantico, classi con prefisso univoco, seguendo le convenzioni richieste dal sistema di blocchi GreenShift.

Un convertitore trasforma l’HTML in blocchi

Lo script della skill GreenLight legge l’HTML e produce blocchi greenshift-blocks/element nativi, con il relativo Style Manager per le classi CSS.

La pagina viene pubblicata su WordPress

I blocchi vengono incollati nell’editor di codice di Gutenberg (o pubblicati via REST API): da quel momento sono blocchi come tutti gli altri, rifinibili a mano.

La risposta

Non è una teoria: è la Home di questo sito

Chi sostiene che non esista un percorso dal linguaggio naturale ai blocchi WordPress può semplicemente venire a controllare: la Home di questo sito è nata così, in due passaggi, nell’arco di due conversazioni. Il primo passaggio ha prodotto una pagina funzionante. Il secondo l’ha trasformata in blocchi Gutenberg nativi, oggi rifinibili visivamente — ombre, animazioni, micro-interazioni comprese — senza più scrivere una riga di codice.

Se vuoi vedere il codice a blocchi per intero, scrivimi: te lo mostro volentieri.

Vuoi vedere come si applica al tuo sito?

Scrivimi due righe: ti mostro il flusso completo, dal prompt alla pagina pubblicata.

Parliamone

Scrivere una pagina a partire dall’AI arrivando ai blocchi per WP