Un solo prompt per un sito web 3D in 30 secondi (6 testati)

La maggior parte delle librerie di prompt per siti web 3D addebita il costo del testo del prompt stesso oppure ti mostra un video demo e si tiene per sé le parole. Ecco sei prompt completi: incollali in Claude così come sono, oppure adatta una riga per Lovable, Bolt e Cursor. Tutti e sei sono passati attraverso un modello live; cinque sono tornati come pagine Three.js funzionanti, e ogni screenshot qui sotto è uno di quei render, non un mockup.

Sei prompt per siti web 3D che puoi copiare subito

Ogni prompt richiede una pagina HTML a file singolo con Three.js caricato da un CDN. Questo vincolo è importante: un singolo file si apre localmente in qualsiasi browser ed è facile da consegnare a uno sviluppatore o incollare in un blocco di codice personalizzato, e costringe il modello a mantenere la scena autocontenuta invece di distribuire gli import in un progetto.

1. Hero della galassia di particelle

Crea una pagina HTML in un singolo file con una hero section interattiva di galassia di particelle 3D
utilizzando Three.js (caricalo da una CDN). Requisiti: circa 50.000
particelle che formano una galassia a spirale che ruota lentamente; i colori delle particelle passano
da un ambra caldo al nucleo a un viola sul bordo esterno; aggiungi OrbitControls così
i visitatori possono trascinare per ruotare e zoomare; sovrapponi un titolo hero centrato che
dica "Build Beyond Flat" con una breve sottolinea e un pulsante CTA; imposta
pointer-events: none sul contenitore dell'overlay e pointer-events: auto sul
pulsante CTA così la galassia rimane trascinabile dietro il testo; sfondo
scuro #0a0616; gestisci il ridimensionamento della finestra. Restituisci SOLO il file HTML completo
in un singolo blocco di codice.

Generato in 27 secondi e 3.692 token di output. La galassia ruota, il trascinamento per l’orbita funziona e il pulsante rimane cliccabile attraverso l’overlay. Un vero difetto: la sottolinea finisce sul brillante nucleo galattico ed è difficile da leggere. La correzione è nelle note di test qui sotto.

2. Vetrina del prodotto guidata dallo scroll

Crea una singola pagina HTML file: una vetrina di prodotto 3D guidata dallo scroll usando
Three.js caricato da un CDN. Requisiti: un torus-knot cromato fluttuante
centrato in un canvas fisso a schermo intero; la pagina ha 4 sezioni a schermo intero
scorribili e, mentre l'utente scorre, la camera orbita attorno all'oggetto per un intero 360
gradi mentre il colore del materiale dell'oggetto transita dolcemente per sezione
(argento, blu intenso, smeraldo, rame); ogni sezione mostra un titolo e
una riga di testo fissati a sinistra sopra il canvas; interpolazione fluida (lerp)
sullo scroll così che il movimento risulti smorzato; aspetto dark da studio con due spotlights
colorate e un'ombra morbida a terra; gestisci il resize. Restituisci SOLO il file HTML completo
in un singolo blocco di codice.

Questa è stata la più pesante delle cinque generazioni in lavorazione (63 secondi, 7.023 token di output) e il risultato più impressionante. Lo scorrimento sposta la camera attorno all'oggetto, e il materiale cambia colore per sezione בדיוק come richiesto:

L'interpolazione lerp smorzata è stata rispettata anche; il movimento ha la sensazione pesante e costosa di un sito di un'agenzia piuttosto che di una presentazione con scroll-jacking.

3. Sfondo con gradiente fluido GLSL

Crea una singola pagina HTML file con uno sfondo animato WebGL a gradiente
fluido a schermo intero usando uno shader di frammento GLSL personalizzato
con Three.js caricato da un CDN. Requisiti: blob organici a movimento lento che
sfumano blu intenso, viola e corallo, guidati da una uniform di tempo e da
noise in stile simplex nello shader di frammento; aggiungi una sottile grana
cinematografica nello shader; sovrapponi una card di vetro centrata
(backdrop blur) con un titolo bianco "Ship Immersive Sites", una sottoriga
e due pulsanti; l'animazione deve rimanere fluida su un laptop (single
quad, no postprocessing passes); gestire il resize. Restituisci SOLO il file
HTML completo in un singolo blocco di codice.

31 secondi, 3.830 token, superamento al primo tentativo. La linea "single quad, no postprocessing passes" è il vincolo prestazionale: senza di essa, i modelli tendono a ricorrere a EffectComposer e a passaggi bloom che fanno crollare i frame rate sulle GPU integrate.

4. Fly-through del portfolio 3D (quello che ha reagito)

Crea una singola pagina HTML: un portfolio 3D usando Three.js da un CDN.
Sei card progetto fluttuanti (piani arrotondati con texture segnaposto a gradiente
e titoli dei progetti resi sulla texture della card) disposte lungo
una leggera curva nello spazio 3D. Man mano che l'utente scorre, la camera avanza
lungo la curva, portando ogni card a fuoco una alla volta; la camera
deve mantenere la card in focus completamente inquadrata con un margine confortevole e non deve
mai attraversare una card; la card in focus si ingrandisce leggermente. Le card vicine
restano parzialmente visibili per dare profondità. Aggiungi una lieve nebbia, uno sfondo scuro, interpolazione dello scroll smorzata.
Facendo clic su una card in focus si apre un link. Gestisci il ridimensionamento.
Mantieni il codice compatto: riutilizza una sola funzione per costruire le card, senza commenti.
Restituisci SOLO il file HTML completo in un singolo blocco di codice.

Questa ha richiesto tre esecuzioni e non è ancora pronta per la pubblicazione, e lo screenshot qui sopra mostra perché la pubblichiamo comunque: la card viene renderizzata, ma la camera si trova dietro di essa, quindi il titolo appare specchiato. La prima esecuzione ha superato il nostro limite di output di 16.000 token a metà file. La seconda esecuzione (con la riga "keep the code compact", ed è per questo che quella riga è nel prompt) ha renderizzato le card ma ha fatto passare la camera dritta attraverso di esse. La terza esecuzione ha corretto il clipping e ha perso il collegamento di scorrimento della camera. La coreografia del percorso della camera più le texture per singola card è davvero più difficile per i modelli rispetto alle scene qui sopra; prevedi una sessione di debug, oppure semplifica con una griglia curva statica con stati hover.

5. Visualizzatore interattivo del prodotto

Crea una singola pagina HTML: un visualizzatore di prodotto 3D interattivo che usa
Three.js da un CDN. Centra un sostituto di prodotto geometrico stilizzato senza wireframe
(un cubo smussato o una capsula) su un piedistallo. Pannello sul lato destro con
tre campioni di colore e un toggle metallo/opaco che aggiornano il materiale in tempo reale;
OrbitControls limitati alla rotazione orizzontale; illuminazione soffusa da studio a tre punti
e un'ombra di contatto. Mantieni il pannello come semplice overlay HTML/CSS sopra il
canvas. Gestisci il ridimensionamento. Restituisci SOLO il file HTML completo in un singolo blocco di codice.

Superamento al primo tentativo, 66 secondi, 7.719 token. I campioni e il toggle metallo/opaco aggiornano il materiale in tempo reale, e il modello ha aggiunto una cortesia non richiesta: una nota a piè di pagina che spiega che la rotazione è bloccata sull’asse orizzontale per mantenere il prodotto inquadrato.

6. Sito aziendale 3D a pagina singola

Crea una pagina HTML a file singolo: un sito one-page per uno studio di design con
Three.js da un CDN. Sezioni: hero, servizi, portfolio, contatti. Una singola
forma astratta low-poly fluttua in alto a destra dell'hero e ruota lentamente;
mentre l'utente scorre in ciascuna sezione, la forma modifica scala e colore
per abbinarsi all'accento di quella sezione. Le sezioni altrimenti usano HTML/CSS puliti
(niente 3D pesante per sezione) così la pagina resta veloce. Scorrimento fluido, adatta ai dispositivi mobili, gestisci il ridimensionamento. Restituisci SOLO il file HTML completo in un singolo
blocco di codice.

62 secondi, 7.419 token. Il modello ha inventato il nome di uno studio, ha costruito le quattro sezioni e ha posizionato un icosaedro low-poly esattamente dove richiesto. Il nostro primo tentativo con questo prompt ha superato un limite di output di 8.000 token ed è arrivato troncato — se chiami un modello tramite API, imposta il limite di output a 16.000 token o più per prompt a pagina intera.

Cosa è successo quando li abbiamo eseguiti

Tre esecuzioni su un singolo modello per prompt sono un aneddoto, non un benchmark; leggilo come una verifica puntuale di dove si trovi la generazione da prompt a 3D a metà del 2026. Note metodologiche: claude-sonnet-5 tramite la sua API il 17 luglio 2026, impostazioni predefinite, nessun prompt di sistema, risultati renderizzati in Chrome desktop a 1280×720 su un MacBook con Apple Silicon; nelle esecuzioni riuscite il modello ha scelto autonomamente la build UMD Three.js r128 da un CDN pubblico.

Il solo difetto visivo tra le cinque pagine funzionanti: la sottoriga del prompt 1 si trova sulla parte più luminosa della galassia e diventa quasi illeggibile. Una riga di follow-up l’ha sistemata — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. Questo è il modello che emerge in queste esecuzioni: la scena 3D in sé tende a risultare corretta, e il budget di iterazione va alla tipografia, al contrasto degli overlay e, nel caso del portfolio, alla coreografia della camera.

Il costo non è un problema a questa scala. L’intera esecuzione di test — nove generazioni, inclusi i tentativi di nuovo del portafoglio, circa 46.000 token di output — è costata ben meno di un dollaro; l’abbiamo eseguita tramite AIReiter, che rivende l’accesso alle API di Claude a un quinto del prezzo ufficiale per token, quindi anche una sessione di iterazione ostinata resta nell’ordine delle monete spicciole.

Come scrivere il tuo prompt per un sito web 3D

I prompt che hanno superato il test condividono cinque parti. Mantieni tutte e cinque e le tue probabilità di superare al primo tentativo aumenteranno nettamente.

1. Un solo soggetto della scena. Una galassia, un nodo torico, un campo di gradiente. Nei nostri test e nella maggior parte degli esempi condivisi dalla community, i prompt che chiedono più elementi 3D non correlati in una sola pagina sono il punto in cui i modelli iniziano a tralasciare dei requisiti. 2. Un motore del movimento. O il tempo (slowly rotates, driven by a time uniform) oppure lo scroll (as the user scrolls, the camera orbits). Indica esplicitamente quale; "animated" da solo lascia al modello la scelta di qualcosa di noioso. Nota dal fallimento del portfolio: guidare lo scroll di un *oggetto* è affidabile, guidare lo scroll di una *camera lungo un percorso tra oggetti* è il punto in cui le cose si rompono. 3. L'interazione. OrbitControls per il trascinamento per ruotare ha funzionato in ogni esecuzione riuscita del nostro test. Se sovrapponi testo al canvas, richiedi pointer-events: none sul contenitore dell'overlay e pointer-events: auto sui pulsanti — altrimenti il livello di testo intercetta i trascinamenti e i clic destinati alla scena. 4. Il contenuto dell'overlay. Fornisci il testo esatto del titolo tra virgolette. I modelli riempiono il testo non specificato con slogan generici che dovrai comunque sostituire. 5. Limitazioni di prestazioni e dimensioni. Il numero di particelle, single quad, no postprocessing, oppure low-poly mantiene veloce la pagina; keep the code compact mantiene l'output entro i limiti di token dell'API — due dei nostri nove test sono falliti a causa di un limite di output prima ancora che emergesse qualsiasi problema di qualità del codice.

Lessico che spinge il modello verso un vero 3D invece di una piatta imitazione CSS: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. Le parole contano perché corrispondono a nomi reali di API, quindi il modello scrive in base alle librerie viste durante l'addestramento invece di improvvisare.

La scorciatoia per incollare il codice

Per effetti che vanno oltre ciò che riesci a descrivere, esiste una seconda tecnica. Trova un effetto Three.js completo su CodePen, incolla il codice grezzo nel tuo strumento AI e chiedi soltanto Add this 3D animation to the hero. Il modello traduce lo snippet nel tuo stack — componenti React, la tua configurazione di build, la struttura della tua sezione — che di solito è la parte noiosa. Builder.io ha documentato il trucco con un’animazione di un pianeta da 50.000 particelle, incluso lo stesso fix di stratificazione pointer-events: none, nella loro guida.

Questo è il percorso con il massimo effetto leva quando vuoi una finitura da sito premiato: la matematica dello shader proviene da un umano che l’ha rifinita, e l’AI si occupa solo dell’integrazione.

Quali strumenti utilizzano questi prompt

I sei prompt sopra sono indipendenti dallo strumento; qualsiasi cosa che scriva e visualizzi in anteprima HTML/JS li eseguirà. Le differenze tra gli strumenti riguardano il formato di output e la proprietà del codice (verificato il 17 luglio 2026):

Due di questi meritano una nota. La proposta di VULK è che genera vero codice React Three Fiber — scene WebGL interattive invece di un header video in loop — e i suoi siti vetrina lo confermano. Output di codice reale contro un header video è esattamente la distinzione da verificare prima di pagare per qualsiasi "AI 3D website builder." E se preferisci sfogliare prompt invece di scriverli, MotionSites mantiene una libreria categorizzata pensata per Lovable, Bolt, Cursor e Claude. Una parte è gratuita da copiare, il resto è disponibile dietro abbonamento:

Dove i prompt raggiungono il loro limite

Una domanda ricorrente nei thread di r/lovable e r/web_design è se il prompt giusto possa riprodurre siti come mont-fort.com o le pagine labs di Noomo Agency. La risposta onesta: non da un prompt da solo. Questi siti sono costruiti su modelli GLTF personalizzati, illuminazione art-directed e lavoro shader su misura — asset che un prompt testuale non può evocare. Ciò che un prompt ti fornisce sono la *meccanica* di quei siti (camere guidate dallo scroll, sfondi shader, movimento smorzato) con geometrie segnaposto. Sostituire un vero file di modello colma solo in parte quel divario, ma l'illuminazione, i materiali e i fallback per il mobile restano vero lavoro di design. Il fallimento del nostro fly-through del portfolio sopra è la stessa lezione in miniatura: più un prompt si avvicina a scene coreografate con più oggetti, più iterazione umana richiede.

Tre modalità di errore coprono la maggior parte delle generazioni difettose, ciascuna con una correzione in una riga:

• Schermo nero, nessun errore visibile. Di solito è un mismatch nell’import di un modulo ES/CDN. Prompt di correzione: Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps. (r128 è la versione che i nostri test hanno scelto spontaneamente, e funziona ancora; le versioni più recenti di Three.js hanno rimosso il percorso UMD, quindi il pinning evita il mismatch.)
• Fluidо su desktop, a scatti sui telefoni. Conteggi di particelle che andavano bene su un laptop. Prompt di correzione: Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• La scena 3D funziona ma nulla sulla pagina è cliccabile. Il canvas o un overlay sta intercettando gli eventi. Prompt di correzione: Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

E uno dai nostri test interni: il testo su una scheda 3D viene renderizzato specchiato. La camera sta guardando il retro del piano. Prompt per la correzione: Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

FAQ

Ci sono prompt gratuiti per siti web 3D?

Sì. I sei in questo post sono completi e gratuiti da copiare, e DocsBot e il livello gratuito di MotionSites offrono altro ancora. Le librerie a pagamento acquistano principalmente volume e varietà già testata, non un tipo di prompt diverso.

Questi prompt funzionano in Lovable o Bolt?

Sì, con un solo adattamento: elimina il requisito di "single-file HTML", poiché quelle piattaforme generano progetti React. Mantieni tutto il resto — il soggetto della scena, il motore del movimento, l'interazione e il vincolo di prestazioni si trasferiscono direttamente.

Ho bisogno di conoscere Three.js per utilizzare un prompt per un sito web 3D?

No per generare, un po’ per iterare. I prompt sopra incorporano il vocabolario necessario di Three.js. Sapere cos’è OrbitControls o uno shader di frammento aiuta a chiedere modifiche precise invece di rigenerare alla cieca.

Qual è il miglior strumento AI per un sito web 3D?

Per un effetto su un singolo file o una sezione hero, Claude direttamente: conservi il sorgente e paghi per token. Per un sito ospitato con backend, Lovable o Bolt nei loro piani gratuiti, oppure VULK se vuoi specificamente codice React Three Fiber esportato.

Un hero 3D comprometterà le prestazioni o la SEO?

Solo se glielo consenti. Mantieni il 3D in un'unica scena, aggiungi i guardrail mobile sopra e conserva il titolo e il testo del corpo in vero HTML sopra il canvas, come fanno tutti e sei i prompt. I crawler leggono il livello di testo e i Core Web Vitals dipendono soprattutto da cos'altro carica la pagina.