Come creare un sito web con l’AI in 3 passaggi

Una propria pagina web senza saper programmare? Oggi è possibile farla costruire quasi interamente dall’intelligenza artificiale.

Strumenti come ChatGPT con Codex e Claude Code possono analizzare un sito esistente, studiarne struttura e contenuti, proporre un nuovo design e successivamente scrivere il codice necessario per trasformarlo in un sito funzionante.

In alcuni casi possono occuparsi anche della pubblicazione e della configurazione tecnica del dominio.

Il segreto, però, non è semplicemente chiedere:

«Fammi un sito bello e moderno».

Una richiesta del genere spesso produce il classico AI slop: gradienti viola, tante card arrotondate, icone sopra ogni titolo e un design molto simile a quello di migliaia di altri siti.

Per ottenere un risultato migliore conviene seguire un processo preciso in tre fasi: analisi, design e implementazione.

1. Parti da una URL o da una semplice idea

Il modo più semplice è partire da un sito che esiste già.

Puoi fornire all’AI l’URL di una pagina che vuoi rinnovare e chiederle di analizzarla. L’agente può studiare la struttura, la navigazione, i testi, le immagini, i colori, i pulsanti, i moduli e gli elementi che contribuiscono alla credibilità del sito.

Non è necessario preparare subito un brief enorme.

È sufficiente spiegare cosa vuoi ottenere e lasciare che l’AI faccia una prima analisi. In seguito può chiederti solamente le informazioni che non riesce a ricavare dalla pagina.

Un buon processo parte quindi da domande semplici:

Qual è l’obiettivo del nuovo sito?

Cosa deve rimanere e cosa deve cambiare?

Quali immagini, loghi o materiali del brand devono essere utilizzati?

Il sito deve essere solamente una demo oppure deve essere pubblicato online?

In questo modo l’intelligenza artificiale ha un quadro molto più preciso del progetto prima di iniziare a scrivere codice.

2. Prima il design, poi il codice

Questo è probabilmente il passaggio che fa più differenza.

Invece di chiedere immediatamente all’AI di programmare il sito, è molto meglio farle creare diverse direzioni visive.

Per esempio, potrebbe proporre:

Design A: minimalista ed editoriale.
Design B: moderno e tecnologico.
Design C: più emozionale e orientato alla conversione.

Le tre proposte devono essere realmente diverse, non semplicemente tre variazioni dello stesso template.

A questo punto puoi scegliere la direzione che preferisci e chiedere all’AI di trasformarla in un vero sistema di design.

Il sistema può comprendere:

• colori
• font e dimensioni dei testi
• griglia della pagina
• spaziature
• pulsanti
• card e componenti
• immagini
• animazioni
• regole per smartphone e tablet

Un passaggio particolarmente utile è creare un file come DESIGN.md. In questo documento vengono raccolte tutte le regole visive del progetto.

In questo modo l’AI non deve reinventare il design ogni volta che crea una nuova pagina.

Come evitare il classico design AI

Un sito generato automaticamente può essere tecnicamente corretto ma visivamente mediocre.

Per evitarlo bisogna dare all’agente alcuni vincoli chiari.

Per esempio:

Evita gradienti inutili, card eccessivamente arrotondate, icone decorative sopra ogni titolo, animazioni casuali e immagini stock generiche. Il design deve essere riconoscibile, coerente con il brand e progettato per il pubblico di riferimento.

È anche possibile utilizzare strumenti e skill specifiche per migliorare il frontend. Anthropic, per esempio, mette a disposizione un Frontend Design Skill per Claude Code, pensato proprio per creare interfacce meno generiche e più curate.

3. Lascia che l’AI costruisca e corregga il sito

Una volta scelto il design, arriva il momento del coding.

A questo punto strumenti come Codex o Claude Code possono trasformare il progetto visivo in una vera applicazione web.

L’agente può creare HTML, CSS e JavaScript oppure lavorare all’interno di framework moderni come React e Next.js, a seconda del progetto.

La cosa interessante è che il lavoro non termina con il primo risultato.

Il sito può essere aperto nel browser e controllato direttamente.

Puoi quindi dire:

«Il titolo è troppo grande.»

oppure:

«Il pulsante deve essere più evidente.»

oppure ancora:

«Su smartphone questa sezione occupa troppo spazio.»

L’agente può modificare il codice, visualizzare nuovamente il risultato e continuare il ciclo di revisione.

Questo approccio è molto più efficace che cercare di descrivere tutto perfettamente in un unico prompt.

Anche la pubblicazione può essere automatizzata

Una volta terminato il sito, arriva il deployment.

Per una semplice pagina statica puoi utilizzare servizi come Netlify o Cloudflare Pages. Puoi caricare il progetto e collegare successivamente il tuo dominio.

Con gli strumenti che offrono accesso al browser o al computer, un agente AI può anche aiutare a controllare configurazioni tecniche come DNS, HTTPS e collegamento del dominio.

È comunque importante verificare tutto prima di rendere il sito pubblico.

Prima della pubblicazione bisogna controllare almeno:

• versione desktop
• versione mobile
• link e pulsanti
• moduli
• immagini
• titolo e meta description
• favicon
• contrasto e leggibilità
• eventuali errori JavaScript
• 404 e redirect

Non iniziare con un progetto enorme

Se è la prima volta che costruisci un sito con l’AI, non partire da un e-commerce complesso con login, pagamenti, database e gestione clienti.

Inizia con una landing page, un portfolio, una pagina professionale o un piccolo sito aziendale.

L’obiettivo è capire il metodo:

URL o idea → analisi → proposte di design → scelta → coding → revisione → pubblicazione.

Una volta che il sistema funziona, puoi aggiungere nuove pagine e funzionalità.

Il prompt completo

Per rendere il processo più semplice puoi utilizzare un prompt strutturato che obbliga l’agente a rispettare le diverse fasi: prima analizzare il progetto, poi proporre tre direzioni visive, aspettare la scelta e solo successivamente iniziare il coding.

Prompt: crea e pubblica un sito web

Sei il mio Senior Product Designer, Creative Frontend Engineer, specialista di conversione e responsabile del deployment.

Crea, dopo un breve dialogo iniziale, un sito web nuovo, autonomo e pronto per essere pubblicato.

Lavora obbligatoriamente in questo ordine:

1. analizza
2. sviluppa le direzioni visive
3. aspetta la mia scelta
4. implementa
5. modifica nel browser
6. verifica
7. pubblica solo dopo la mia approvazione

Inizia sempre con questa domanda:

“Quale sito web o URL esistente vuoi che rielabori? Se non ne hai uno: cosa vuoi creare?”

Apri e analizza l'URL prima di fare altre domande.

Utilizza tutte le informazioni che puoi ricavare dalla pagina e non chiedere informazioni che sono già presenti.

Successivamente chiedimi solo ciò che manca.

Puoi chiedere, una domanda alla volta:

“Qual è soprattutto l'obiettivo del nuovo sito?”

“Cosa deve rimanere e cosa deve cambiare? Hai loghi, immagini o materiali del brand che devo utilizzare?”

“Come vuoi che venga messo a disposizione il sito finale: solo come anteprima oppure, dopo la tua approvazione, anche pubblicato? Hai già un dominio?”

Fai al massimo cinque domande complessive.

Risposte brevi, parole chiave e link sono sufficienti.

Analizza la struttura, la navigazione, i contenuti, le CTA, i moduli, i link, le immagini, i loghi, i font, i colori, gli elementi di fiducia, le pagine legali e gli elementi SEO.

Crea un breve inventario dei contenuti e indica cosa deve essere mantenuto, modificato, aggiunto o eliminato.

Non inventare recensioni, numeri, referenze o promesse.

Sviluppa tre direzioni visive realmente diverse.

Devono differenziarsi per gerarchia, layout, immagini, tipografia, colori e atmosfera.

Evita il classico design AI:

- card SaaS intercambiabili
- gradienti inutili
- icone sopra ogni titolo
- troppi contenitori arrotondati
- animazioni casuali
- immagini stock generiche

Genera, quando possibile, mockup visivi per le tre direzioni.

Mostra per ogni direzione:

- nome
- effetto visivo
- caratteristiche principali
- vantaggi
- possibili svantaggi

Dai una raccomandazione.

Non scrivere ancora codice.

Chiedimi:

“Quale direzione ti piace di più? Cosa vuoi mantenere, combinare o modificare?”

Aspetta la mia scelta.

Non iniziare il coding prima della mia approvazione visiva.

Dopo l'approvazione crea un DESIGN.md con colori, tipografia, griglia, spaziature, componenti, immagini, movimento ed elementi da evitare.

Mantieni i contenuti reali del sito originale.

Rendi il sito responsive per desktop, tablet e smartphone.

Utilizza HTML semantico, stati di focus visibili, contrasto sufficiente e una modalità prefers-reduced-motion.

Controlla tutti i pulsanti, link, moduli, ancore, menu e link legali.

Dopo il primo build completo esegui un controllo visivo finale.

Apri il sito nel browser e mostrami la versione desktop e mobile.

Applica i miei commenti direttamente agli elementi interessati e ripeti il controllo fino alla mia approvazione.

Prima della pubblicazione verifica:

- desktop
- tablet
- smartphone
- navigazione
- pulsanti
- moduli
- link
- immagini
- titolo della pagina
- meta description
- social preview
- favicon
- errori del browser
- errori console
- pagina 404
- redirect
- accessibilità
- reduced motion
- assenza di overflow orizzontale

Non modificare il vecchio sito.

Mantieni il nuovo progetto separato e facilmente ripristinabile.

Se è disponibile un sistema di pubblicazione integrato, utilizzalo dopo la mia approvazione.

In alternativa crea una versione statica o un production build pronto per Netlify, Cloudflare Pages o un altro hosting.

Se viene indicato un dominio personalizzato, verifica prima il provider DNS e modifica solamente i record necessari.

Considera il lavoro concluso solo quando il sito pubblico è raggiungibile tramite HTTPS.

Inizia ora con la prima domanda.

Il nuovo modo di costruire siti web

La vera novità non è semplicemente che l’AI sappia scrivere HTML o CSS.

La novità è che può partecipare a tutto il processo di sviluppo: analisi, progettazione, programmazione, test e revisione.

Questo trasforma il modo in cui una persona non tecnica può creare un sito.

Non devi necessariamente diventare programmatore per costruire una buona pagina web. Devi però imparare a dare all’AI obiettivi chiari, vincoli precisi e feedback di qualità.

Ed è probabilmente questa la competenza più importante nell’era dei siti web creati con l’intelligenza artificiale.