Design sito web con IA: cinque gate prima della consegna

Il design sito web con IA produce oggi una homepage credibile nel tempo di versare un caffè. La velocità è reale, ed è anche la trappola. Una pagina generata sembra finita molto prima di esserlo, e le parti incompiute (contrasto, ordine dei titoli, layout speculari, disciplina dei token) sono proprio quelle che il cliente scopre tre settimane dopo il lancio. Ecco la sequenza che usiamo per tenere la velocità ed eliminare le sorprese: cinque gate, in ordine, ognuno con un criterio chiaro di superamento o di fallimento.

Perché una pagina generata sembra già finita?

Perché il modello ottimizza per ciò che mostra uno screenshot: hero, tre card con le funzionalità, una fila di testimonianze, un footer. Ognuno di questi elementi è statisticamente familiare, quindi l'intera pagina appare professionale a colpo d'occhio. Ciò che uno screenshot non mostra, però, è ciò che decide se il sito regge la consegna al cliente.

Prendiamo l'accessibilità. Il WebAIM Million 2026 ha rilevato errori WCAG 2 nel 95.9% delle home page dei siti più visitati al mondo, e testo a basso contrasto nell'83.9% di esse. Un modello addestrato su quel web riproduce quel web. Ti consegnerà una didascalia grigio chiaro su fondo crema con assoluta sicurezza.

Il secondo problema invisibile riguarda il punto in cui vivono le decisioni di design. Una pagina generata tende a portare colori, dimensioni e spaziature come valori letterali sparsi nel markup. Se il prossimo trimestre cambi il blu del brand, ti ritrovi a cercare in quaranta blocchi. È un costo di manutenzione, e a pagarlo è il freelance, non il modello.

Quindi la domanda utile non è «l'IA può progettare questo sito?». Può produrre una bozza. La domanda utile è «quali decisioni lascio prendere al modello, e dove controllo il suo lavoro?». I cinque gate rispondono a questo.

Gate uno: scrivi il brief prima di aprire lo strumento

Gran parte dell'output deludente nasce da un prompt di una riga. «Un sito per una panetteria a Casablanca» dà al modello il permesso di inventare tutto: pubblico, tono, elenco delle pagine, call to action. E li inventerà a partire dalla media di tutti i siti di panetterie che ha visto.

Un brief che funziona sta in mezza pagina. Chi visita il sito e che cosa vuole fare nei primi dieci secondi. Le tre pagine che devono esistere. L'unica azione per cui il sito esiste (prenotare, chiamare, ordinare). Due siti che il cliente ammira e uno che detesta. Le lingue, compresa la direzione di scrittura: se il sito uscirà in arabo o in ebraico, dillo adesso, non dopo che il layout è stato approvato.

Quest'ultimo punto conta più di quanto sembri. Il right-to-left è una proprietà del layout, non un compito di traduzione, e un modello a cui non dici nulla produrrà un design allineato a sinistra con dell'arabo incollato sopra. Inserire la direzione nel brief cambia i layout che lo strumento propone. Costa una frase.

Lascia perdere gli aggettivi «moderno e pulito». Non portano informazione. «Denso ed editoriale, come la prima pagina di un quotidiano» ne porta molta.

Gate due: chiedi direzioni, mai pagine

L'uso meno costoso dell'IA in tutto questo lavoro è l'esplorazione. Chiedi da tre a cinque direzioni distinte, come layout di massima e abbinamenti di caratteri, poi scegli prima di costruire qualsiasi cosa. Sei schizzi costano pochi minuti. Rifare una pagina che il cliente ha respinto costa un pomeriggio.

La disciplina sta nel tenerli economici. Non lasciare che lo strumento renda pagine complete con fotografie generate per ogni direzione: i clienti si innamorano delle foto e poi non riescono a separare il layout dalle immagini. Riquadri grigi e titoli veri bastano. Se il cliente non riesce a scegliere tra tre layout a riquadri grigi, il problema era il brief, e l'hai scoperto gratis.

Qui la categoria dello strumento conta, ed è giusto essere diretti. I generatori di siti completi come 10Web costruiscono un intero sito WordPress a partire da un prompt, da un URL o da un file Figma, con piani che partono da 10 dollari al mese, fatturati annualmente per un solo sito. I builder ospitati come Durable portano da poche risposte a un sito per piccole attività finito in circa mezzo minuto. Entrambi sono ottimi per il gate due e deboli per il gate quattro, perché possiedono le decisioni di design invece di esporle. Usali per vedere le opzioni. Diffida dall'usarli come build finale di un sito che manterrai per anni.

Gate tre: fissa il design in theme.json prima di costruire

È il gate che la maggior parte dei workflow salta, ed è quello che separa un sito che puoi manutenere da un sito che sai solo mostrare. Una volta scelta la direzione, trasforma le sue decisioni in token e scrivile in theme.json: la palette colori, le famiglie e le dimensioni dei font, la scala delle spaziature, la larghezza del contenuto. Da lì in avanti ogni blocco fa riferimento a un token tramite il suo slug, mai a un valore letterale.

La documentazione di theme.json serve esattamente a questo. Dà a un block theme un unico punto in cui dichiarare palette e scale, che l'editor poi offre come controlli. Quando cambia il blu del brand, cambi una riga. Quando il cliente apre il Site Editor, sceglie dalla tua palette invece di una ruota colori libera, e questo evita in silenzio un'intera categoria di modifiche fuori brand.

Qui l'IA si guadagna il posto in un altro modo. Dalle la direzione scelta e chiedile un set di token, poi verificalo con due regole. Ogni coppia di testo e sfondo deve raggiungere 4.5:1 per il testo normale (la soglia AA del WCAG), quindi calcola tu i rapporti invece di fidarti dell'affermazione del modello. E la scala deve restare piccola: cinque o sei passi di spaziatura, una scala tipografica di sei misure. I modelli amano restituirti quattordici grigi quasi identici. Eliminane undici.

Un test pratico per capire se questo gate ha tenuto: apri il tema finito e cerca un codice esadecimale in un qualsiasi template. Se ne trovi uno, una decisione è sfuggita al sistema.

Gate quattro: costruisci con blocchi nativi e tieni il generatore fuori dal ciclo

Adesso si costruisce. La struttura proposta dal modello di solito vale la pena conservarla: l'ordine delle sezioni, la logica delle colonne, il ritmo tra aree dense e aree aperte. Il markup prodotto di solito no. Ricostruisci la struttura approvata con i blocchi core (Gruppo, Colonne, Copertina, Query Loop) usando i tuoi token, e tratta l'output generato come un disegno di riferimento, non come un file sorgente.

Sembra più lento. Nella nostra esperienza, però, dalla seconda pagina diventa più veloce, perché i blocchi nativi ereditano i token, rispondono al Site Editor e si comportano bene quando il cliente li modifica. Il markup generato che incorpora lo stile direttamente lotta contro tutto questo. I page builder stanno all'altro capo dello stesso compromesso. Divi, ricostruito come Divi 5 a febbraio 2026, include Divi AI nel piano Pro a 277 dollari all'anno, e l'output resta dentro il sistema di moduli di Divi. È una scelta legittima per un'agenzia che ha standardizzato su Divi. È però un prodotto diverso da un block theme, con un costo di uscita diverso, e quel costo di uscita va messo nel preventivo.

Dove la generazione con IA trova ancora spazio dentro la build è lo strato ripetitivo: una variante di una sezione prezzi, testi segnaposto simili a quelli veri, disposizioni alternative dell'hero che il cliente possa confrontare. Trattale ciascuna come un pattern in bozza da sistemare e registrare, mai come lavoro finito.

Un limite onesto: se il progetto richiede vera interattività (archivi filtrati, logiche di query personalizzate, qualsiasi comportamento in JavaScript), nessun generatore la regge. Quella parte la scrive uno sviluppatore, e il contributo dell'IA resta ai margini.

Gate cinque: verifica ciò che uno screenshot non mostra

Esegui lo stesso audit breve su ogni sito, sempre nello stesso ordine, così diventa un'abitudine e non un umore del momento.

Primo, il contrasto. Controlla le coppie realmente renderizzate, incluso il testo sopra le immagini e gli stati disabilitato e hover che il modello non ha considerato. Secondo, la struttura dei titoli: un solo H1, titoli che scendono senza saltare livelli, e nessun titolo scelto solo perché è grande. Terzo, la tastiera: naviga con Tab in tutta la pagina e verifica che il focus sia visibile e che l'ordine segua l'ordine di lettura. Quarto, il testo alternativo di ogni immagine che porta significato, e alt vuoto per quelle che non lo portano.

Il quinto controllo è quello che distingue noonwp da una checklist generica: la direzione. Se il sito ha una versione in arabo o in ebraico, guardala in right-to-left e cerca ciò che non si è specchiato. Icone che puntano dalla parte sbagliata, un'immagine hero il cui soggetto principale ora sta contro il testo, padding scritto come margin-left invece di una proprietà logica come margin-inline-start. Sono correzioni economiche se le trovi a questo gate, e imbarazzanti se le trovi nello screenshot di un cliente.

Conserva le prove dell'audit: una coppia prima e dopo per pagina, una nota su ciò che è fallito, una nota su ciò che hai cambiato. Trasforma «realizzato con l'IA» da affermazione vaga in un deliverable, ed è il paragrafo del tuo documento di consegna che giustifica la tua parcella davanti a un cliente che la settimana scorsa ha provato da solo un generatore.

E i costruttori di siti con un solo prompt?

Hanno un posto, ed è un posto stretto. Un builder a prompt singolo è un buon modo per produrre un prototipo usa e getta per una presentazione, una landing per un evento di fine settimana, o un punto di partenza visivo per un cliente che non sa descrivere ciò che vuole. Framer unisce un generatore di siti IA a una tela libera e a un piano gratuito, il che lo rende adatto proprio a questo tipo di lavoro visivo rapido e usa e getta, e il suo piano Basic parte da 10 dollari al mese.

Evitali quando il sito deve vivere su WordPress, deve essere modificato da un cliente non tecnico, o deve servire un pubblico right-to-left, perché finirai comunque per ricostruire l'output con i blocchi. Il prototipo valeva comunque la pena; la pagina non valeva la pena di essere pubblicata. Capire quale delle due cose hai in mano è ciò che fa risparmiare più tempo di tutto il resto.

Cosa provare nel tuo prossimo brief

Scegli un progetto reale in corso e applica solo il gate uno e il gate tre. Scrivi il brief di mezza pagina, poi fissa palette e scale scelte in theme.json prima che esista una sola pagina. Cronometra il lavoro e confrontalo con il tempo che il tuo ultimo sito ha impiegato per arrivare a un design stabile. Se il risultato regge, aggiungi gli altri tre gate uno alla volta. Quale gate ti avrebbe risparmiato più guai sull'ultimo sito che hai consegnato?