Como criar um site com vibe coding: landing page em 10 prompts

Veja como criar um site com vibe coding: você descreve a página para uma ferramenta de IA em português simples, olha o que ela constrói e vai guiando com prompts curtos de acompanhamento até ficar certo, sem escrever código. O que separa um resultado genérico de uma página que conquista clientes é a ordem dos prompts. Abaixo está uma sequência de 10 prompts para uma landing page de uma página para o seu negócio, com o que conferir depois de cada um.

Se a ideia de vibe coding é nova para você, leia antes o que é vibe coding. Este guia é a sessão prática.

O que você precisa para este tutorial de vibe coding

Ao longo deste guia uso um exemplo inventado: um serviço de estética automotiva a domicílio que quer mais reservas de donos de carro da região. Troque pelo seu próprio negócio em cada passo.

Crie uma pasta vazia como detailing-landing, coloque o logo e as fotos em uma pasta images dentro dela e abra a pasta na aba Code (o guia rápido do desktop mostra onde fica cada coisa). Os prompts foram escritos para o Claude Code, mas funcionam no Lovable, no Bolt ou no v0 com pequenas mudanças de texto.

Os prompts para a landing page, em ordem

Prompt 1: faça a IA entrevistar você

Quero uma landing page de uma página para o meu negócio. Antes de
planejar qualquer coisa, me entreviste. Faça até 8 perguntas, uma por
vez, sobre os meus clientes, a minha oferta, o que nos diferencia, as
objeções que as pessoas levantam e a única ação que quero que os
visitantes tomem.

Uma boa entrevista soa assim:

O que conferir: as perguntas devem ser sobre os seus clientes, não sobre tecnologia. Responda com detalhes, porque as suas respostas viram a matéria-prima de cada seção.

Prompt 2: combine a estrutura

Com base nas minhas respostas, proponha a estrutura da página de cima
para baixo. Para cada seção, diga a função dela, um título provisório
e a prova que entra ali. Um objetivo só: conseguir uma reserva. Nada
de código ainda.

O que conferir: uma ordem sensata para um negócio de serviços é um título com botão de reserva, o que o cliente recebe, provas, como funciona, um preço inicial, perguntas frequentes que respondem às objeções e uma chamada final para ação. O botão de reserva deve aparecer mais de uma vez, e qualquer seção que não sirva ao objetivo único deve sair.

Prompt 3: construa a primeira versão

Aprove o plano e depois mude para o modo Manual ou Accept edits, porque o modo Plan não edita arquivos.

Construa o plano aprovado como index.html com um styles.css separado,
mobile primeiro. Use as fotos da pasta images. Onde faltar conteúdo
real, escreva TODO e uma nota curta em vez de inventar algo. Depois
abra a página no painel Browser para eu ver.

O que conferir: olhe primeiro na largura de um celular. Cada lacuna deve ser um TODO evidente, nunca um texto inventado.

Prompt 4: escreva os textos de verdade

Reescreva todos os textos para um [TIPO DE CLIENTE] ocupado lendo no
celular. Título: o que a pessoa recebe, em menos de 10 palavras. Use
as minhas respostas da entrevista, não frases genéricas. Frases curtas.
Se uma afirmação precisar de um número ou depoimento que não te dei,
mantenha um TODO e liste para mim.

O que conferir: leia em voz alta. Apague tudo que um concorrente poderia colar no site dele sem mudar nada.

Prompt 5: deixe com a cara da sua marca

Aplique a nossa marca: cor principal [CÓDIGO HEX], cor de destaque
[CÓDIGO HEX], logo em images/logo.png. A sensação deve ser [CALMA E
PREMIUM, OU VIBRANTE]. Texto grande e legível, bastante espaço, no
máximo duas fontes. Crie duas versões da seção do topo em arquivos
separados para eu comparar.

O que conferir: escolha uma e diga por quê. "A segunda, porque a foto mostra a van e o botão se destaca" ensina muito mais à IA do que "a segunda".

Prompt 6: conecte reservas e leads

Aponte cada botão de reserva para a minha página de agendamento:
[URL DA PÁGINA DE AGENDAMENTO]. Acrescente o formulário de cadastro
abaixo, da minha [FERRAMENTA DE E-MAIL OU DE FORMULÁRIOS], na seção de
contato. Não crie o seu próprio backend de formulário nem guarde dados.
[COLE AQUI O CÓDIGO DE INCORPORAÇÃO]

Prompt 7: revisão de celular e acessibilidade

Confira a página procurando problemas de celular e de acessibilidade
e corrija: texto com pouco contraste, áreas de toque pequenas, imagens
sem texto alternativo, títulos fora de ordem, campos de formulário sem
rótulo e qualquer coisa que não dê para usar com o teclado. Liste o
que você mudou.

O que conferir: o texto principal deve ter contraste de pelo menos 4,5 para 1 com o fundo, o nível WCAG AA para texto normal. Depois tente reservar no seu celular com um polegar só.

Prompt 8: velocidade e o básico de busca

Deixe a página rápida e fácil de encontrar: redimensione e comprima
cada imagem, use lazy-load nas imagens abaixo da primeira tela e
acrescente um título, uma meta description, tags Open Graph, um favicon
e dados estruturados LocalBusiness. Use só fatos que eu te dei.

Lazy loading significa que as imagens só carregam quando o visitante rola até perto delas, e as tags Open Graph controlam como o seu link aparece quando alguém compartilha em um app de mensagens. A configuração completa de busca, incluindo o Google Search Console, está em como criar um site com IA.

Prompt 9: faça a IA revisar o próprio trabalho

Revise esta página duas vezes: primeiro como um [TIPO DE CLIENTE]
desconfiado, depois como um revisor de sites rigoroso. Liste cada
problema: texto pouco claro, informação faltando, links quebrados, TODOs
esquecidos, afirmações sem prova e problemas de layout com 360px de
largura. Ordene por impacto. Não corrija nada ainda.

O que conferir: corrija os itens do topo, um por mensagem. Revisar de um ângulo diferente daquele em que construiu revela problemas que a construção deixou passar.

Prompt 10: prepare o lançamento

Prepare o lançamento: apague arquivos não usados, confira cada link,
acrescente uma página curta de privacidade que explique o que o
formulário coleta e para onde vai, e escreva um README explicando como
mudar preços, horários e telefone. Faça commit de tudo no Git com uma
mensagem clara.

A IA pode escrever o rascunho da página de privacidade, mas não pode assumir a responsabilidade legal por ela. Peça para conferirem o texto com as regras do lugar onde os seus clientes moram, como a LGPD no Brasil.

O checklist de revisão antes do lançamento

Publique a página

• Construída com o Claude Code: arraste a pasta para o Vercel Drop, ou peça ao Claude Code para publicar com a Vercel CLI (como o Vercel Drop funciona). O plano Hobby da Vercel é para uso pessoal e não comercial, então uma landing page de negócio vai no Pro, a US$ 20 por mês por licença de desenvolvedor (preços da Vercel).
• Construída no Lovable: clique em Publish no canto superior direito e depois em Publish de novo, e a página entra no ar em um endereço lovable.app. Edições posteriores só vão ao ar quando você clica em Publish changes (documentação de publicação do Lovable), e um domínio próprio exige um plano pago, a partir do Pro de US$ 25 por mês (planos do Lovable).
• Construída no Bolt ou no v0: os dois têm o próprio fluxo de publicação. O Bolt hospeda o site ele mesmo, e o v0 publica na Vercel.

Conectar o seu próprio domínio e avisar o Google sobre a página estão explicados passo a passo no guia de sites citado acima. Depois que estiver no ar, mande o link para algumas pessoas com o perfil do seu cliente e observe como elas usam, sem ajudar.

Quando a sessão sai dos trilhos

Para mais prompts prontos, veja os prompts e modelos para Claude Code. Permissões, modos e o desfazer são explicados com mais detalhes em como usar o Claude Code.

O que fazer agora

Rode os prompts 1 e 2 hoje. Eles só precisam da aba Code e do seu conhecimento sobre os seus clientes, e mostram rápido se a sua oferta está clara.

Construa e publique uma prévia antes de comprar um domínio ou gastar qualquer coisa com anúncios, e leia vibe coding é ruim? antes de acrescentar logins ou guardar dados de clientes. O curso Builders cobre com mais profundidade a psicologia do cliente por trás das landing pages e a conexão de captura de leads e pagamentos.