Como criar um site profissional com IA
Criar um site profissional não exige saber programar. Com Claude Code e o prompt certo, você tem uma landing page com rastreamento completo em menos de 1 hora.
Exemplos reais criados com esse processo
- Gramado Plazza (restaurante italiano, Gramado/RS): LP para reservas de mesa com sequência completa — couvert, sopa capeletti, carnes na chapa, rodízio de massas e panna cotta
- Esmalteria Unhas Top (RioMar Shopping Aracaju): 5 versões A/B testadas com tráfego pago, DDI auto-detectado por geolocalização, leadId deduplicado com hash
- Dr. Wagner Rocha Advocacia (Cuiabá/MT): LP trabalhista com SHA-256 em todos os campos pessoais e captura de _fbc/_fbp dos cookies do Meta
- Dr. Leonardo Carvalho Teixeira (Divórcio para Homens, RJ): 60 leads em 30 dias com R$ 600 investidos, schema LegalService + FAQPage no JSON-LD
O que você vai precisar
- Claude Code — claude.ai/code (plano Pro)
- Skill UI/UX Pro Max: rode /ui-ux-pro-max no Claude Code
- MCP 21st.dev Magic configurado (21st.dev/magic)
- Pixel Meta criado no Gerenciador de Eventos
- Propriedade GA4 criada no Google Analytics
Por que Pixel + Conversions API juntos?
O Pixel Meta roda no navegador do cliente (client-side). Depois do iOS 14.5, ad blockers e configurações de privacidade bloqueiam até 40% desses eventos. A Conversions API (CAPI) envia os mesmos eventos do seu servidor para a Meta, sem passar pelo navegador. Com os dois juntos e event_id para deduplicação, você recupera esses 20-40% perdidos e seu pixel reporta com muito mais precisão.
Prompt completo para Claude Code
Cole esse prompt depois de ativar a skill UI/UX Pro Max:
Crie uma landing page de alta conversão em Next.js 15 App Router para [SEU NEGÓCIO].
Dados do negócio:
- Nome: [NOME]
- Serviço: [O QUE VOCÊ OFERECE]
- Diferencial: [POR QUE SUA EMPRESA]
- Público: [QUEM É SEU CLIENTE IDEAL]
- Prova social: [CLIENTES, TEMPO DE MERCADO, RESULTADOS]
- CTA principal: [ex: "Solicitar orçamento grátis"]
- WhatsApp: [SEU NÚMERO — ex: 5551999999999]
- Pixel Meta ID: [ID DO SEU PIXEL]
- GA4 Measurement ID: [G-XXXXXXXXXX]
- Meta CAPI Token: [TOKEN GERADO NO GERENCIADOR DE EVENTOS]
Seções obrigatórias:
1. Hero: headline com dor/benefício + subheadline + CTA
2. Problema: 3 pontos de dor sem o seu serviço
3. Solução: como você resolve + diferencial
4. Como funciona: 3-4 passos simples
5. Resultados: números reais ou 3 depoimentos
6. FAQ: 5 objeções comuns respondidas
7. CTA final: urgência + formulário de captura
Rastreamento obrigatório:
META PIXEL CLIENT-SIDE:
- fbq('init', '[PIXEL_ID]') + fbq('track', 'PageView') no carregamento
- Gere leadId = crypto.randomUUID() no submit
- fbq('track', 'Lead', { eventID: leadId }) com o mesmo leadId
META CONVERSIONS API (app/api/lead/route.ts):
- Capture do request: IP (x-forwarded-for), User-Agent, _fbc e _fbp dos cookies
- Validar body com Zod antes de processar
- Hash SHA-256 dos campos: em (email), ph (telefone), fn (nome), external_id (leadId)
- POST https://graph.facebook.com/v19.0/[PIXEL_ID]/events
- Mesmo leadId do client para deduplicação automática
- Usar waitUntil() para não bloquear a resposta ao usuário
Salvar lead no banco (Neon + Drizzle ORM):
- Tabela leads: id, nome, email, telefone, modelo, utm_source, utm_medium,
utm_campaign, utm_content, utm_term, created_at
- Fallback em memória (Map<>) se banco indisponível — nunca perder lead
GA4 — eventos customizados:
- cta_click: em todos os botões CTA
- form_start: ao focar no primeiro campo
- form_submit: no sucesso do envio
- whatsapp_click: no botão flutuante
- scroll_milestone: aos 25%, 50%, 75%, 90%
SEO com Next.js 15 Metadata API:
- title, description, openGraph, canonical
- JSON-LD LocalBusiness (ou LegalService para advogados, MedicalBusiness para clínicas)
- FAQPage schema com as 5 objeções da seção FAQ
Stack: Next.js 15, TypeScript, Tailwind CSS v4, shadcn/ui, Neon
Deploy: VercelComo gerar o token da Conversions API
- Acesse business.facebook.com
- Gerenciador de Eventos > seu Pixel > Configurações
- Role até "API de Conversões" > Gerar token de acesso
- Salve como META_CAPI_TOKEN nas variáveis da Vercel
Perguntas frequentes
Preciso saber programar para criar um site com IA?
Não. O Claude Code escreve todo o código por você. Você descreve o que quer no prompt e ele gera o Next.js, o CSS, o rastreamento e faz o deploy no Vercel.
Quanto tempo leva para criar o site?
Menos de 1 hora para a primeira versão ao ar. Com o prompt completo deste guia, o Claude Code gera a landing page completa em uma única sessão.
O que é a Conversions API da Meta e por que preciso dela?
A Conversions API (CAPI) envia eventos de conversão do seu servidor direto para a Meta, sem depender do navegador do usuário. Depois do iOS 14.5, ad blockers bloqueiam até 40% dos eventos do Pixel client-side. Com CAPI você recupera esses eventos e seu pixel fica mais preciso.
Quanto custa hospedar o site?
R$ 0 no plano inicial. Vercel (hospedagem), Neon (banco PostgreSQL) e o domínio .com.br custam menos de R$ 50/ano. O site em si não tem custo de infraestrutura para tráfego pequeno e médio.
O que é o Claude Code?
Claude Code é a CLI da Anthropic que roda no seu terminal e escreve, edita e faz deploy de código completo. Diferente do chat, ele acessa seus arquivos, instala pacotes e executa comandos diretamente no seu projeto.
Por que capturar _fbc e _fbp dos cookies?
_fbc é o click ID do anúncio Meta (fc.xxx gerado quando alguém clica no seu anúncio). _fbp é o identificador de navegador do Pixel. Enviar esses dois campos na Conversions API aumenta significativamente a taxa de match — a Meta consegue atribuir o lead ao anúncio correto com muito mais precisão.
Quer implementar isso?
Me chama no WhatsApp. Ajudo você a configurar ou implemento pra você.
Quero ajuda no WhatsAppGastão Matos
@gastaomatos