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 acessibi