Ho costruito 4 siti animati 3D in 15 minuti con AI (per €3)

Sai cosa serviva per creare un sito con animazioni 3D smooth e scroll effects professionali fino a un paio d'anni fa? Minimo 10-15 mila euro e un team di designer e sviluppatori. Ora? Meno di 20 minuti, 3 euro di token e gli strumenti giusti. Ho appena realizzato quattro landing page con animazioni 3D che sembrano uscite da un portfolio di un'agenzia di alto livello. E voglio mostrarti esattamente come.

Quando ho iniziato a esplorare il potenziale di Claude Code combinato con modelli di video generation, non credevo fosse così immediato. Eppure, ciò che prima richiedeva settimane di sviluppo custom si è ridotto a un workflow di tre step: prompt testuale, generazione asset visuali con AI, integrazione automatica. Il risultato? Siti con globi 3D rotanti, esplosi assonometrici di interni, animazioni spaziali. Tutto generato e assemblato in una frazione del tempo che avrei impiegato anche solo a briefare un freelance.

Claude Code e il segreto del design one-shot: la skill 'Taste'

Partiamo dal primo pilastro: Claude Code. Lo uso tramite Antigravity, un IDE che mi permette di dialogare con Claude direttamente nell'ambiente di sviluppo. Ma la vera svolta non è solo Claude: è una skill open-source creata da un sedicenne e condivisa su Twitter, chiamata Taste.

Questa repository contiene una serie di principi di design high-end e schemi compositivi che, una volta passati a Claude Code, trasformano un prompt generico in un sito web completo, elegante, con spaziature corrette e un'estetica luxury. Non devi specificare margini, colori, font-weights: la skill standardizza tutto.

Esempio concreto: ho scritto un prompt del tipo "Usa questa skill per creare un sito high-end sul design di interni". Claude ha scaricato la repository Taste, analizzato le linee guida, e in due minuti ha generato un sito completo, perfettamente responsive, con hero section, sezioni di servizi, call-to-action. Zero iterazioni, zero aggiustamenti manuali. È quello che chiamo one-shot design : un solo colpo, sito fatto.

Video 3D con Kling 3.0: animazioni cinematiche in 3 minuti

Ora, un sito statico è bello. Un sito con animazioni 3D che seguono lo scroll è un'altra categoria. Per questo uso Kling 3.0 , un modello di video generation accessibile tramite Higsfield, una piattaforma che rende tutto il processo estremamente rapido.

Ho sperimentato con diversi prompt: globi che ruotano sull'asse senza spostare il centro di massa, stazioni spaziali in movimento, esplosi assonometrici di abitazioni. Ogni video dura 5 secondi, risoluzione 1080p, formato 16:9 (ideale per landing page). Il costo? 7,5 crediti per video, che equivalgono a circa 36 centesimi. Se generi 3 varianti per scegliere la migliore, siamo a poco più di un euro.

Un esempio che ho testato: per un sito di design di interni, ho chiesto a Kling di generare "un video 3D render di alta qualità che attraversa una scena di interior design. Sfondo bianco, qualità massima, stile che sembra uscito da una landing page professionale". In 3 minuti avevo il file MP4 pronto da scaricare. Nessun software 3D, nessun rendering manuale, nessuna competenza tecnica richiesta.

Integrazione automatica: da video a scroll animation in 30 secondi

Qui è dove Claude Code diventa magico. Una volta scaricato il video, lo rinomino (es. interior_design.mp4) e lo metto nella cartella del progetto. Poi scrivo un prompt come: "Prendi interior_design.mp4 e usalo come sfondo animato dell'hero header. Centra il testo, applica una maschera gradiente sfumata verso l'interno così l'animazione non interferisce con il resto del sito".

Claude Code estrae il file, lo integra nel codice HTML/CSS/JS, applica la maschera, ottimizza il posizionamento. In 30 secondi ho un hero header con video di sfondo perfettamente integrato. Ma non mi fermo lì: voglio anche una scroll animation frame-by-frame.

Genero un secondo video con Kling: un esploso assonometrico di una casa, in cui le varie stanze si separano in tutte le direzioni (verticale, orizzontale) su sfondo bianco. Scarico il file, lo chiamo interior_design_exploding_view.mp4 e dico a Claude: "Crea uno scroll animation sotto l'hero. Mentre scrollo, voglio vedere 2-3 sezioni di testo che descrivono i servizi, e voglio che l'esploso proceda frame per frame sincronizzato allo scroll".

Risultato? Claude estrae ogni singolo frame del video come JPEG ottimizzato, crea una sequenza di immagini legate alla posizione dello scroll, aggiunge preload per velocizzare il caricamento. Quello che un tempo mi sarebbe costato giorni di sviluppo JavaScript custom, ora accade in automatico.

Ottimizzazione performance: "rendilo più veloce" funziona davvero

Dopo la prima integrazione, il sito era bellissimo ma un po' pesante: lag percettibile nello scroll, video da 5+ MB. Allora ho scritto letteralmente: "C'è lag. Rendilo significativamente più veloce".

Claude ha compresso il video da 5,3 MB a 252 KB, ha ottimizzato gli asset di scroll, ha implementato lazy loading. Il tutto in meno di un minuto. Quando dico che oggi puoi parlare con il tuo IDE e ottenere risultati di livello professionale, intendo esattamente questo.

Un altro esempio: dopo aver sistemato lo scroll animation, mi sono accorto che il testo era difficile da leggere sopra l'animazione. Ho scritto: "Il testo è poco leggibile. Rendilo più prominente e aggiungi un overlay sul testo per separare l'animazione dallo sfondo". Claude ha aggiunto un box semi-trasparente dietro il testo e ha aumentato il contrasto. Due frasi, problema risolto.

Deploy gratuito su Netlify: online in un click

Ultimo step: mettere il sito live. Ho scritto a Claude: "Rendilo pubblico su Netlify". Netlify offre hosting gratuito illimitato con CDN globale (i tuoi contenuti vengono distribuiti su server edge in tutto il mondo per garantire tempi di caricamento rapidi ovunque). Claude ha preparato il deploy, ho cliccato un bottone, e in 30 secondi il sito era online con un URL pubblico.

Zero configurazione server, zero costi di hosting, zero complicazioni. Il sito è accessibile da chiunque, ovunque, con performance ottimali. E se domani voglio modificare qualcosa? Riapro Claude Code, faccio le modifiche, ri-deploy in un click.

Il vero costo (spoiler: meno di una cena)

Facciamo i conti. Per un sito completo con due animazioni 3D integrate:

• Token Claude Code : circa 1 euro (a seconda del piano e della lunghezza delle iterazioni)
• Crediti Kling 3.0 : 7,5 crediti per video × 2 video × 3 varianti = circa 2-3 euro
• Hosting Netlify : 0 euro

Totale: 3-5 euro. Tempo effettivo: 15-20 minuti. Valore percepito dal cliente? Migliaia di euro. Questo è il tipo di leva che l'AI mette nelle mani di un singolo professionista oggi.

La domanda che mi faccio sempre più spesso è: stiamo usando l'AI per amplificare le nostre capacità, o stiamo semplicemente diventando bravi a dare ordini a sistemi che faranno tutto al posto nostro? Per ora, la risposta mi piace: sto creando cose che prima non avrei mai potuto fare da solo. Ma tra qualche anno, chissà.

Strumenti che ho usato (e che puoi usare subito)

• Claude Code via Antigravity: IDE con integrazione diretta di Claude per sviluppo assistito
• Taste skill : repository open-source con principi di design high-end (cerca su GitHub o X)
• Kling 3.0 : modello di video generation 3D accessibile tramite Higsfield
• Netlify : hosting gratuito con deploy automatico e CDN globale

Se sei un freelance, un consulente o gestisci una piccola agenzia, questo workflow può trasformare completamente il tuo rapporto tempo/valore. Non sto parlando di sostituire il lavoro creativo: sto parlando di eliminare le ore di sviluppo ripetitivo e concentrarti su strategia, contenuti, relazione con il cliente.

Il mio consiglio? Inizia con un progetto personale o interno: prendi un brief che hai già fatto in passato, ricostruisci il sito con questo metodo, cronometra il tempo. Poi confronta con quanto ci avevi messo prima. La differenza ti sorprenderà. E se stai ancora vendendo siti a 10 mila euro con tempi di consegna di settimane, forse è il momento di ripensare il tuo posizionamento. Perché qualcun altro lo sta già facendo.