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

Como criar um site com vibe coding no Claude: o que você precisa

Ao longo deste guia uso um exemplo inventado que construímos de verdade enquanto escrevíamos: o Sunrise Yoga, um pequeno estúdio que quer mais primeiras reservas de pessoas que trabalham sentadas o dia todo. Troque pelo seu próprio negócio em cada passo. A mesma sequência funciona para um portfólio ou site pessoal se você trocar a reserva pela única ação que você quer.

Crie uma pasta vazia como studio-site, 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). Essa é toda a preparação de que você precisa para criar um site para a sua empresa com IA sem programar.

Os prompts foram escritos para o Claude Code, mas funcionam no Lovable, no Bolt ou no v0 com pequenas mudanças de texto, e em outros agentes de programação como OpenAI Codex, Cursor ou Google Antigravity, onde só mudam os nomes dos modos. Para comparar essas ferramentas, veja as melhores ferramentas de vibe coding, ou Claude Code vs Cursor se você está escolhendo entre um agente e um editor de código com IA.

Dá para criar um site com vibe coding de graça?

Sim, para um rascunho. Lovable, Bolt e v0 têm planos gratuitos, mas cada um limita quanto você pode construir por dia ou por mês, e uma página no seu próprio domínio exige um plano pago. O Claude Code não tem plano gratuito: ele vem com o Claude Pro ($20 por mês, ou $17 por mês na cobrança anual) e os planos acima (preços do Claude).

Os preços vêm das páginas oficiais do Lovable, do Bolt, do v0 e da Vercel, conferidas em outubro de 2026.

Até onde um plano gratuito leva você? A página de preços do Lovable lista "Build me a landing page, use images" a 1,70 crédito e pequenas edições a partir de meio crédito, então os 5 créditos diários cobrem um primeiro rascunho e algumas correções. Espalhe os dez prompts por alguns dias, ou faça upgrade na semana antes do lançamento.

Os prompts de landing page com vibe coding, em ordem

Estes prompts de landing page para o Claude são feitos para mandar um por vez. Cole um, leia a resposta e só siga em frente quando a checagem embaixo dele passar.

O nosso guia do modo de planejamento do Claude Code cobre as opções de aprovação e os outros modos com mais profundidade.

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.

Rodamos todos os prompts deste guia de verdade, no Claude Code, para um estúdio inventado chamado Sunrise Yoga. Foi assim que o prompt 1 começou:

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.

Na nossa rodada ele também olhou as fotos antes de planejar, e pegou um problema que uma pessoa deixaria passar fácil:

Prompt 3: construa a primeira versão

Aprove o plano com Yes, manually approve edits: o Claude Code muda para Manual, então você aprova cada mudança. No app de desktop, depois de aprovar, mude o seletor para Manual ou Accept edits (as edições de arquivo passam, os outros comandos ainda perguntam), 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.

No modo Manual, o Claude Code mostra cada arquivo antes de escrever e espera a sua resposta:

Cerca de três minutos depois, a primeira versão estava pronta. Aqui está ela na largura de um celular, com o botão de reserva fixo na parte de baixo da tela:

A parte mais útil foi a mensagem final. Em vez de inventar depoimentos, um endereço ou horários de aula, ela listou cada lacuna para preenchermos:

O que conferir: olhe primeiro na largura de um celular. Cada lacuna deve ser um TODO evidente, nunca um texto inventado. Na aba Code, a página abre no painel Browser; se não abrir, clique no caminho do index.html no chat.

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".

Por que sites feitos com vibe coding parecem todos iguais?

Porque, sem direção específica, as ferramentas de IA voltam aos layouts que mais viram: um título centralizado sobre um degradê, uma fileira de cartões com ícones e uma faixa genérica de depoimentos. As suas próprias fotos, cores fixas da marca e um site de referência com um motivo concreto ("uma foto grande com o botão por cima") são o que quebram esse padrão. Se o rascunho ainda parecer um template, mande isto:

Tire os degradês decorativos, os ícones de banco de imagens e as formas
de enfeite. Use as nossas fotos reais em tamanho grande, uma cor de
destaque e mais espaço em branco. Depois me diga qual seção ainda parece
um template e por quê.

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. Confira qualquer par de cores você mesmo colando os dois códigos hex no verificador de contraste gratuito da WebAIM:

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 seu próprio domínio e 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

Como publicar um site feito com vibe coding

Publicar significa colocar os seus arquivos em uma hospedagem para que qualquer pessoa abra a página em um endereço público. Como fazer depende de onde você construiu:

• Construído com o Claude Code: vá em vercel.com/drop, arraste a pasta do projeto para a página, escolha uma equipe e um nome de projeto e clique em Deploy (como o Vercel Drop funciona). Você também pode pedir ao Claude Code para publicar com a Vercel CLI. O plano gratuito Hobby da Vercel é para uso pessoal e não comercial, então uma landing page de negócio vai no Pro, a $20 por mês por licença de desenvolvedor.
• Construído no Lovable: clique em Publish no canto superior direito, ao lado de Share, e depois em Publish de novo. O Lovable roda uma verificação rápida de segurança 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).
• Construído no Bolt ou no v0: o Bolt hospeda o site ele mesmo, com a marca do Bolt no plano gratuito, e o v0 publica na Vercel, onde vale a mesma regra do Hobby e do Pro.

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

Problemas comuns e soluções

Para mais prompts prontos, veja os prompts e modelos para 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 passe pelo checklist de segurança citado acima 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.