Gerador de Prompts
v0.
Entregue UI de produção mais rápido. Prompts estruturados para v0.dev com estados, preferências de stack e acessibilidade já configurados.
Funciona em v0.dev, Bolt.new, Lovable e Claude Artifacts. Grátis. Sem cadastro.
# Goal Generate a Landing page for: [descreva para que esta UI serve] # Structure Build a landing page with these sections in order: sticky nav, hero (headline + subhead + primary CTA + hero visual), social-proof logo strip, 3-column feature grid, one long-form feature block with image, testimonials, pricing or CTA section, footer. Everything responsive, mobile-first. # Style Style direction: Minimalista moderno (Linear, Vercel). Typography: sans-serif system stack unless the style calls for serif. Generous whitespace. Avoid cramped grids. # Stack & components Target stack: Next.js + Tailwind + shadcn/ui (padrão). Use shadcn/ui primitives (Button, Card, Input, Dialog, Table, Sheet) rather than raw elements. Import icons from lucide-react. # States Include a skeleton / spinner loading state for async data. Do not ship a flash of blank content. # Accessibility & quality - All interactive elements keyboard-accessible with visible focus states. - Text contrast meets WCAG AA (4.5:1 for body, 3:1 for large text). - Touch targets at least 44px on mobile. - Semantic HTML: header, nav, main, section, footer where appropriate. - No placeholder text like "Lorem ipsum". Use realistic, sensible copy in Portuguese when the audience is Brazilian.
Cole em v0.dev. A mesma estrutura funciona no Claude Artifacts, Bolt.new e Lovable com pequenos ajustes.
Anatomia do prompt
O que faz um prompt v0 virar UI pronta para produção.
Nomeie cada seção esperada, na ordem. 'Hero, strip de logos, grid de 3 colunas de features, feature longo, depoimentos, pricing, footer' é infinitamente melhor que 'landing page'.
UI só de happy path é demo. Loading, empty e error são o que vai pra produção. Diga ao v0 quais estados quer e ele renderiza todos.
'shadcn/ui + Tailwind + Next.js App Router' gera output diferente de 'React + Tailwind'. Trave a stack e o v0 para de inventar componentes que não compilam.
O fluxo
Da ideia ao deploy em três prompts.
- 1.Scaffold. Use o gerador para montar o prompt inicial. Cole no v0.dev. Você recebe uma UI estruturalmente completa com as seções, estados e stack corretos. Não é perfeita, mas é 70% do caminho.
- 2.Refine copy e layout. Segunda mensagem no v0: reescreva headlines na voz da marca, ajuste a tabela de pricing, mova os depoimentos para cima do grid de features. O v0 mantém contexto, então você só nomeia as mudanças.
- 3.Polimento de estados. Terceira mensagem: mostre o skeleton de loading que você quer, adicione a ilustração do empty state, refine a copy do erro. Depois clica em 'Add to codebase' e acabou.
Ferramentas relacionadas
Continue.
FAQ
Perguntas sobre prompts v0.
Por que prompts para v0 precisam ser diferentes de prompts gerais?+
O v0.dev é um gerador de UI, não um chatbot. Ele responde bem a três coisas: requisitos estruturais (quais seções, em qual ordem), especificidade de stack (shadcn/ui vs Tailwind puro vs Next.js App Router) e requisitos explícitos de estados (loading, empty, error). Um prompt genérico 'faça uma landing page' deixa tudo isso no chute. Um prompt estruturado acerta de primeira.
Por que o prompt final sai em inglês se a interface é em português?+
O v0.dev foi treinado com maior densidade de dados em inglês. A ferramenta deixa você descrever em português e entrega o prompt técnico em inglês, que é o idioma em que v0 performa melhor. A copy final da UI pode ser em português. Basta adicionar isso no campo 'Deve incluir' (ex.: 'All copy in Brazilian Portuguese').
Funciona com Claude Artifacts, Bolt.new e Lovable?+
Sim, com ajustes pequenos. A estrutura do prompt (Goal, Structure, Style, Stack, States, Must-include, Avoid, Accessibility) é agnóstica de modelo. v0 responde melhor com shadcn/ui. Bolt.new lida com Next.js full-stack. Lovable é otimizado para backends Supabase. Claude Artifacts faz tudo, mas não tem acesso a npm ou filesystem. Troque o campo 'Stack' conforme o destino.
Por que especificar estados empty e error?+
O que separa UI de produção de UI de demo são os estados que o usuário vê quando faltam dados ou algo quebra. Pedir happy path dá demo. Pedir loading, empty e error dá algo que você faz deploy. Custa uns 15% a mais de tempo de geração e poupa duas a três rodadas de 'mas e se…'.
Cor da marca importa?+
Ajuda. O v0 usa para CTAs primários, focus rings e estados ativos, não para fundos gigantes. Se sua marca já está na página que você está estendendo, passe o hex. Se está prototipando, deixe em branco e o v0 escolhe defaults.
Dá pra usar em prompts de refinamento, não só geração inicial?+
Sim. A mesma estrutura vale para 'v2'. Mantenha Goal, Structure, Style e Stack, e adicione uma seção 'Changes from v1' descrevendo o que modificar. O v0 guarda contexto entre mensagens.
É grátis?+
O gerador é 100% grátis, roda no navegador e não tem limite. Você ainda precisa de uma conta v0.dev (ou ferramenta equivalente) para gerar a UI. Os tiers de uso do v0 são controlados pela Vercel, não por nós.