Cos'è v0 e perché shadcn/ui conta
v0 è il generatore di codice AI di Vercel. Da un prompt in linguaggio naturale produce interfacce in React e Next.js: codice vero, non blocchi visivi da esportare a fatica.
La qualità dell'output nasce dallo stack: v0 genera componenti shadcn/ui, costruiti sui primitivi accessibili di Radix con pieno controllo sul codice. Accessibilità e comportamento sono solidi di default, e resta tutto modificabile.
La feature che cambia le carte è Browser Use: v0 non indovina com'è fatta una pagina, la apre davvero, la osserva e la ricostruisce. Sotto c'è agent-browser di Vercel Labs, che pilota il browser via Chrome DevTools Protocol.
Browser Use: clonare vercel.com in 4 step
Il modo migliore per capirlo è vederlo lavorare. Nella demo ho chiesto a v0 di clonare la sua stessa homepage. Ecco il flusso, dal prompt al React.
- 1
Apri v0 e autenticati
Vai su v0.app (o v0.dev). Con l’account gratuito hai crediti giornalieri: bastano per il lavoro esplorativo di clonazione e prototipazione.
- 2
Dai il prompt di clone
Scrivi qualcosa di semplice come «clone vercel.com». Questo attiva Browser Use: l’agente apre davvero la pagina invece di indovinare com’è fatta.
- 3
Guardalo lavorare
Segui i passi dell’agente: carica la pagina, cattura gli screenshot, analizza il DOM e genera i componenti. È tutto tracciabile, step by step.
- 4
Rivedi il React generato
Ottieni codice React/Next.js con Tailwind e shadcn/ui. È una base solida all’~80%, non una replica pixel-perfect: il 20% finale è il tuo lavoro di rifinitura.
Pensa a v0 come a un ambiente iterativo, non a un one-shot. Tiene il contesto del progetto: puoi rifinire con prompt successivi senza ripartire da zero.
Il prompt da copiare (e collegare le pagine)
Un buon prompt somiglia più a una issue tecnica ben scritta che a una chat: stack esplicito, obiettivo, vincoli e criteri di verifica. E puoi già chiedere una seconda pagina con il routing collegato.
Naviga su [URL DELLA LANDING] e clonala.
Stack: React, Next.js (App Router), Tailwind CSS, shadcn/ui.
Voglio codice vero e modificabile, non blocchi visivi.
Obiettivo: ricreare struttura, layout e gerarchia visiva della pagina
(hero, sezioni, navbar, footer) come punto di partenza per il MIO brand.
Non copiare loghi, testi o immagini originali: lasciali come placeholder.
Poi crea una seconda pagina [es. /pricing] coerente con lo stile,
e collega il bottone della hero a questa nuova pagina con il routing di Next.js.
Rendi tutto responsive e accessibile (usa i primitivi di shadcn/ui).Sostituisci le parti tra [parentesi] con i tuoi dati. Più sei specifico su stack, parametri numerici ed edge case, migliore è il risultato: il modello risponde ai dettagli, non alle richieste vaghe.
Dove Browser Use rende meglio
Non è uno strumento universale. Eccelle su pagine con struttura visiva chiara; fatica dove serve logica o stato applicativo.
- Landing page di marketing.
- Dashboard SaaS e pagine prodotto.
- Layout editoriali e sezioni statiche.
- Web app complesse con logica e stato: Browser Use cattura una singola foto, non il comportamento.
- Contenuti dietro login: l’agente non ci arriva.
- Componenti custom molto specifici: vanno ricostruiti a mano.
Il workflow giusto in un progetto reale: usa Browser Use per studiare i pattern e accelerare il prototipo, poi ricostruisci una versione originale con il tuo brand. Ottimo anche in combo con Figma come reference visiva.
Limiti reali e la regola etica
v0 non è magia: è un amplificatore. Ti porta all'80% in pochi minuti, ma il 20% finale (brand, copy, logica, rifinitura) resta lavoro tuo. Ed è esattamente lì che il tuo MVP smette di essere il clone di qualcun altro e diventa il tuo.
