Come l'IA genera un sito WordPress completo in 2 minuti

Ogni volta che qualcuno digita la descrizione di un'attività in PAGEnza e preme genera, accade qualcosa di piuttosto complesso in background, in circa 90 secondi. Questo post spiega esattamente di cosa si tratta.

Il problema dei template

La maggior parte dei generatori di siti web basati sull'IA funziona in questo modo: scelgono un template, sostituiscono il tuo testo e lo definiscono "generato dall'IA". Il risultato assomiglia a ogni altro sito creato su quella piattaforma.

PAGEnza funziona in modo diverso. Non ci sono template. Ogni sito parte da una tela Gutenberg vuota e viene costruito algoritmicamente da un insieme di regole di progettazione che chiamiamo Direttiva di Progettazione.

Cos'è la Direttiva di Progettazione?

La Direttiva di Progettazione è un prompt strutturato, di circa 8.000 token, che descrive ogni decisione visiva e strutturale per un sito specifico. Viene creato in Python prima di qualsiasi chiamata all'IA, in base al tuo input.

Contiene sei parti:

Parte A — Identità del Brand: settore, nome dell'attività, tono (ad es. "professionale" vs "giocoso"), pubblico di destinazione.

Parte B — Sistema di Colori: una palette di 4 colori (ink, bg1, bg2, accent) generata algoritmicamente e validata rispetto alle regole di contrasto WCAG AA. Ogni palette viene controllata con la matematica della luminanza reale, non con ipotesi.

Parte C — Tipografia: un trio di font (titolo / corpo / accento) scelto tra oltre 80 Google Fonts, filtrato per archetipo di settore e verificato per includere il supporto per caratteri latin-ext.

Parte D — Blueprint del Layout: la struttura della pagina: quali sezioni appaiono, in quale ordine e con quale variante (ad es. eroe con immagine a larghezza intera vs eroe con layout diviso).

Parte E — Vincoli di Progettazione: stile del raggio del bordo (sharp / soft / rounded), forme dei divisori di sezione, trattamento delle immagini, sistema di spaziatura.

Parte F — Regole di Contenuto: quale testo va dove, come sono strutturati i titoli, quali CTA appaiono.

Come vengono generate le palette

Il colore è dove la maggior parte degli strumenti IA fallisce. Chiedere a un LLM di scegliere i colori ti fornisce codici esadecimali casuali che potrebbero sembrare a posto isolatamente ma fallire i test di accessibilità o semplicemente apparire generici.

Adottiamo un approccio diverso. Il nostro sistema di palette funziona così:

1. In base al tuo settore e archetipo (ad es. "lusso", "audace", "terroso"), selezioniamo tra 20 gruppi di palette pre-auditati
2. All'interno di ogni gruppo, scegliamo una palette in cui ink ha un contrasto ≥4,5:1 rispetto a tutti gli sfondi
3. Verifichiamo che accent abbia un contrasto ≥3,0:1 rispetto a bg1 e bg2
4. Ci assicuriamo che i due colori di sfondo abbiano temperature di colore contrastanti (una calda, una fredda) in modo che le sezioni risultino distinte

Se una palette fallisce un controllo, viene sostituita automaticamente. Nessun coinvolgimento dell'LLM in questo passaggio: è pura matematica.

Come vengono assemblati i blocchi Gutenberg

Una volta pronta la Direttiva di Progettazione, viene inviata a Gemini Flash con un prompt rigoroso che specifica:

• Quali blocchi sono consentiti (una whitelist di circa 40 tipi di blocchi Gutenberg)
• Attributi richiesti per ogni tipo di blocco
• Formato JSON esatto per l'output

L'IA restituisce JSON grezzo di blocchi Gutenberg, non HTML, non React, markup di blocchi WP effettivo. Quel JSON passa quindi attraverso diverse fasi di validazione:

1. Validazione dello schema: attributi richiesti presenti, nessun tipo di blocco sconosciuto
2. Sanificazione delle classi CSS: i nomi delle classi inventati vengono rimossi e sostituiti con le nostre classi del sistema di progettazione
3. Passaggi di correzione: attributi di spaziatura sincronizzati, gradienti dei blocchi di copertina normalizzati, divisori di forma iniettati

Il risultato viene caricato direttamente su WordPress tramite WP REST API e attivato come homepage del sito.

Cosa rende unico ogni sito

Diverse cose variano tra ogni generazione, anche per lo stesso settore:

• Palette: 20+ gruppi, ognuno con più palette
• Trio di font: 6+ combinazioni per archetipo
• Ordine e varianti delle sezioni: layout dell'eroe, stile delle statistiche, disposizione delle schede delle funzionalità
• Divisori di forma: organici vs geometrici, variazioni di ampiezza/frequenza
• Forme blob: per settori organici, i blob di immagini e schede vengono randomizzati tra 12 varianti

Il risultato è che due pizzerie generate nello stesso giorno avranno colori diversi, font diversi, layout diversi e saranno entrambe conformi a WCAG AA.

Cosa c'è dopo

Attualmente stiamo lavorando su:

• Generazione multipagina: generazione delle pagine /about, /services e /contact dalla stessa direttiva
• Anteprima live: visualizzazione del sito prima che venga distribuito su WordPress
• Trasferimento di stile: caricamento di uno screenshot di un sito che ti piace ed estrazione del suo DNA di progettazione

Se vuoi vedere il sistema in azione, il generatore è gratuito da provare, non è richiesto alcun account per il primo sito.