Creare un sito web con l'AI: come ho costruito il mio con Claude

Sì, oggi puoi creare un sito con l'AI. Le strade sono due: un builder con AI, che ti consegna un sito pronto dentro la sua piattaforma, oppure un assistente che scrive il codice, come Claude, e il sito resta tuo, file per file.

Io ho scelto la seconda per matteonieberle.com. Qui trovi com'è andata davvero: i passaggi, quanto ho speso, gli errori, e soprattutto le cose che l'AI non ha fatto al posto mio.

Due modi di creare un sito con l'AI

Puoi creare un sito con l'AI con un builder, che genera il sito dentro la sua piattaforma, oppure con un assistente come Claude Code, che scrive il codice e te lo lascia. La differenza che conta è cosa possiedi alla fine.

Nessuna delle due è "giusta". Il builder è perfetto se ti serve una vetrina oggi pomeriggio e non vuoi pensarci più. L'assistente ha senso se vuoi un design solo tuo e il controllo su ogni riga.

Il mio caso: matteonieberle.com in breve

matteonieberle.com è un sito statico in HTML, CSS e JavaScript, costruito con Claude Code (modello Claude Fable 5) in qualche giorno e ospitato su Aruba.

La parte che colpisce di più è la hero: il ritratto ruota mentre scorri. Non è un modello 3D. È un video generato con Higgsfield (modello Seedance) partendo da una mia foto, poi tagliato in 96 fotogrammi che il codice mostra uno dopo l'altro in base allo scroll.

Claude Code è diverso dalla chat: non ti dà blocchi di codice da copiare e incollare. Lavora direttamente sui file del progetto, li legge, li modifica e ti dice cosa ha cambiato. Per un sito di decine di file, questa differenza è tutto.

I passaggi, dall'idea al sito online

Ho creato il sito con l'AI in cinque passaggi: definire cosa costruire, scrivere i testi, costruire una sezione alla volta, iterare scartando le versioni deboli, testare e pubblicare.

1. Prima del codice: decidere cosa costruire

Il primo file del progetto non era HTML. Era un brand manual: posizionamento, tono di voce, palette, font. Poi una specifica del sito: sezioni, componenti, animazioni, vincoli.

Sembra burocrazia. È il motivo per cui il risultato non sembra un template. Un'AI a cui chiedi "fammi un sito bello" ti restituisce la media di tutti i siti belli che ha visto. Un'AI a cui dai colori esatti, font e regole costruisce il tuo.

2. Il testo prima del design

Ho scritto i testi in un documento separato, con un codice per ogni blocco: S2 è la hero, S4 il percorso, S7 il portfolio e così via.

Vantaggio pratico: le modifiche diventano chirurgiche. "Cambia S2.lead" non lascia spazio a interpretazioni.

3. Una sezione alla volta

Navbar, poi hero, poi timeline. Ogni sezione si costruisce, si guarda, si corregge, e solo dopo si passa alla successiva. Chiedere tutto il sito in un colpo solo produce una pagina intera di cose quasi giuste: molto più difficile da sistemare.

Il prompt qui sopra è ricostruito, ma è il modo in cui ho impostato il lavoro all'inizio. È diviso in blocchi (ruolo, contesto, obiettivo, processo, regole, memoria, formato) e i tag tra parentesi angolari servono a Claude per non confondere le istruzioni con i dati.

Il punto chiave è il passo 3: per ogni sezione, tre wireframe diversi prima di una sola riga di codice. Scegliere tra tre proposte è molto più facile che descrivere da zero quello che hai in testa. E correggere un wireframe costa molto meno che riscrivere una sezione già fatta.

Altri due blocchi fanno la differenza. L'obiettivo fissa solo quattro priorità (SEO e GEO, responsive, caricamento rapido, effetto wow): quando due idee si scontrano, si decide guardando lì. La memoria chiede a Claude di tenere aggiornato un file di progetto con decisioni, versioni scartate e cose da fare. Quel file esiste ancora, si chiama README-PROGETTO.md, ed è il motivo per cui ogni nuova sessione di Claude Code riparte dal punto giusto senza che io debba rispiegare tutto.

4. Iterare: le versioni scartate

Le versioni finite nel cestino insegnano più di quelle rimaste:

• La hero v2 aveva il mio nome gigante sopra il video, a tutto schermo. Bella da descrivere, illeggibile da guardare: poco contrasto. La versione attuale è la quarta, a due colonne.
• Il "filo conduttore", una linea luminosa che accompagna lo scroll, è alla terza versione. La prima era troppo timida. La seconda passava sotto testi e card. La terza ha una regola precisa: corre solo nei margini e negli spazi vuoti, mai sotto un testo.
• Una lente "Blueprint", che mostrava la struttura del sito sotto il cursore, l'ho fatta togliere del tutto. Funzionava, ma non aggiungeva niente: via.

5. Testare e pubblicare

Prima di caricare qualcosa, il sito gira in locale con un piccolo server Python e viene controllato con Chrome in modalità automatica: errori, layout, versione mobile.

Poi i file vanno su Aruba via FTP. Un dettaglio che nessuno ti dice: l'hosting può avere una cache che per un po' continua a mostrare la versione vecchia. Se dopo il caricamento non vedi le modifiche, il problema potrebbe non essere il codice.

Cosa l'AI non ha fatto al posto mio

L'AI ha scritto praticamente tutto il codice. Le decisioni che contano sono rimaste mie: il gusto, cosa togliere, la verifica su un telefono vero e la strategia per farsi trovare. È la parte che le guide sui builder non raccontano.

Il giudizio estetico. L'AI propone, e spesso propone bene. Ma dire che la hero v2 non funzionava, o che una lente perfettamente funzionante andava tolta, è una scelta di gusto e di brand. Nessun modello la fa per te.

Accorgersi che un effetto rallenta su un telefono vero. Due effetti del sito, delle particelle che si ricompongono nel mio monogramma e il filo conduttore, nascevano solo per desktop. Li abbiamo portati anche su mobile. I test automatici dicevano: zero errori, rendering corretto.

Sul mio telefono scattavano. Li ho riportati solo su desktop.

La lezione: un test automatico su un computer potente non è un telefono di fascia media in mano a una persona. L'ultimo controllo è sempre tuo.

Correggere i bug visivi. L'AI sbaglia, e i suoi errori tipici sono di layout: elementi che si sovrappongono, spaziature che saltano, animazioni che lasciano residui. Esempio vero: il filtro del portfolio riordina le card con un'animazione. Cliccando i filtri in fretta, restavano card "fantasma" fuori posto. Errori così li trovi solo usando il sito come lo userebbe una persona. Poi li descrivi con precisione, e la correzione la scrive Claude.

Capire che ottimizzato non vuol dire trovabile. La SEO era nel prompt fin dall'inizio, e sulla pagina c'è tutto: title, meta description, dati strutturati, sitemap. Ma il sito era una pagina unica: per Google, una sola pagina da mostrare, che non può rispondere a tutte le domande che le persone fanno davvero. Ottimizzare una pagina è un compito tecnico, e l'AI lo esegue bene. Decidere quali pagine servono è strategia, e quella resta tua. Questo articolo esiste per risolvere proprio quel problema.

Gli errori che ti risparmio

1. Fidarti solo dei test automatici. Apri il sito sul tuo telefono, e possibilmente su quello di qualcun altro.
2. Ignorare il peso di video e animazioni. Su mobile ogni megabyte si sente. Il mio ritratto animato, su telefono, è un video in loop invece di 96 immagini: e anche così resta la parte più pesante della pagina.
3. Dimenticare la cache dell'hosting. Se non vedi le modifiche, svuota la cache prima di riscrivere il codice.
4. Pensare alla SEO dopo. Decidi da subito quali pagine servono e per quali ricerche. Aggiungerle dopo si può, ma costa di più.
5. Chiedere "fammi un sito bello". Dai specifiche: colori, font, sezioni, cosa non vuoi.

Quanto costa creare un sito con l'AI

Creare il mio sito con l'AI è costato 22 € al mese di abbonamento a Claude, più 9,90 € + IVA all'anno per dominio e hosting. Il dettaglio:

Per un builder con AI, il costo principale è il canone della piattaforma, che dipende dal piano e cambia spesso: controlla sempre il listino ufficiale, non le cifre che trovi negli articoli (compreso questo, tra un anno).

La differenza vera non è il prezzo del primo mese. Con un builder il sito vive finché paghi il canone. Con i file tuoi, l'abbonamento all'AI lo puoi anche sospendere: il sito resta online con il solo costo dell'hosting.

Builder o assistente AI: quale strada scegliere?

Scegli in base a quanto controllo vuoi e a quanto tempo puoi dedicarci:

• Vuoi una vetrina online in giornata e non toccare mai il codice? Builder con AI.
• Vuoi un design solo tuo, controllo totale e nessuna piattaforma in mezzo? Assistente che scrive il codice.
• In entrambi i casi devi saper fare tre cose: dare istruzioni precise, verificare il risultato su un dispositivo vero, e decidere cosa togliere.

Non serve essere sviluppatori. Io non lo sono: vengo dall'informatica tecnica e oggi lavoro nel marketing. Serve sapere cosa vuoi, e accorgerti quando non ci sei ancora.

In sintesi

Creare un sito con l'AI non vuol dire premere un bottone. Vuol dire avere un collaboratore velocissimo che scrive il codice, mentre tu tieni il timone: decidi, provi, scarti, verifichi su un telefono vero.

Il risultato lo trovi su matteonieberle.com: guardalo dal vivo, meglio da desktop, per vedere anche gli effetti.

Se stai costruendo anche tu il tuo sito con l'AI, scrivimi: mi interessa come hai risolto i tuoi bug. Mi trovi su LinkedIn, dove racconto anche i prossimi passi di questo progetto.