Como usar o v0 da Vercel? Tutorial, exemplos e prompts para UI

Por Lawrence Dauchy
Publicado em 4 de outubro de 2026

Para usar o v0 da Vercel, descreva a interface que você quer criar, gere uma primeira versão e refine o resultado com pedidos específicos. Comece com uma página ou um fluxo pequeno, teste as interações e só depois acrescente banco de dados, autenticação e outras integrações.

O resultado melhora quando você explica quem vai usar o produto, o que essa pessoa precisa fazer e como a tela deve se comportar. Pedir “um dashboard moderno” deixa muitas decisões em aberto. Descrever os conteúdos, os estados e a prioridade visual dá uma direção mais clara para a construção.

O que é o v0 da Vercel e para que ele serve?

O v0 é uma ferramenta de criação com inteligência artificial que transforma instruções em código e aplicações web. Você pode usá-lo para construir componentes, páginas e projetos com interface, dados e lógica de servidor. A documentação apresenta o Next.js como o caminho padrão para aplicações completas.

Para quem está começando, o uso mais fácil de avaliar é uma interface pequena: uma página de apresentação, um formulário ou um painel com dados fictícios.

Esses projetos têm limites claros. Você consegue comparar o pedido com o resultado, identificar o que falta e corrigir uma parte por vez.

Uma página de apresentação, por exemplo, pode precisar de:

• Um título que explique o produto.
• Uma descrição curta.
• Uma imagem ou demonstração.
• Uma ação principal.
• Uma seção de dúvidas.
• Um formulário de contato.

Já um painel exige decisões sobre navegação, filtros, conteúdo, permissões e atualização dos dados.

A diferença importa porque uma tela bonita pode esconder um fluxo incompleto. Um botão pode aparecer no lugar certo e ainda não executar nenhuma ação. Por isso, avalie aparência e comportamento separadamente durante a construção.

Como começar no v0 com um primeiro projeto?

Comece com uma tarefa que possa ser testada em poucos minutos. Uma lista de tarefas com criação, edição e conclusão de itens é um exercício mais útil do que tentar gerar um sistema inteiro no primeiro pedido.

Abra o v0, entre na sua conta e inicie uma conversa para o projeto. Antes de enviar o primeiro prompt, escreva uma definição curta do que você quer construir.

Defina o usuário e a ação principal

Considere um organizador para profissionais autônomos. A pessoa precisa visualizar os trabalhos da semana, adicionar uma tarefa e marcar o que terminou.

Essa descrição já ajuda a decidir quais elementos merecem destaque.

O botão para adicionar uma tarefa precisa estar visível. A lista deve mostrar título, prazo e situação. Configurações secundárias podem ficar em uma área menos chamativa.

Limite a primeira versão

Para o primeiro teste, use dados fictícios e comportamento local. Isso permite validar a interface antes de configurar serviços externos.

Também deixe explícito o que significa “funcionar”. Adicionar uma tarefa deve criar um item na lista. Concluir uma tarefa deve mudar sua situação. Filtrar deve alterar os itens exibidos.

Envie um prompt inicial completo

Crie uma aplicação web responsiva para profissionais
autônomos organizarem tarefas da semana.

A tela principal deve ter:
- Cabeçalho com o nome "Minha semana".
- Botão "Adicionar tarefa".
- Filtros: Todas, Pendentes e Concluídas.
- Lista de tarefas com título, prazo e situação.
- Formulário para criar e editar uma tarefa.
- Estado vazio com orientação para adicionar o primeiro item.

Use dados fictícios e estado local nesta primeira versão.
Ainda não conecte banco de dados ou autenticação.

Estilo:
- Fundo claro.
- Texto com bom contraste.
- Uma cor de destaque azul.
- Espaçamento confortável.
- Poucos elementos decorativos.

No celular, organize o conteúdo em uma coluna.
Todos os botões e filtros devem funcionar no protótipo.
Use textos em português do Brasil.

Depois da geração, faça o percurso principal completo. Crie um item, edite, conclua e teste os filtros. Anote os problemas antes de pedir alterações.

Como escrever prompts melhores para UI?

Um bom prompt de UI, ou interface do usuário, combina objetivo, estrutura, comportamento e critérios de qualidade. Adjetivos como “bonito” e “moderno” ajudam pouco quando aparecem sem decisões concretas.

Você não precisa escrever uma especificação longa para toda tela. Precisa fornecer informação suficiente para reduzir interpretações que atrapalham o resultado.

Explique a tarefa da pessoa

“Crie uma tela de clientes” é um pedido amplo. “Crie uma tela para uma equipe encontrar clientes pelo nome e consultar o histórico de atendimento” define uma tarefa.

A segunda versão sugere busca, identificação e acesso ao histórico. Também permite testar se a tela realmente facilita o trabalho.

Descreva a hierarquia visual

Diga qual informação deve chamar atenção primeiro.

Em uma página de produto, pode ser o nome, a imagem e a ação principal. Em um painel operacional, pode ser a fila de itens que exigem atenção.

Evite pedir destaque igual para tudo. Quando todos os cartões usam cores fortes e números grandes, fica difícil identificar a prioridade.

Inclua os estados da interface

Peça carregamento, ausência de resultados, erro e sucesso. Esses estados fazem parte do fluxo e precisam de textos claros.

Um formulário, por exemplo, deve explicar qual campo precisa de correção. Uma busca sem resultados deve oferecer uma forma de ajustar a consulta.

Estabeleça critérios verificáveis

Use instruções que possam ser conferidas:

Refine a interface com estes critérios:

- A ação principal deve estar visível ao abrir a página.
- Os campos precisam de rótulos permanentes.
- O foco do teclado deve ser visível.
- Mensagens de erro devem aparecer próximas ao campo.
- O layout deve funcionar em uma tela de 360 pixels.
- A informação não pode depender apenas de cor.
- Preserve as funcionalidades já implementadas.

A recomendação prática é transformar preferências em decisões observáveis. “Mais organizado” vira “reduza a quantidade de elementos no cabeçalho e agrupe filtros acima da lista”.

Como usar imagens de referência sem perder o controle do resultado?

Você pode anexar uma captura de tela e explicar quais características deseja aproveitar. O v0 analisa elementos visuais da imagem, como layout, cores e componentes, para orientar a geração.

A imagem, porém, não explica tudo. Ela não mostra necessariamente como um menu abre, o que acontece após salvar ou como a tela se adapta ao celular.

Por isso, acrescente instruções sobre comportamento e conteúdo.

Diga o que aproveitar

Escolha características específicas: proporção dos cartões, organização da navegação, densidade do conteúdo ou hierarquia tipográfica.

Também explique o que será diferente. Seu produto pode ter menos informações, outra ação principal ou uma identidade visual própria.

Use a imagem anexada como referência para:
- Organização da navegação lateral.
- Hierarquia dos títulos.
- Espaçamento entre cartões.
- Distribuição do conteúdo principal.

Adapte a interface para um organizador de tarefas.
Use identidade visual própria e textos em português.

Não reproduza logotipos, nomes de empresas ou conteúdo
da referência.

No celular, transforme a navegação lateral em um menu.
Inclua estados vazio, carregamento e erro.

Complete o que a imagem não mostra

Se existe um botão “Adicionar”, descreva o formulário que ele abre. Se há filtros, explique os critérios. Se aparecem números, indique se são dados fictícios ou resultados de um cálculo.

Não espere que a ferramenta deduza corretamente regras de negócio a partir da aparência.

Compare o resultado por partes

Avalie primeiro a estrutura. Depois revise tipografia, cores e detalhes.

Esse cuidado evita gastar tempo ajustando sombras em uma tela cuja navegação ainda está errada. Reaproveite padrões de organização e interação, mantendo marca, conteúdo e ativos próprios.

Quais exemplos e prompts funcionam para projetos diferentes?

Os melhores exemplos partem de uma ação concreta. Uma página de apresentação precisa explicar e encaminhar. Um painel precisa ajudar a acompanhar e decidir. Um formulário precisa coletar informações com clareza.

Página de apresentação de um serviço

Este prompt serve para testar mensagem, organização e contato:

Crie uma landing page responsiva para um serviço
de organização financeira para profissionais autônomos.

Objetivo:
Explicar o serviço e receber pedidos de contato.

Estrutura:
- Cabeçalho simples.
- Título direto sobre o problema resolvido.
- Descrição curta.
- Botão principal "Quero organizar minhas finanças".
- Seção com três etapas do atendimento.
- Lista do que está incluído.
- Perguntas frequentes.
- Formulário com nome, email e mensagem.

Estilo:
Fundo claro, títulos escuros e destaque verde.
Use composição discreta, com poucos efeitos.

Não invente depoimentos, clientes, resultados ou selos.
Na primeira versão, simule o envio do formulário
e identifique claramente essa simulação.

Depois, verifique se a página explica o serviço sem depender de uma conversa. Confira também se o formulário informa corretamente quando o envio é apenas demonstrativo.

Painel de atendimento

Um painel deve ajudar a encontrar o próximo trabalho:

Crie um painel web para uma equipe acompanhar
solicitações de atendimento.

Inclua:
- Navegação com Solicitações e Configurações.
- Indicadores de solicitações abertas e resolvidas.
- Busca por nome ou assunto.
- Filtro por situação.
- Lista de cartões com assunto, cliente e responsável.
- Painel de detalhes ao selecionar uma solicitação.

Use dados fictícios identificados como demonstração.
Busca, filtros e seleção devem funcionar.

Organize a interface para leitura rápida.
No celular, mantenha os filtros acessíveis
e abra os detalhes em uma visualização adequada.

Teste o painel com assuntos longos e listas vazias. Esses casos revelam problemas que os exemplos curtos costumam esconder.

Formulário de cadastro

O formulário precisa explicar o que será enviado:

Crie um formulário de cadastro para um evento.

Campos:
- Nome completo.
- Email.
- Categoria de participação.
- Necessidades de acessibilidade, opcional.

Comportamento:
- Validar os campos obrigatórios.
- Exibir erros próximos aos campos.
- Preservar os dados se o envio falhar.
- Desabilitar o botão durante o envio.
- Mostrar confirmação após sucesso.

Use rótulos visíveis e navegação por teclado.
Nesta etapa, simule o envio sem armazenar dados reais.

Nos três exemplos, o prompt define um resultado que pode ser testado. Essa clareza facilita tanto a geração inicial quanto as correções seguintes.

Como refinar a interface sem desfazer o que já funciona?

Refine uma categoria de problema por vez e identifique exatamente o que deve mudar. Antes de uma alteração maior, mantenha uma versão recuperável do projeto.

Pedidos vagos tornam a revisão difícil. Se você pede “melhore tudo”, pode receber novas cores, outra navegação e mudanças nos componentes ao mesmo tempo.

Corrija estrutura antes de acabamento

Comece por conteúdo, navegação e organização. Depois ajuste espaçamento, tipografia e cores.

Uma interface pode parecer desorganizada porque mostra informação demais, e não porque precisa de outra fonte.

Altere apenas a organização do cabeçalho.

Mantenha o título à esquerda.
Posicione a ação principal à direita.
Agrupe os filtros abaixo do cabeçalho.

Preserve cores, componentes e comportamento existentes.
No celular, permita que o botão ocupe a largura disponível.

Descreva o problema reproduzível

Quando algo falhar, informe a ação, o resultado atual e o resultado esperado.

Ao criar uma tarefa com título longo, o cartão
ultrapassa a largura da tela no celular.

Corrija a quebra do texto e o comportamento do layout.
O título deve permanecer legível.
Preserve edição, conclusão e filtros.
Não reduza o tamanho da fonte para esconder o problema.

Peça uma verificação depois da mudança

Após corrigir, repita o caminho que falhou. Teste também uma funcionalidade relacionada.

Se a alteração foi no cartão, confira edição e seleção. Se foi no formulário, teste campos vazios, envio e mensagens de erro.

Esse método cria uma sequência clara: observar, corrigir e verificar. Você consegue saber qual pedido resolveu o problema e perceber quando uma mudança introduziu outra falha.

Como conectar dados, revisar o código e publicar?

Conecte serviços externos depois de validar o fluxo principal. O v0 oferece integrações e um caminho de publicação na Vercel, mas a configuração precisa corresponder ao comportamento real da aplicação.

Defina o que deve persistir

Persistência significa manter os dados depois que a sessão termina.

No organizador de tarefas, isso pode incluir título, prazo, situação e usuário responsável. Antes da integração, decida quem pode criar, consultar e modificar cada item.

Um pedido útil é:

Prepare a persistência das tarefas.

Antes de implementar:
- Liste os dados que precisam ser armazenados.
- Explique como cada tarefa será associada ao usuário.
- Identifique as regras de acesso necessárias.

Depois, implemente a integração escolhida.
Inclua tratamento de carregamento e falha.
Não apresente dados fictícios como dados reais.

Revise a configuração

Confira quais variáveis de ambiente são necessárias e em qual ambiente serão usadas. Segredos devem ficar na configuração apropriada do servidor, fora do código enviado ao navegador.

Teste com contas diferentes quando houver dados individuais. Verifique se cada pessoa acessa apenas o conteúdo permitido.

Inspecione o código

Peça uma explicação dos arquivos principais e procure lógica duplicada, componentes excessivamente grandes e dependências desnecessárias.

A explicação ajuda a entender o projeto, mas precisa ser acompanhada de execução. Abra as telas, teste as ações e confira os erros.

Publique e repita os testes

Depois da publicação, execute o fluxo completo no ambiente publicado. Confira formulários, navegação, carregamento e acesso aos dados.

Existe uma limitação clara: geração de código e prévia visual não garantem qualidade de produção. Para fluxos críticos, regras complexas ou informações sensíveis, acrescente revisão técnica e testes específicos antes de disponibilizar o produto aos usuários.

Em resumo: como usar o v0 com um fluxo consistente

Use o v0 em etapas: defina uma tarefa, gere a primeira interface, teste o comportamento e refine com pedidos pequenos. Acrescente integrações quando a estrutura estiver clara e revise novamente após publicar.

Para começar, escolha uma única tela com uma ação verificável. Uma lista com filtros ou um formulário com validação já oferece material suficiente para aprender a orientar a ferramenta.

Guarde o prompt inicial e registre as decisões importantes do projeto. Assim, pedidos futuros podem preservar nomes, padrões visuais e funcionalidades.

O trabalho mais útil acontece entre as gerações: observar o resultado, identificar uma falha concreta e formular a próxima correção. É isso que transforma uma interface promissora em um fluxo que as pessoas conseguem usar.

Perguntas frequentes (FAQ)

Como usar o v0 da Vercel pela primeira vez?

Entre na sua conta, inicie uma conversa e descreva uma interface pequena com objetivo, conteúdo e comportamento. Peça dados fictícios para a primeira versão e teste todas as ações antes de acrescentar integrações. Um organizador de tarefas é um bom exercício porque permite verificar criação, edição, conclusão e filtros sem começar com regras complexas.

Preciso saber programar para usar o v0?

Você pode começar descrevendo o projeto em linguagem natural. Conhecimento de programação ajuda a revisar o código, interpretar erros e manter a aplicação. Para aprender, use projetos pequenos e peça explicações sobre os arquivos alterados. Quando o produto envolver dados reais ou regras importantes, inclua revisão técnica além da avaliação visual.

Posso escrever prompts em português?

Você pode escrever os pedidos em português e solicitar textos da interface em português do Brasil. Especifique os nomes das ações, os campos e o tom das mensagens. Depois, revise menus, erros e confirmações para evitar mistura de idiomas. Também confira datas, números e termos usados pelo público do produto.

Qual é o melhor prompt para criar uma UI?

O melhor prompt define quem usa a tela, qual tarefa precisa concluir e quais elementos sustentam essa tarefa. Inclua conteúdo, hierarquia visual, comportamento no celular e estados de erro ou ausência de dados. Uma descrição concreta permite avaliar o resultado. Adjetivos isolados, como “moderno” ou “elegante”, deixam decisões importantes sem orientação.

A aplicação está pronta quando funciona na prévia?

A prévia é uma etapa de validação. Antes de publicar para usuários, teste os fluxos completos, a persistência, as permissões e a configuração do ambiente. Depois da publicação, repita os testes. Um protótipo pode usar dados fictícios ou ações simuladas, então confirme quais partes estão realmente conectadas e operacionais.