Come scrivere un prompt per far progettare un sito web all'AI

Chiedere a un modello linguistico di costruire un sito web è ormai semplice. Il risultato, però, dipende quasi interamente da quanto è chiara la richiesta.

Un prompt vago come "fammi un bel sito per il mio ristorante" produce quasi sempre una pagina generica, con sezioni scelte a caso e uno stile che non somiglia a nessun brand reale. Un brief strutturato, invece, lascia al modello meno spazio per indovinare e riduce i cicli di revisione.

Chi agisce: il ruolo come punto di partenza

Il primo elemento è il ruolo. Assegnare a Claude un'identità professionale precisa, per esempio quella di un senior web developer esperto di UX/UI, orienta tono, priorità e livello tecnico della risposta. La documentazione ufficiale di Anthropic osserva che anche una sola frase dedicata al ruolo influisce sul comportamento del modello. Il ruolo, però, dice al modello come ragionare, non cosa costruire. Va quindi affiancato da un obiettivo concreto: "crea la struttura di un sito web per un ristorante di lusso a Milano" definisce il prodotto da realizzare.

Per chi è il sito: pubblico e obiettivo

La descrizione del pubblico è la parte più trascurata. Un sito rivolto a professionisti di fascia alta appassionati di fine dining richiede una tipografia sobria, tempi di caricamento rapidi, un linguaggio misurato e una prenotazione raggiungibile in pochi passaggi. Una trattoria di quartiere ha esigenze diverse. Il prompt dovrebbe dire chi naviga il sito, che cosa cerca e quale azione deve compiere: prenotare, consultare il menu, capire la filosofia del locale. Senza queste informazioni il modello sceglie un pubblico medio, e il risultato non convince nessuno.

Mappa del sito: pagine e componenti

Qui il prompt diventa operativo. Elencare esplicitamente le pagine impedisce al modello di inventarne di superflue o di dimenticarne di essenziali. Ogni pagina dovrebbe avere uno scopo e i contenuti principali: una homepage con sezione hero e recensioni, una pagina menu interattiva, una pagina "Chi siamo", un modulo di prenotazione. Le guide sullo sviluppo web con l'AI insistono su questo passaggio, perché definire l'architettura prima permette di generare tutte le pagine con navigazione e nomenclatura coerenti. Conviene anche dichiarare ciò che non deve comparire, come un carrello e-commerce o un blog, quando non servono.

Stack e stile visivo: il come

La terza parte stabilisce linguaggi, framework e linee guida di design. Indicare lo stack, per esempio HTML5, Tailwind CSS e JavaScript moderno, evita che il modello proponga tecnologie incompatibili con il progetto. Lo stesso vale per lo stile: un'indicazione come "minimalista, con colori scuri ed elementi dorati" è molto più utile di "elegante", che può significare tutto. Una buona descrizione stilistica include palette, tipografia, spaziature e comportamento su mobile. Le guide dedicate allo sviluppo web sottolineano un rischio concreto: senza indicazioni su stack e convenzioni, il codice generato può non rispettare le regole di linting del progetto o i requisiti di accessibilità.

Output e vincoli: che cosa consegnare e che cosa evitare

L'ultima sezione definisce il formato della risposta e le regole da rispettare. Chiedere il codice suddiviso in file separati e commentati rende il risultato utilizzabile subito. La responsività va dichiarata esplicitamente, così come l'accessibilità: contrasto adeguato, gerarchia coerente dei titoli, testi alternativi per le immagini, navigazione da tastiera.

Sul modo di formulare i vincoli, la documentazione di Anthropic suggerisce di indicare che cosa fare invece di che cosa evitare. "Scrivi in paragrafi di prosa scorrevole" funziona meglio di "non usare il markdown". Per separare istruzioni, contesto e dati, possono aiutare i tag XML: quando il prompt è lungo e misto, il modello li interpreta in modo più univoco.

Un esempio di struttura

Ecco come possono apparire le sezioni di un prompt completo per il ristorante di lusso:

<ruolo>
Agisci come un senior web developer esperto di UX/UI.
</ruolo>

<obiettivo>
Crea la struttura di un sito per un ristorante di lusso a Milano.
</obiettivo>

<pubblico>
Professionisti di fascia alta appassionati di fine dining.
Obiettivo principale: prenotare un tavolo.
</pubblico>

<pagine>
- Homepage: hero a tutto schermo, recensioni, call to action per la prenotazione
- Menu: interattivo, filtrabile per portata
- Chi siamo: storia del locale e del suo chef
- Prenotazione: modulo con data, orario e numero di coperti
</pagine>

<stack>
Usa HTML5, Tailwind CSS e JavaScript moderno.
</stack>

<stile>
Minimalista, colori scuri, dettagli dorati, titoli in serif.
</stile>

<output>
Codice suddiviso in file separati e commentati.
Layout completamente responsive e contrasto conforme a WCAG AA.
</output>

Errori frequenti

Il primo errore è lasciare il contenuto al caso: un sito senza testi reali, con segnaposto generici, produce pagine difficili da valutare. Il secondo è definire le pagine senza uno scopo, con il risultato che ciascuna sezione sembra scollegata dalle altre. Il terzo è affidarsi solo a divieti, senza indicare il comportamento desiderato. Infine, molti prompt dimenticano mobile e accessibilità, che si scoprono solo quando il sito è già costruito.

Anche un prompt ben scritto raramente è perfetto al primo tentativo. Il metodo più efficace è iterare: partire da struttura e sezioni, verificare la navigazione, e solo dopo affinare colori, tipografia e dettagli di interazione.

Un buon prompt per un sito web funziona come un brief professionale: definisce chi lo progetta, per chi è pensato, quali pagine contiene, con quali strumenti va realizzato e in quale forma deve essere consegnato. Più queste informazioni sono esplicite, meno il risultato dipende dal caso e più il sito diventa un punto di partenza utile.

Fonti

1. Anthropic, “Prompting best practices”, documentazione Claude Platform, consultata il 28/10/2026
2. Webstacks, “AI Prompt Engineering for Web Development: A Practical Guide”
3. WebsitePlanet, “Vibe coding, sezione 3 dedicata al prompt engineering”, guida aggiornata al 13/02/2026
4. Sticklight, “Build with Natural Language”