Como Criar Site com o v0 da Vercel (Grátis)

O v0 da Vercel virou uma das ferramentas de IA mais comentadas entre desenvolvedores e designers. Ele gera interfaces completas a partir de descrições em texto — landing pages, dashboards, portfólios, formulários. Tudo com código limpo e visual profissional.

Mas tem um detalhe que pouca gente fala: o v0 gera React e Tailwind CSS por padrão. Se você quer publicar um site simples, sem framework, sem build, sem deploy complexo, precisa saber como extrair o HTML estático do que ele gera.

Neste guia, vamos do zero ao site publicado. Você vai aprender a usar o v0, extrair HTML puro, e colocar seu site no ar de graça — tudo sem escrever uma linha de código por conta própria.

O que o v0 consegue criar

O v0 (acessível em v0.dev) é uma ferramenta de IA da Vercel que transforma descrições em texto em componentes de interface funcionais. Ele usa modelos de linguagem treinados especificamente para gerar código frontend.

Na prática, ele consegue criar:

Landing pages completas — com hero section, features, depoimentos, pricing e CTA
Portfólios profissionais — com galeria de projetos, bio e links de contato
Dashboards e painéis — com gráficos, tabelas e cards de métricas
Formulários e interfaces de cadastro — com validação e estados de loading
Componentes isolados — navbars, footers, modais, cards, sidebars
Páginas institucionais — sobre, serviços, equipe, FAQ
Cardápios e catálogos — com imagens, categorias e preços
Páginas de evento — com countdown, agenda e inscrição

O v0 se destaca pela qualidade visual. Como ele usa Tailwind CSS e shadcn/ui por padrão, os resultados saem com um visual moderno, responsivo e consistente. Não é aquele HTML cru dos anos 2000 — é interface de produto real.

O que ele não faz diretamente:

E-commerce com carrinho e pagamento
Aplicações com banco de dados e autenticação
Sites com CMS (tipo WordPress)
Apps mobile nativos

Para a grande maioria dos casos — landing pages, portfólios, sites one-page — o v0 resolve com sobra.

Como usar o v0 passo a passo

Vamos ao prático. O processo é simples, mas alguns detalhes fazem diferença no resultado.

1. Acesse o v0.dev

Entre em v0.dev e faça login com sua conta da Vercel (ou crie uma — é grátis). O plano gratuito permite gerar componentes sem custo, com limite de mensagens por dia.

2. Descreva o que você quer

No campo de prompt, descreva o site que você quer criar. Quanto mais detalhes, melhor o resultado. Não precisa ser técnico — escreva como se estivesse explicando para um designer.

Aqui vai um exemplo de prompt detalhado para uma landing page SaaS:

Crie uma landing page completa para um SaaS chamado "TaskFlow" que
ajuda equipes remotas a gerenciar projetos. A página deve ter:

1. Hero section com título grande, subtítulo explicativo e dois botões
   (Comece Grátis e Ver Demo)
2. Seção de logos de empresas clientes (pode usar placeholders)
3. Seção de 3 features com ícones, título e descrição para cada
4. Seção de como funciona em 3 passos com ilustrações simples
5. Seção de depoimentos com 3 cards (foto, nome, cargo, texto)
6. Seção de pricing com 3 planos (Free, Pro, Enterprise) em cards
7. FAQ com 5 perguntas expansíveis (accordion)
8. Footer com links organizados em colunas

Use cores azul e branco como paleta principal.
O design deve ser moderno, limpo e profissional.
Totalmente responsivo para mobile.

Esse nível de detalhe ajuda o v0 a gerar algo muito próximo do que você imaginou, sem precisar de muitas iterações.

3. Itere no resultado

O v0 vai gerar uma preview do componente. Você pode:

Pedir ajustes no chat: "mude a cor do botão para verde", "adicione mais um depoimento", "troque o título do hero"
Solicitar versões alternativas: "me de 3 opções de hero section"
Refinar progressivamente: comece com a estrutura geral e vá refinando seção por seção

Cada iteração gera uma nova versão. Você pode voltar para versões anteriores se preferir.

4. Explore a preview

O v0 mostra uma preview interativa do componente gerado. Você pode redimensionar a janela para ver como fica em diferentes telas (desktop, tablet, mobile). Use isso para verificar se o layout responsivo está funcionando corretamente.

5. Acesse o código

Clique em "Code" para ver o código-fonte. Por padrão, o v0 gera código React com Tailwind CSS e componentes do shadcn/ui. Se você é desenvolvedor e usa Next.js, pode copiar direto para seu projeto.

Mas se você só quer um site simples para publicar rapidamente, o próximo passo é o mais importante deste guia.

Como extrair HTML estático do v0

Essa é a parte que diferencia este guia de qualquer outro tutorial sobre o v0. A ferramenta gera React por padrão, mas você não precisa saber React para usar o resultado. Existem duas abordagens.

Abordagem 1: Pedir HTML direto no prompt

A forma mais simples. Depois que o v0 gerou o componente React, envie uma nova mensagem:

Agora exporte isso como um único arquivo HTML com todo o CSS inline
ou em uma tag <style>. Não use React, não use Tailwind classes.
Gere HTML puro, semântico e responsivo. Inclua todo o JavaScript
necessário dentro de tags <script>.

O v0 vai reescrever o componente como HTML estático. O resultado normalmente é um arquivo completo que você pode salvar como index.html e abrir no navegador.

Dica: se o v0 ainda incluir classes Tailwind, adicione ao prompt: "use CSS puro, sem nenhuma dependência externa". Ele vai substituir as classes por estilos CSS tradicionais.

Abordagem 2: Capturar o HTML renderizado da preview

Se o resultado do prompt em HTML não ficou bom, ou se você quer manter exatamente o visual da preview, pode capturar o HTML renderizado:

No v0, abra a preview do componente em tela cheia
Clique com o botão direito e selecione "Inspecionar" (ou Ctrl+Shift+I)
No DevTools, vá até o elemento <body> ou o container principal
Clique com o botão direito no elemento e selecione "Copy > Copy outerHTML"
Cole em um arquivo index.html
Adicione as tags <!DOCTYPE html>, <html>, <head> e os links de CSS necessários

Essa abordagem exige um pouco mais de trabalho manual, mas garante que o visual seja idêntico à preview.

Abordagem 3: Usar o v0 como ferramenta de design e reescrever

Uma terceira opção é usar o v0 como ponto de partida visual. Gere o componente no v0, tire um screenshot, e use outra IA (como o ChatGPT ou Claude) para recriar aquele design em HTML puro. O prompt seria algo como:

Recrie este design como HTML estático com CSS. [anexar screenshot]
Mantenha o layout, cores e tipografia idênticos.
Use HTML semântico e CSS responsivo.

Essa abordagem funciona bem quando você quer o visual do v0 mas precisa de mais controle sobre o código.

v0 vs Bolt.new vs Lovable: comparativo

O v0 não é a única ferramenta de IA para criar interfaces. Veja como ele se compara com os principais concorrentes:

Característica	v0 (Vercel)	Bolt.new	Lovable
Foco principal	Componentes UI/React	Apps full-stack	Apps full-stack
Linguagem padrão	React + Tailwind	React/Vue/Svelte	React + Tailwind
Gera HTML puro?	Via prompt adicional	Sim, diretamente	Via prompt adicional
Preview ao vivo	Sim	Sim, com editor	Sim, com editor
Plano gratuito	Sim (limitado)	Sim (limitado)	Sim (limitado)
Qualidade visual	Excelente	Boa	Muito boa
Deploy integrado	Via Vercel	Via Bolt	Via Lovable
Complexidade	Médio (foco em UI)	Alto (full-stack)	Alto (full-stack)
Melhor para	Landing pages, UI	Apps completos	Apps completos
Iteração por chat	Sim	Sim	Sim

Quando escolher o v0: você quer um visual excelente para uma landing page, portfólio ou interface isolada. O v0 brilha na qualidade do design e na consistência dos componentes.

Quando escolher o Bolt.new: você precisa de um app completo com backend, banco de dados e autenticação. O Bolt gera projetos full-stack prontos para deploy.

Quando escolher o Lovable: similar ao Bolt, mas com foco em prototipação rápida e iteração visual. Bom para MVPs.

Para sites estáticos simples — que é o foco deste guia — o v0 tende a entregar o melhor resultado visual com menos esforço.

Como publicar o site do v0

Você gerou o HTML, está bonito, está responsivo. Agora precisa colocar no ar. Existem duas situações:

Se você exportou como HTML estático

Se você seguiu a seção anterior e tem um arquivo index.html (com CSS e JS embutidos ou em arquivos separados), a publicação é imediata:

Acesse o Htmly
Arraste seu arquivo HTML para a área de upload (ou clique para selecionar)
Em menos de 10 segundos, você recebe um link compartilhável

Seu site fica disponível em um subdomínio como seusite.htmly.com.br, com HTTPS, sem configuração de servidor, sem domínio para comprar. E grátis.

Se você tem mais de um arquivo (HTML + CSS + JS + imagens), coloque tudo em um ZIP e faça o upload do ZIP. O Htmly extrai automaticamente e serve todos os arquivos.

Antes de publicar, você pode usar o HTML Preview para verificar como o site vai ficar — cole o código e veja o resultado instantaneamente no navegador.

Se você quer usar o deploy da Vercel

O v0 também permite fazer deploy direto na Vercel, mas isso requer:

Conta na Vercel
Conhecimento básico de React e Next.js
Configuração de projeto (dependências, build, etc.)

Para quem não é desenvolvedor, essa rota é desnecessariamente complicada. Se você só quer um site no ar rapidamente, a abordagem de exportar HTML e publicar no Htmly é muito mais simples. Veja a comparação completa entre Htmly e Vercel para entender as diferenças.

Dicas avançadas

Para tirar ainda mais do v0, essas técnicas fazem diferença.

Use screenshots como referência

O v0 aceita imagens como input. Se você tem um mockup, wireframe ou até um screenshot de um site que você gosta, pode anexar junto com o prompt:

Recrie este design [imagem anexada] como uma landing page moderna.
Mantenha a estrutura e o layout, mas use uma paleta de cores
em tons de roxo e branco.

Isso reduz drasticamente o número de iterações necessárias. O v0 consegue interpretar layouts visuais com boa precisão.

Itere por seção, não pela página inteira

Em vez de pedir a página completa de uma vez e depois tentar ajustar, gere cada seção separadamente:

Gere o hero section e refine até ficar perfeito
Gere a seção de features
Gere a seção de depoimentos
Gere o footer

Depois, combine tudo em um único arquivo HTML. Esse método da mais controle sobre cada parte e evita que ajustes em uma seção quebrem outra.

Combine com templates prontos

Outra abordagem eficiente: use o v0 para gerar componentes específicos e insira-os em um template HTML pronto. Por exemplo, gere um hero section diferenciado no v0 e substitua o hero do template. Você ganha a estrutura sólida do template com a criatividade do v0.

Peça responsive desde o início

Inclua no seu prompt inicial que o site deve ser responsivo. Se você esquecer, o v0 pode gerar algo que só funciona bem em desktop. Adicione algo como:

O design deve ser totalmente responsivo.
Em mobile, as colunas devem empilhar verticalmente.
O menu deve virar um hamburger menu em telas menores que 768px.

Use o v0 para resolver problemas de CSS

Mesmo que você já tenha um site pronto, o v0 é ótimo para resolver problemas de layout. Cole seu HTML no prompt e peça:

Este é meu site atual. O footer não está ficando no final da página
quando o conteúdo é curto. Corrija o CSS para que o footer sempre
fique no bottom, usando flexbox.

Ele vai analisar seu código e sugerir correções específicas.

Exporte com dark mode

Se você quer impressionar, peça para o v0 gerar com suporte a dark mode:

Adicione suporte a dark mode usando prefers-color-scheme.
Quando o usuário estiver com o sistema em modo escuro,
o site deve trocar para fundo escuro e texto claro automaticamente.

Isso funciona especialmente bem quando você exporta como HTML com CSS puro — o @media (prefers-color-scheme: dark) não depende de nenhum framework.

Perguntas frequentes

O v0 é gratuito?

Sim, o v0 tem um plano gratuito que permite gerar componentes e iterar sobre eles. O plano gratuito tem limite de mensagens por dia, mas para criar um site simples, geralmente é suficiente. Planos pagos oferecem mais geração de componentes e recursos adicionais.

Preciso saber programar para usar o v0?

Não. Você descreve o que quer em linguagem natural e o v0 gera o código. Para exportar como HTML estático, basta seguir as instruções deste guia. Conhecimento de programação ajuda a refinar o resultado, mas não é requisito.

O v0 gera sites responsivos?

Sim, especialmente se você mencionar isso no prompt. Como ele usa Tailwind CSS por padrão, os componentes já vêm com classes responsivas. Quando você exporta para HTML puro, precisa verificar se as media queries foram incluídas corretamente.

Posso usar o v0 para criar um site comercial?

Sim. O código gerado pelo v0 é seu — você pode usar para qualquer finalidade, incluindo projetos comerciais. Não há restrições de licença sobre o output gerado.

O v0 substitui um web designer?

Para sites simples e landing pages, ele resolve muito bem e pode substituir a contratação de um designer para projetos básicos. Para projetos complexos com identidade visual elaborada, interações sofisticadas ou requisitos de acessibilidade rigorosos, um profissional ainda faz diferença. O v0 funciona melhor como ponto de partida — um rascunho avançado que você pode refinar.

Crie seu site agora

O v0 da Vercel é uma ferramenta poderosa para quem quer transformar uma ideia em interface visual rapidamente. A qualidade do design que ele entrega é genuinamente impressionante, especialmente para landing pages e portfólios.

O caminho mais rápido do v0 para o site publicado:

Descreva seu site no v0.dev
Itere até ficar satisfeito com o visual
Exporte como HTML estático (via prompt ou captura do HTML renderizado)
Arraste o arquivo para o Htmly e receba seu link

Em menos de 15 minutos, você sai de uma ideia para um site publicado na internet, com link compartilhável e HTTPS. Sem servidor, sem domínio, sem complicação.

Se você quer explorar outras IAs para criar sites, veja nosso guia completo sobre como usar IA para criar sites — cobrimos ChatGPT, Claude, Gemini e mais. E para quem quer começar com algo mais simples, temos templates prontos que você pode personalizar em poucos cliques.

Leia também: