v0.dev: como criar clones de sites
O v0.dev da Vercel é uma das ferramentas mais subestimadas pra quem quer clonar designs com qualidade profissional. Gera componentes React prontos, usa shadcn/ui por padrão e integra
Por que isso é importante
O v0.dev da Vercel é uma das ferramentas mais subestimadas pra quem quer clonar designs com qualidade profissional. Gera componentes React prontos, usa shadcn/ui por padrão e integra direto no Next.js.
Galera, o v0.dev é provavelmente a ferramenta de IA pra frontend mais subestimada hoje. Enquanto todo mundo fala de Bolt.new e Cursor, o v0 da Vercel fica entregando componentes React de altíssima qualidade, usando shadcn/ui por padrão e gerando código que você realmente consegue usar em produção sem querer chorar.
A grande vantagem do v0 pra clonagem de sites é exatamente essa integração com shadcn/ui. Se o site que você quer clonar usa um design system moderno — cards, dialogs, tables, dropdowns — o v0 já sabe como estruturar isso com os componentes certos. O resultado é muito mais limpo do que código gerado do zero.
O que é o v0.dev da Vercel
v0.dev é um gerador de UI da Vercel que usa IA pra criar componentes React. Você descreve o que quer — ou manda uma imagem — e recebe componentes prontos em JSX, com Tailwind CSS e shadcn/ui. Não é um ambiente de desenvolvimento completo como o Bolt. É mais focado: você gera componentes, que depois integra no seu projeto.
Essa diferença importa. O v0 não vai gerar um projeto inteiro pra você rodar direto. Ele gera pedaços — um navbar aqui, uma section hero ali, um card de pricing — que você copia e usa onde quiser. Pra clonar sites, isso é ótimo porque você pode trabalhar seção por seção com muito mais controle.
O que o v0 entrega em cada geração
Código JSX limpo com componentes funcionais React.
Tailwind CSS com classes reais, não inline style.
Componentes shadcn/ui quando faz sentido (Button, Card, Dialog, etc.).
Código TypeScript por padrão.
Preview ao vivo no próprio v0.
Botão de copy direto — um clique e o código vai pro clipboard.
Como usar v0 para clonar componentes de sites
O processo no v0 é mais cirúrgico do que no Bolt. Em vez de tentar clonar a página inteira de uma vez, você vai por partes. Isso torna os resultados muito melhores e mais fáceis de ajustar.
Prompt engineering para designs fiéis
No v0, prompts descritivos e detalhados funcionam muito melhor do que prompts curtos. O modelo responde bem quando você descreve hierarquia visual, cores, espaçamentos e comportamentos. Veja a diferença:
Prompt fraco
Cria uma seção hero como o Stripe.
+ Prós
- • Rápido de digitar
− Contras
- • Resultado genérico
- • Pouca fidelidade ao original
- • Precisa de muitas iterações
Prompt forte
Cria uma seção hero com fundo escuro (#0A0A0A), headline em 72px em branco com gradiente roxo-azul nas últimas duas palavras, subtítulo em cinza (#888) com 20px, dois botões lado a lado — primário com fundo gradiente roxo e secundário outline branco — e partículas animadas sutis no fundo. Layout centralizado, max-width 800px.
+ Prós
- • Alta fidelidade
- • Menos iterações necessárias
- • Resultado utilizável na primeira geração
− Contras
- • Leva mais tempo pra escrever
Usando screenshots como referência
O v0 aceita imagens como input. Você pode colar uma screenshot diretamente no campo de prompt. O modelo analisa o visual e gera o componente correspondente. Dá pra combinar imagem e descrição de texto no mesmo prompt — e essa combinação dá os melhores resultados.
- Tire um screenshot da seção específica que quer clonar. Não mande a página inteira — foque em uma seção por vez.
- Cole a imagem no campo de prompt do v0 (Ctrl+V funciona diretamente).
- Adicione texto complementando a imagem: 'Recrie este componente. Fundo: #1E1E2E. Fonte: Inter. Adicione hover state nos cards com border rgba(255,255,255,0.1).'
- Gere e avalie. Se o layout geral estiver correto mas as cores erradas, peça ajuste específico nas cores.
- Para ajustes de CSS muito finos, edite diretamente o código gerado no editor do v0 antes de copiar.
3 exemplos práticos de clones com v0
Pra ficar concreto, aqui estão três situações reais onde o v0 entrega muito bem.
Navbar estilo Linear. O site do Linear tem aquela navbar minimalista com fundo semi-transparente, blur efeito glass e links simples. Prompt que funciona: 'Cria uma navbar React com position fixed, backdrop-blur, fundo rgba(0,0,0,0.5), logo à esquerda como texto, 4 links no centro com font-size 14px e cor #888, botão à direita com borda sutil. Sem sombra. Usa shadcn/ui quando necessário.' O v0 gera isso em uma rodada, com o efeito de blur funcionando corretamente.
Pricing cards estilo Vercel. Aqueles cards de plano com destaque no plano Pro, toggle mensal/anual e lista de features com checkmark. O v0 lida muito bem com isso porque já tem os componentes shadcn/ui de Card, Switch e Badge. Um prompt descrevendo os três planos com seus recursos resolve em uma geração.
Testimonials estilo Stripe. Grid de depoimentos com foto circular, nome, cargo e empresa. O v0 gera o grid responsivo corretamente e usa os componentes de Avatar do shadcn/ui. Resultado limpo e que vai direto pra produção.
v0 grátis vs pago — vale a assinatura?
No plano gratuito você tem um número de mensagens por dia. Suficiente pra testar, mas apertado pra trabalho real. O plano pago libera mais mensagens, modelos mais potentes e algumas features de integração com projetos Vercel.
Quando o plano gratuito basta
- Você está aprendendo e quer experimentar a ferramenta.
- Usa o v0 esporadicamente, não todo dia.
- Cria componentes simples que resolvem em 1-2 iterações.
- Tem projetos pessoais ou estudos, não trabalho de cliente.
Quando vale pagar
- Você usa v0 como parte do fluxo de trabalho diário.
- Faz clones de sites pra clientes — o tempo economizado paga o plano.
- Precisa de componentes complexos que exigem várias iterações.
- Quer acesso aos modelos mais recentes com melhor precisão visual.
Integrando o output do v0 no seu projeto Next.js
O output do v0 foi feito pra se encaixar em projetos Next.js com shadcn/ui. Se o seu projeto já usa essa stack, a integração é trivial. Se não usa, tem um passo a mais.
- Se seu projeto não tem shadcn/ui, instale com: npx shadcn@latest init. Siga o wizard de configuração.
- Copie o código gerado pelo v0.
- Cole no arquivo de componente correto no seu projeto. O v0 já formata como um componente React exportado — você só precisa do arquivo.
- Rode npx shadcn@latest add [component] para cada componente shadcn que o código importa mas você ainda não tem instalado.
- Ajuste os imports de caminho se necessário (o v0 usa @/components por padrão — verifique se seu tsconfig tem esse alias).
- Teste em dev. Em 99% dos casos funciona direto.
O v0 tem um botão de 'Add to codebase' que, se você conectar sua conta Vercel, faz push direto pra um repo. Funciona bem pra projetos hospedados na Vercel.
Se quiser ver os métodos completos de clonagem comparando v0 com outras abordagens, o guia principal do cluster cobre isso em detalhe. E pra clones que envolvem captura de screenshots inteiras de páginas, veja as ferramentas de screenshot-to-code que complementam bem o workflow com v0.
v0.dev é uma das poucas ferramentas de IA que gera código que você realmente usa sem ter vergonha. Não é perfeito — projetos muito incomuns ainda exigem bastante ajuste manual — mas pra clonar interfaces padrão do mercado de SaaS e produtos modernos, é o melhor que tem hoje.
Erros comuns ao usar v0 pela primeira vez
Tem uns padrões de erro que aparecem em quase todo mundo que começa a usar o v0. Vale conhecer antes pra não perder tempo.
O primeiro erro é tentar gerar a página inteira de uma vez com um prompt gigante. O v0 perde qualidade quando o escopo é grande demais. Melhor gerar navbar, hero e features como três componentes separados, depois compor no seu projeto.
O segundo é ignorar que o componente precisa dos pacotes shadcn instalados. O v0 gera código que importa Button, Card, Badge e outros do shadcn. Se você copiar o código sem instalar esses componentes, vai ter erros de import. Sempre verifique os imports antes de colar.
O terceiro é não usar a funcionalidade de fork. O v0 mantém histórico de gerações. Dá pra fazer fork de uma versão boa e continuar iterando sem perder o que estava certo. Muita gente não percebe essa feature e fica partindo do zero quando estraga alguma coisa.
Checklist pra usar v0 de forma eficiente
- Gere componentes separados, não páginas inteiras de uma vez.
- Leia os imports gerados e instale os pacotes shadcn necessários antes de colar.
- Use fork de versões boas antes de iterar — preserva o que estava certo.
- Combine screenshot + descrição de texto no mesmo prompt para resultados mais fiéis.
- Para ajustes de CSS muito finos, edite diretamente no editor do v0 antes de copiar.
- Se o primeiro resultado estiver longe do esperado, reformule o prompt com mais detalhes visuais.