v0 Browser Use: come clonare una landing reale e trasformarla in codice React

Dentro AI Pratika Labs uno degli strumenti che usiamo più spesso per creare prototipi è v0 di Vercel, oggi disponibile anche come v0.app.

Perché ci interessa?

Perché v0 non è il solito generatore di paginette finte.

È uno strumento che prende una richiesta in linguaggio naturale e genera codice React, Next.js, Tailwind CSS e componenti basati su shadcn/ui.

Tradotto brutalmente: tu gli dici cosa vuoi costruire, e lui ti tira fuori una prima versione già abbastanza seria da cui partire.

Non perfetta.

Non magica.

Ma molto, molto utile.

Perché shadcn/ui è importante

Piccola parentesi, ma serve.

v0 funziona così bene anche perché sotto usa un ecosistema moderno: React, Next.js, Tailwind CSS e soprattutto shadcn/ui.

E shadcn/ui non è una component library classica.

Non è il pacchettone npm che installi e poi subisci.

È una collezione di componenti React che copi dentro il tuo progetto, costruiti sopra i primitives accessibili di Radix UI e stilizzati con Tailwind.

Quindi hai due vantaggi:

• accessibilità e comportamento già solidi;

• pieno controllo del codice, dello stile e dei design token.

Ragazzi, questa cosa è importante.

Perché il codice generato da v0 non è solo “carino da vedere”.

È codice che puoi aprire, modificare, rifinire e portare dentro un progetto vero.

Browser Use: la nuova funzione che cambia il gioco

La funzione più interessante rilasciata da v0 è Browser Use.

v0 @v0

Introducing v0 Browser Use. v0 can now open the apps it builds, use them, critique designs, debug complex flows, and fix things proactively. While it's working, v0 will send you screenshots of what it sees.

21:39 · 15 mag 2026 676 24

In pratica: v0 può navigare una pagina web reale, analizzarla e provare a ricostruirla come codice React.

Non stiamo parlando solo di “guarda uno screenshot e copia i colori”.

Sotto il cofano gira agent-browser, un progetto open source dei Vercel Labs, pensato per browser automation con agenti AI.

Il punto interessante è questo: agent-browser usa Chrome tramite Chrome DevTools Protocol e può produrre snapshot dell’ accessibility tree della pagina.

Detta semplice: non guarda solo i pixel.

Prova anche a capire la struttura semantica.

E questa struttura poi viene usata da v0 per ricomporre la pagina in componenti React, Tailwind e shadcn/ui.

Cosa puoi farci concretamente

Qui si apre un mondo.

Con Browser Use puoi usare un sito esistente come riferimento per:

• ricreare una landing page competitor;

• studiare un flow di onboarding;

• prototipare una pagina prodotto;

• reverse-engineerare una struttura visuale;

• trasformare un riferimento web in componenti React;

• creare una base per A/B test;

• accelerare design exploration e prototipazione.

Attenzione però.

Non significa “clona e pubblica tutto uguale”.

Quella è una pessima idea.

Significa: prendi una struttura, capisci un pattern, generi una base e poi la trasformi con il tuo brand, il tuo copy, i tuoi contenuti e il tuo design system.

Demo pratica: cloniamo vercel.com con v0

Abbiamo fatto una prova semplice, seguendo il flow della demo ufficiale.

Obiettivo: chiedere a v0 di analizzare vercel.com e ricreare una prima versione della landing.

Passo 1: entra su v0

Vai su v0.dev o v0.app e accedi.

Il piano gratuito ti dà crediti giornalieri sufficienti per qualche generazione esplorativa. Per un uso più intensivo, invece, serve valutare i piani a pagamento.

Una volta dentro, ti trovi davanti la classica barra di prompt.

Quello è il punto di partenza.

Passo 2: chiedi a v0 di clonare una landing

Nel prompt scriviamo una cosa volutamente semplicissima:

clone vercel.com

A questo punto v0 interpreta la richiesta e usa Browser Use per navigare la pagina.

Nella UI vedrai l’agente lavorare step by step.

Di solito il flow è qualcosa del genere:

• apre l’URL;

• cattura la pagina;

• analizza struttura e contenuto;

• produce screenshot e snapshot;

• genera i componenti React;

• compone la prima versione della pagina.

Questa trasparenza è molto utile.

Perché se qualcosa va storto, non hai solo “errore generico”.

Puoi capire a che punto della pipeline si è incastrato.

Passo 3: controlla il risultato generato

v0 ricrea la landing in modo abbastanza dettagliato.

Però dobbiamo capirci.

Non è una replica pixel-perfect.

E va bene così.

Gli elementi standard vengono replicati molto bene. Gli elementi super custom, invece, vengono spesso semplificati.

Esempio: se la landing originale usa animazioni WebGL, microinterazioni particolari, componenti custom o effetti molto specifici, v0 tende a ricondurli a primitive più semplici: card, button, grid, sezioni, navigation, hero, tabs, dialog, eccetera.

Per un prototipo è perfetto.

Per una replica da produzione serve un passaggio umano.

Quando la pagina è pronta, puoi pubblicarla cliccando il bottone in alto a destra.

Essendo dentro l’ecosistema Vercel, il deploy è praticamente immediato e viene creato un subdomain dedicato.

Nel nostro caso il risultato della demo è qui: clone vercel.

Passo 4: andiamo oltre la landing

Fin qui abbiamo clonato solo la home.

Ma se vogliamo costruire qualcosa di più serio, dobbiamo far lavorare v0 sul contesto del progetto.

Per esempio, possiamo chiedergli di creare anche una seconda pagina e collegarla alla landing.

Nel nostro test abbiamo usato la pagina della conferenza Vercel:

Adesso naviga alla pagina https://vercel.com/ship e clonala.

Non dimenticare di attaccare il link della nuova pagina al bottone "Get your ticket" della pagina di landing.

Qui succede una cosa interessante.

Non stiamo solo chiedendo:

“creami un’altra pagina”

Stiamo chiedendo due cose insieme:

1. naviga un nuovo URL e ricrea quella pagina;

2. modifica la landing già generata collegando il bottone alla nuova pagina.

Questo è il punto.

v0 non va usato solo come generatore one-shot.

Va usato come ambiente di iterazione.

Tu gli fai fare una prima versione, poi gli chiedi modifiche, nuove pagine, routing, componenti, sezioni, collegamenti.

E lui lavora mantenendo il contesto del progetto.

Dove Browser Use funziona meglio

Browser Use dà il meglio su siti con struttura chiara.

Per esempio:

• landing page marketing;

• pagine SaaS;

• dashboard;

• pagine prodotto;

• ecommerce semplici;

• sezioni pricing;

• pagine evento;

• pagine documentazione;

• layout editoriali.

Su questi casi, v0 riesce spesso a catturare bene gerarchia, sezioni, spacing, componenti e composizione generale.

Dove fa più fatica?

Su web app complesse, molto dinamiche, con contenuto dietro login, stato applicativo, dashboard vive o componenti fortemente custom.

Perché lì lo screenshot cattura solo uno stato.

Non tutta la logica.

Il modo giusto di usarlo in un workflow reale

Il workflow sensato non è:

“clono il sito e lo pubblico”.

No.

Il workflow serio è:

1. scegli un riferimento;

2. fai generare una base con Browser Use;

3. analizzi struttura e componenti;

4. sostituisci brand, copy e asset;

5. sistemi responsive e accessibilità;

6. migliori performance;

7. colleghi dati reali, form, CMS o backend;

8. fai deploy.

Così diventa utile davvero.

v0 ti fa risparmiare la parte noiosa: partire da zero.

Ma il valore lo metti tu.

Nel gusto.

Nella direzione.

Nella strategia.

Nel controllo finale.

Combo interessante: Browser Use + Figma

Una delle combinazioni più forti è usare Browser Use insieme alla Figma integration di v0.

Il ragionamento è questo:

• Browser Use ti aiuta a catturare struttura e layout da una pagina reale;

• Figma ti permette di portare dentro riferimenti più precisi di design system, componenti e stile visuale;

• v0 genera il codice React partendo da queste informazioni.

Quindi puoi usare Browser Use per dire:

“voglio una struttura simile a questa”

e Figma per dire:

“però con questo stile, questi componenti, questi pattern, questi colori”.

Questa combo, per prototipi rapidi, è veramente tanta roba.

Considerazioni finali

Browser Use è una di quelle funzionalità che, appena la provi, capisci subito dove va il mercato.

Non è ancora “premi un bottone e hai il sito perfetto”.

Per fortuna.

Però è già abbastanza potente da cambiare il modo in cui si fanno prototipi.

Prima vedevi una landing bella e dovevi ricostruirla a mano.

Ora puoi usarla come riferimento operativo.

v0 la naviga, la analizza, la ricompone, ti genera una prima versione in React e tu parti da lì.

Ragazzi, questo è il punto.

Non sostituisce il lavoro serio.

Sposta solo più avanti il punto di partenza.

Prima partivi da una pagina bianca.

Adesso parti da una bozza già strutturata.

E se sai cosa stai facendo, questa differenza pesa tantissimo.

Buon prototyping.