Da mesi leggo e sento la stessa frase: il web design è morto, i siti li fa l'IA, lo sviluppatore web non serve più. Chi lo dice magari usa questi strumenti meglio di me. Ma invece di discuterne, ho preferito provare sul campo.
Mi sono inventato un cliente, gli ho fatto scrivere un brief e ho usato l'IA in ogni passaggio: moodboard con ChatGPT, primo design system con Claude Design, template in HTML con Claude Code, pagine interne e infine una pagina di design system con tutti i componenti. Senza passare da Figma.
Ne è uscito "Il rullino": un template per un fotografo dal sapore anni '80 che, per il tempo che ci ho messo, mi ha sorpreso. Ma per arrivarci ho dovuto scartare parecchio "slop" e scrivere un prompt dopo l'altro, come farei con un collaboratore junior. Qui ti mostro tutto: i passaggi, gli screenshot di ogni versione e i feedback che ho dato all'IA, quasi parola per parola.
Il brief: un fotografo nostalgico
Il cliente è inventato, e il brief l'ho generato io insieme a ChatGPT: William, fotografo e videomaker freelance, ama catturare momenti spontanei e raccontare storie con immagini dal sapore vintage, colori caldi e luci morbide. Vuole un piccolo sito portfolio dove mostrare i lavori e farsi contattare per i servizi.
Il gusto vintage non è casuale: in questo periodo mi sembra tutto troppo uguale, troppo minimal. Volevo sperimentare qualcosa di più caldo, con qualche filtro WebGL interessante.
Le moodboard con ChatGPT
Primo passaggio: tradurre quel "sapore vintage" in immagini. Ho dato il brief a ChatGPT descrivendo il mood anni '80 che avevo in testa, e ne sono uscite tre moodboard.
Solo tre perché oggi uso la versione gratuita. Con ChatGPT Plus, in passato, scavando tra moodboard e mockup ho ottenuto immagini davvero utili come reference. Per l'esperimento bastavano: palette calda, pellicola, polaroid, un tocco di azzurro.
Claude Design e il primo design system
Con le tre moodboard sono passato a Claude Design per i primi componenti. Primo ostacolo: Claude non genera immagini, quindi provava a ritagliarle dalle moodboard. Gli ho chiesto di usare Unsplash, che per un template demo va benissimo.
Il primo design system era, onestamente, molto slop: il classico sito fatto con l'IA. Però c'erano delle chicche: uno slider fatto come una pellicola, le polaroid usate come didascalie delle immagini. Idee da tenere.
Dal mockup a un vero progetto HTML
Qui ho toccato i limiti degli artifact di Claude Design: per effetti più seri serviva un progetto vero. Ho passato tutto a Claude Code, chiedendo un piccolo progetto HTML con i suoi node modules. La parte più faticosa? Convincere l'IA a non scaricare spazzatura. Il messaggio che gli ho mandato era questo:
«Attenzione ai moduli che scarichi: finché sono Lenis, GSAP, Three.js e WebGL ok, ma non usare moduli strani, non manutenuti o con vulnerabilità.»
Alla fine il progetto ha quattro dipendenze, e basta:
- GSAP per le animazioni;
- Lenis per lo smooth scroll;
- Three.js per i filtri WebGL: grana, alone della pellicola, passaggio da negativo a positivo;
- Vite solo in sviluppo, per il server locale e la build.
Tutto il resto (la curvatura della pellicola, la fisica delle polaroid, gli shader) Claude l'ha scritto a mano in GLSL e JavaScript, senza librerie in più. Risultato: zero vulnerabilità all'installazione e un progetto che capisco dall'inizio alla fine.
Primo risultato: una prova di muscoli
Il primo risultato aveva tutti i tic dei siti generati: un nome gigante in corsivo, il cursore che si muove da solo, gli occhielli con il numero davanti, troppo WebGL e troppe informazioni. Lo slider a pellicola restava un'intuizione carina, ma eravamo lontani dalle moodboard.
Il mio feedback a Claude, un po' accorciato:
«La hero è semi interessante, ma mancano il chi sono, che problemi risolvo e le CTA. Evita quel cursore che si muove, togli le cose da AI slop tipo FOT. 01. Il rullino è troppo animato e invasivo...»
Secondo risultato: più sito, ancora poco carattere
Il secondo giro aveva finalmente la forma di un sito: una hero che dice cosa fa il fotografo, le call to action per farsi contattare, sezioni con più senso di esistere. Mi piaceva molto "Il provino": i lavori selezionati presentati come un foglio di provini, con i fotogrammi buoni cerchiati in rosso. Dinamico senza essere invadente.
Però era ancora il classico sito, solo vestito vintage. Allora ho deciso che dovevo fare altre iterazioni.
Le iterazioni: un prompt alla volta
Per un video avrei potuto accontentarmi. Invece ho continuato, anche in pausa pranzo, a dare feedback come farei con un collaboratore: guardo il sito, scrivo cosa non va, Claude corregge, riguardo. Alcune delle cose che ho chiesto di cambiare:
- Via i corsivi: tutti quegli italic decorativi non servivano. Al loro posto è arrivato un font molto bold, che ho deciso di tenere.
- Leggibilità: "William, fotografo e videomaker" sopra la foto della hero non si leggeva.
- Le buste dei servizi: testi più semplici, tutte allo stesso livello, niente inclinazioni. E "Richiedi questa busta" non funzionava come CTA.
- Contrasto: "OK stampa" in blu e il cerchio rosso, entrambi sul nero, non si vedevano.
- Chip storte: nella sezione chi sono sembravano elementi cliccabili. Meglio recuperare gli stilemi dell'epoca.
- Le recensioni: una sola non basta, e l'album era troppo scheumorfico, con ombre e un finto 3D che non c'era da nessun'altra parte.
- Il finale: "Hai una storia da raccontare", con la carta da lettera e il numero 001, era too much slop. Meglio un pre-footer da sito standard, con un'immagine di sfondo.
La home finale
Dopo cinque o sei giri la home ha trovato il suo carattere: hero a tutto schermo con la foto, il titolo bold e due CTA chiare; i servizi come buste di sviluppo fotografico (foto, video, pellicola); il provino; un video che si ingrandisce allo scroll con l'effetto VHS; le recensioni come polaroid; un pre-footer caldo con email e WhatsApp.
È ancora un po' troppo densa: manca per esempio un modulo di testo semplice, perché non tutto deve stare dentro una grafica particolare. Ma il mood c'è.
La pagina lavori e il caso studio
Per un fotografo la pagina più importante è quella dei lavori. Al primo colpo, "one shot", l'IA me l'ha fatta slop, e stavolta il problema era l'opposto: troppo semplice, scollegata dallo stile della home.
«Il titolo della pagina lavori è molto standard, Segui lo stile della moodboard col rullino e immagine grand estile hero homepage. A questo punto farei delle polaroid, va bene il cerchio all'hover. Il reticolato sul bianco da eiminare lnon coerente al design. Per "Hai un progetto in mente" abbiamo già il nostro pre-footer: riutilizza quello. E nel progetto toglierei quella targhetta con lo shadow: è l'unico elemento che usa l'ombra non è coerente col design.»
Dopo un paio di giri Claude ha cominciato a tenere in memoria l'estetica: la pagina lavori ha una pellicola sotto il titolo e una griglia di polaroid; cliccandone una si apre il caso studio con la richiesta, l'idea e il risultato. Bello l'hover con il cerchietto rosso che richiama il provino della home; inutile, come al solito, lo scale up che l'IA aggiunge di suo.
Il design system
L'ultima pagina era quella che mi interessava di più. Il prompt è stato semplice:
«Fammi una pagina di show off dei componenti, delle regole, del design system, caratteri, colori...» il prompt continua con le struzioni del design system e poi l’ho concluso con «Link raggiungile solo dal footer».
Il risultato ha il concept ("il laboratorio fotografico anni '80"), i colori con i loro nomi (carta, inchiostro, terracotta, cielo, kraft), la scala tipografica, spazi e griglia, i componenti con le regole d'uso, cosa fare e cosa non fare con le immagini, e l'elenco delle pagine.
Questa pagina potresti darla direttamente a un agente AI per costruire il sito vero, o consegnarla a uno sviluppatore. Va affinata: non è un design system reale ed è pieno di testi superflui anche lui e pochi vincoli, ma per il tempo impiegato è un gran risultato. Visto che è già tutto in HTML, il passaggio a Next.js con Sanity o a WordPress con ACF è forse ancora più semplice.
Cosa ha fatto l'IA e cosa ho fatto io
| Fase | Cosa ha fatto l'IA | Cosa ho dovuto fare io |
|---|---|---|
| Brief | Scritto con ChatGPT | Decidere il cliente e il mood |
| Moodboard | Tre moodboard in pochi minuti | Scegliere cosa tenere: pellicola, polaroid, azzurro |
| Design system | Prima bozza con Claude Design | Riconoscere le idee buone dentro lo slop |
| Codice | Tutto l'HTML, il CSS, gli shader | Limitare le dipendenze, controllare il risultato |
| Iterazioni | Correggere a ogni prompt | Fare l'art director: cosa togliere e perché |
| Copy e UX | Solo segnaposto | Niente: è la parte che manca |
Allora l'IA può stare nel flusso di design?
Secondo me sì, ma non così com'è. Questo è stato un esercizio di stile: niente analisi UX, nessuna intervista al cliente, nessuna alberatura prima di partire, nessun lavoro sul copy o su dove posizionare gli elementi per il marketing.
In un progetto vero lo integrerei così:
- un'intervista al cliente e uno studio serio del target e di cosa deve esprimere il sito, soprattutto nel copy;
- un passaggio manuale su Figma, con moodboard dell'IA mescolate a reference reali;
- l'IA per accelerare mockup, componenti e template, con il web designer che decide cosa resta.
In conclusione
Mi è piaciuto sperimentare così, ed è utile anche per il mio lavoro. Per questo vorrei farne una serie, e la strada la scegliete voi:
- un template a video, con tutto l'HTML su GitHub;
- oppure mi scrivete una user persona nei commenti e provo a costruire il suo sito con lo stesso metodo.
Se conoscete strade migliori per arrivare allo stesso risultato, ditemelo: le percorro volentieri. E se volete un articolo con i componenti HTML di questo template da riusare, fatemelo sapere.
Lascia un commento sotto al video, seguimi su Instagram oppure scrivimi dal sito se vuoi un sito fatto con questo metodo, ma con il lavoro umano che manca.
