Como criar um site com IA no Lovable: o processo que usamos na Mads

Este artigo é escrito por quem construiu o próprio site da agência no Lovable. O madsacelerador.com que você está lendo, todos os pilares de tráfego pago, todo o hub de IA, o quiz de diagnóstico com banco de dados: tudo feito ali. Além disso, mantemos dezenas de landing pages de cliente rodando anúncio de Google e Meta em cima. O processo abaixo é o que a Mads usa, do prompt inicial à publicação com domínio próprio.

O processo em 6 etapas

Vou descrever o caminho como se fosse a primeira landing page de campanha de uma clínica de estética em Limeira, com objetivo de gerar avaliação por WhatsApp. Mesmo processo serve para site institucional ou app com banco.

1. Prompt inicial forte

O prompt inicial define 80% do resultado. Não peça "site bonito". Descreva a empresa em 3 linhas, quem é o público, qual o objetivo único da página, quais seções ter, e cole 1 ou 2 referências reais. Exemplo real que usamos:

Landing page para clínica de estética em Limeira, produto harmonização facial, público mulher de 30 a 55 anos, tom acolhedor e sério, objetivo agendar avaliação por WhatsApp. Seções: hero com foto, benefícios em 3 tópicos, prova social com Reels, procedimento passo a passo, FAQ, formulário curto (nome, WhatsApp, procedimento de interesse) que envia para WhatsApp. Referência de estética: site da Anthropic.

Prompt genérico produz site genérico. Prompt específico produz base sólida para iterar.

2. Deixar a IA gerar a versão inicial

Em segundos você tem uma primeira versão navegável. Ela vai estar 70% pronta e 30% torta. Isso é normal. Não corrija antes de ver o todo.

3. Iterar por conversa, uma coisa por vez

Aqui é onde a maioria erra. Não peça 10 correções em um prompt só. Vá uma por vez, do maior para o menor:

• "O hero está fraco, aumenta a headline e adiciona um selo de +500 pacientes atendidas."
• "Substitui a imagem placeholder por um espaço para foto real, com legenda embaixo."
• "Muda o formulário para enviar direto para o WhatsApp (19) 99707-6280 com mensagem pronta."

Uma tarefa por prompt evita bug em cascata e mantém o controle.

4. Conectar formulário e pixel

Página bonita sem tracking é dinheiro na rua. Peça explicitamente:

• Adicionar Meta Pixel com evento de Lead quando o formulário é enviado.
• Adicionar Google Tag com conversão vinculada ao mesmo evento.
• Salvar o lead em uma planilha (Google Sheets) ou banco simples.

Você não precisa saber onde cada script vai. A IA sabe. Você só precisa fornecer os IDs quando pedirem.

5. Publicar com domínio próprio

O Lovable já entrega URL pública em segundos. Para conectar um domínio da empresa, basta apontar o DNS conforme instruções da plataforma. Uma landing pode ir ao ar em um subdomínio, tipo clinica.suaempresa.com.br, sem mexer no site principal.

6. Revisar em celular antes de subir anúncio

Mais de 80% do tráfego pago no Brasil chega por celular. Abra a landing no seu próprio celular, com dados móveis, e passe por tudo. Se o formulário não abre limpo, você acabou de comprar leads que nunca vão chegar.

Dicas de prompt que rendem no Lovable

1. Comece pelo objetivo, não pelo layout. "Quero que essa página gere avaliação agendada" vale mais que "quero um site moderno".
2. Descreva a persona em uma frase. Quem lê, o que sente, o que decide.
3. Referências vencem estilos vagos. "Estética como o site da Anthropic" é ordem clara. "Moderno e clean" é subjetivo.
4. Peça código real, não mock. Formulário funcionando, integração com WhatsApp, evento no pixel. Assim você não refaz depois.
5. Marque o que ficou bom. Diga: "não mexa mais nessa seção, vamos para a próxima". Evita regressão.
6. Peça acessibilidade. Contraste, alt em imagens, hierarquia de H1 e H2. IA faz por padrão quando você lembra dela.

Erros de iniciante que a Mads já pagou para você

• Colocar tudo em um prompt gigante. Rende site cheio de bug. Divida.
• Confiar cegamente no que a IA gera. Sempre revise texto, número, telefone e link.
• Não testar formulário antes de subir anúncio. Preencha o formulário você mesmo, receba a mensagem no WhatsApp, confirme o evento no pixel.
• Ignorar SEO técnico. Peça: title, description, canonical, Open Graph, JSON-LD por rota. O Lovable faz se você lembrar.
• Deixar tudo em uma página só. Serviços, sobre, contato: cada um é uma rota. Ganha em SEO e em social share.

O case do próprio madsacelerador.com

Este site é a vitrine da metodologia. Foi todo construído no Lovable, com Claude como assistente de redação para os pilares, e o próprio Lovable escreveu o SEO, o sitemap dinâmico, o robots.txt liberando bots de IA e o llms.txt. Cada rota tem title, description, canonical, Open Graph e JSON-LD gerados por um helper central. É dogfooding: aplicamos no nosso site o que vendemos.

Se você quer ver o produto em pé antes de decidir, já está vendo. Cada página é uma amostra do que dá para construir.

Quando é Lovable e quando é programador

Lovable resolve bem site institucional, landing page de campanha, formulário de qualificação e app simples com banco. Não substitui time de engenharia sênior para produto complexo. Para 90% do que uma empresa 40k+/mês precisa, resolve.

Se você quer aprofundar antes de começar, veja o guia completo do Lovable, com comparativo honesto contra WordPress e programador, quanto custa, e o passo a passo em 10 minutos.

Quando chamar a Mads

Quando a landing é parte de uma estratégia maior de tráfego pago e IA, faz sentido a agência tocar do briefing ao anúncio no ar. O nosso trabalho começa antes da página: diagnóstico gratuito, briefing, escolha do canal (Google, Meta, TikTok), landing no Lovable, pixel, integração com WhatsApp, campanha no ar e otimização semanal.

Se você quer aprender e fazer, o Lovable resolve. Se você quer o resultado sem passar por tudo isso, começa pelo diagnóstico.