Un sito web professionale con animazioni fluide, card interattive e design elegante - generato con un singolo prompt. Gemini 3.1 Pro, il nuovo modello di Google, porta il vibe coding per il frontend a un livello che fino a poco fa richiedeva ore di lavoro manuale. Combinato con Antigravity, l’editor di codice di Google, il risultato è impressionante.
Il metodo si basa su un file template che guida il modello nella generazione. Nessun codice da scrivere, solo domande a cui rispondere.
Il problema: siti web AI che sembrano fatti dall’AI
Generare un sito web con l’AI non è una novità. Il problema è che nella maggior parte dei casi il risultato sembra esattamente quello che è: un sito generato da un modello linguistico. Layout generici, animazioni assenti, zero personalità. Per un’azienda che vuole fare una buona prima impressione, non è sufficiente.
Gemini 3.1 Pro cambia le carte in tavola per un motivo specifico: genera frontend con animazioni fluide, transizioni eleganti e interattività reale. Non solo testo e layout, ma barre animate, card con effetti hover, sezioni che si rivelano allo scroll. Il tutto con un singolo prompt.
Il metodo: template + Antigravity
Il processo è sorprendentemente lineare:
- Scarica il template
gemini.mddalla pagina delle risorse - Apri Antigravity (l’editor di codice di Google), crea una nuova cartella e un file chiamato
gemini.md - Incolla il contenuto del template nel file
- Seleziona Gemini 3.1 Pro come modello
- Chiedi: “Leggi il file gemini.md e dimmi cosa devo fare per realizzare il mio sito web”
Il modello ti fa alcune domande: nome del brand, scopo, direzione estetica (ci sono 4 preset tra cui scegliere), vantaggi competitivi, call to action. Rispondi e il sito viene generato in pochi minuti.
Il template è la chiave. Contiene istruzioni precise su stile, animazioni, struttura e comportamento delle componenti. È ciò che fa la differenza tra un output generico e un risultato professionale.
4 preset di stile: cosa aspettarsi
Il template include 4 preset estetici distinti, tutti con animazioni e interattività di alto livello:
- Barre animate che si riempiono allo scroll
- Card con transizioni e effetti hover
- Sezioni che si rivelano progressivamente
- Pulsanti interattivi che cambiano stato al click
- Layout puliti con tipografia curata
Ogni preset produce un risultato visivamente diverso ma sempre professionale. La scelta dipende dal tono del brand: più tecnico, più minimal, più dinamico.
Metodo alternativo: la skill UX
Oltre al template gemini.md, esiste un secondo approccio: un file skill.md che istruisce Antigravity a comportarsi come un senior UI/UX engineer. La skill “sovrascrive i bias predefiniti degli LLM” - in pratica, forza il modello a generare interfacce che non sembrino generate dall’AI.
Con questo metodo si può anche passare un sito web esistente come riferimento e chiedere di replicarlo con il nuovo stile. Il risultato ha un’estetica leggermente diversa dai preset standard - più autoriale, meno schematica.
Entrambi i file (template e skill) sono scaricabili gratuitamente dalla pagina delle risorse.
Dal locale alla produzione: il deploy
Il sito generato con Antigravity è in locale - funziona sul tuo computer ma non è ancora su internet. Per pubblicarlo, la soluzione più semplice è Vercel: connetti il dominio, fai il deploy e il sito è live.
Il flusso completo - dalla generazione con un prompt al sito online - può richiedere meno di 30 minuti per un sito one-page. Per siti più complessi con più pagine, navigazione e contenuti dinamici, il vibe coding resta un punto di partenza che va poi raffinato manualmente.
Limiti e prospettive realistiche
I risultati sono impressionanti, ma serve contesto:
- Siti one-page, non applicazioni complesse - Il metodo funziona bene per landing page, presentazioni prodotto e siti vetrina. Per applicazioni web con logica complessa serve un approccio diverso
- Il template fa il 90% del lavoro - Senza il file
gemini.md, lo stesso prompt produce risultati mediocri. La qualità del template è ciò che rende possibile il “single prompt” - Iterazione necessaria - Il primo output è buono, ma per un risultato pubblicabile servono ritocchi: testi, link, immagini reali al posto dei placeholder
- Non sostituisce uno sviluppatore - Per SEO tecnica, performance, accessibilità e manutenzione serve ancora competenza umana
Per le aziende che hanno bisogno di una presenza web veloce - un MVP, una landing page per un evento, un prototipo da mostrare - questo approccio è un acceleratore concreto. Se vuoi capire come strumenti come questo si inseriscono in una strategia di trasformazione digitale più ampia, il vibe coding è solo uno dei tasselli.