Vibecoding
Como criar seu primeiro site do zero com IA (passo a passo)
Do nada pra um site no ar em uma tarde. Sem enrolação, sem curso de 40 horas. Passo a passo real.
Você abre o editor. Tela branca. E trava.
Todo mundo trava na primeira vez. O problema não é a ferramenta. É que ninguém te ensinou a pedir direito.
Vou te mostrar o caminho do zero até o link funcionando. Sem pular etapa.
Antes de tocar em qualquer ferramenta
Escreva em uma frase o que o site faz. Uma frase.
"Uma página que apresenta meu serviço de consultoria e tem um botão de WhatsApp."
Pronto. Isso é seu escopo. Se você não consegue dizer em uma frase, você não sabe o que quer, e a IA vai adivinhar. Adivinhação vira retrabalho.
Passo 1: escolha uma ferramenta só
Não abra cinco abas. Escolha uma:
Lovable ou v0 para gerar e publicar rápido
Cursor + Vercel se você quer mais controle
Meu take: comece com Lovable ou v0. Você vê o resultado na hora e publica com um clique. Controle vem depois.
Passo 2: monte o prompt com P.E.D.E.R.
P.E.D.E.R. é Papel, Exemplo, Desejo, Estilo, Refinar. É o que separa um prompt que funciona de um "faz um site aí".
Papel: Você é um desenvolvedor front-end sênior.
Exemplo: Parecido com uma landing page de SaaS moderno, limpa.
Desejo: Uma página com topo, seção de benefícios, depoimento e botão de WhatsApp.
Estilo: Fundo escuro, detalhes em âmbar, tipografia grande e legível.
Refinar: Depois de ver, você ajusta.
Cole isso na ferramenta. Veja o que sai.
Passo 3: leia o que a IA gerou
Não aceite de olhos fechados. Olhe a tela. O botão funciona? O texto é o seu ou é placeholder? O link do WhatsApp tem o seu número?
Esse é o começo do Protocolo de Revisão em 5 Camadas: Entender e Ler. Você não precisa entender cada linha de código. Precisa entender o que a página faz e ler se ela faz certo.
Passo 4: refine em pedidos pequenos
Erro clássico: pedir dez mudanças de uma vez. A IA erra três, você não sabe qual.
Peça uma coisa por vez:
Troque o texto do topo para "Consultoria que resolve".
Deixe o botão de WhatsApp verde.
Aumente o espaçamento entre as seções.
Um pedido. Vê o resultado. Próximo pedido. Assim você mantém o controle.
Passo 5: publique
Nas ferramentas tipo Lovable e v0, publicar é um botão. No Cursor, você conecta na Vercel e faz o deploy. Em minutos você tem um link real, no ar, que você manda pra alguém.
Esse é o momento que vicia. Deixa de ser exercício. Vira coisa de verdade.
O que fazer no dia seguinte
Não pare no "está no ar". Volte e blinde:
O botão de WhatsApp abre a conversa certa?
A página abre no celular sem quebrar?
Tem algum dado seu exposto que não devia estar?
Vibecoding com engenharia é isso. Você constrói rápido. E revisa antes de confiar. Não constrói às cegas e reza.
Seu primeiro site não vai ser perfeito. Vai estar no ar. E isso já te coloca na frente de quem só assiste tutorial.
A decisão é sua.
Perguntas frequentes
Perguntas rápidas
+Preciso saber programar pra fazer isso?
Não. Você precisa saber descrever o que quer com clareza. A IA escreve o código. Você conduz.
+Qual ferramenta usar?
Qualquer uma que gere e publique: Lovable, v0, Bolt ou Cursor com deploy na Vercel. Comece com uma só.
+Quanto tempo leva?
Um site simples de uma página sai em uma tarde. O primeiro sempre demora mais porque você está aprendendo o fluxo.
Continue lendo
Como não virar refém de uma ferramenta de IA
A ferramenta que você ama hoje pode dobrar de preço, mudar de dono ou fechar amanhã. Não construa em cima de uma só.
VibecodingO que fazer quando a IA te dá código que você não entende
A tentação é apertar aceitar e seguir. Não faça. Código que você não entende é código que você não mantém.
VibecodingPor que backup não é opcional
Existe quem faz backup e quem ainda não perdeu tudo. Você escolhe de qual lado ficar antes ou depois.