Landing Page Profissional do Zero com Claude Code

O Guia Completo: Do Terminal ao Deploy

Neste guia, vou te mostrar exatamente como eu construo landing pages profissionais usando apenas o Claude Code no terminal do VS Code. Sem template, sem WordPress, sem Figma. Apenas o terminal, boas referências e 4 arquivos de inteligência que transformam o processo inteiro.

A landing page que eu construí no vídeo tem design system customizado, tracking completo com Meta Pixel, Clarity, UTM Passthrough, API do Facebook server-side, otimização de performance no PageSpeed e domínio próprio. Tudo feito pelo Claude Code em menos de 30 minutos.

Parte 1, Como Abrir o Claude Code no VS Code

Pré-requisitos

Antes de tudo, você precisa ter:

• VS Code: baixe em code.visualstudio.com
• Uma conta na Anthropic: acesse console.anthropic.com e gere sua API key

Instalação do Claude Code

Abra o terminal do VS Code (Ctrl + ou Cmd +) e rode:

npm install -g @anthropic-ai/claude-code

Primeira execução

No terminal do VS Code, navegue até a pasta do seu projeto e digite:

claude

Na primeira vez, ele vai pedir sua API key da Anthropic. Cole ela e pronto. A partir de agora, toda vez que você abrir o terminal do VS Code na pasta do seu projeto e digitar claude, ele já vai carregar o contexto completo do seu projeto.

Dica importante: Sempre trabalhe dentro de uma pasta de projeto organizada. O Claude Code lê os arquivos da pasta e entende o contexto. Quanto mais organizado, melhor o resultado.

Parte 2, Como Instalar as 4 Skills de Landing Page

Skills são arquivos de inteligência que dão superpoderes específicos ao Claude Code. Para landing pages, eu uso 4 skills principais:

As 4 Skills

• frontend-design: Foco na estética e construção visual de alta qualidade
• ui-ux-pro-max: Design system inteligente, 67+ estilos, 161 paletas de cores
• landing-page-guide: 11 elementos essenciais para landing pages de alta conversão
• page-performance: Otimização de velocidade para score 90+ no PageSpeed

Como instalar

As skills são arquivos .md que ficam dentro da pasta .claude/commands/ do seu projeto. Para instalar:

• Baixe os 4 arquivos de skill (links abaixo)
• Abra o Claude Code no terminal do VS Code
• Peça para ele instalar:

Instala as skills frontend-design, ui-ux-pro-max, landing-page-guide 
e page-performance. Os arquivos estão na minha pasta de Downloads.

O próprio Claude Code vai criar a pasta .claude/commands/ se não existir e copiar os arquivos para o lugar certo. Simples assim.

Na próxima vez que você abrir o Claude Code na pasta do projeto, ele já vai reconhecer as skills automaticamente e usar quando você pedir algo relacionado a landing pages.

Parte 3, Começando a Construção da sua Landing Page

Etapa 1, Buscar Referências Visuais (ANTES de construir)

Este é o passo que a maioria das pessoas pula, e é o mais importante. Antes de pedir qualquer coisa ao Claude Code, busque:

• Referência de design system: Busque no Dribbble, Behance ou sites que você admira. Tire prints dos elementos que você gosta: botões, efeitos, tipografia, cards, espaçamento
• Referência de logotipo: Tenha a logo do projeto em pelo menos 2 versões: colorida e branca (para fundos escuros)
• Referência de estilo visual: Pinterest é seu aliado. Busque efeitos de transição entre seções, cortes visuais, waves, brushes
• Fotos do projeto: Foto da hero (especialista/produto), capas de aulas, fotos de prova social

Por que isso importa: Quando você tem uma página com design system, todas as páginas seguintes (versões de teste, página de obrigado, página de vendas, cronograma) seguem o mesmo padrão visual automaticamente. Você constrói uma vez e replica infinitamente.

Etapa 2, Construir o Design System (primeiro!)

No Claude Code, o primeiro comando é para construir o design system. Exemplo:

Iremos construir do zero um design system para o projeto [nome do projeto].

Tenho algumas referências visuais:

1. Logotipo que pode servir de referência de cores e contrastes:
   [cole o caminho do arquivo da logo]

2. Referência visual de design system:
   [cole screenshot ou caminho da imagem de referência]

3. Quero trazer um efeito entre a hero e a segunda seção:
   [cole screenshot do efeito que você quer]

Siga todos os nossos parâmetros de construção de design system e nossas skills.

O Claude Code vai gerar um arquivo design-system.html com:

• Paleta de cores extraída da logo
• Tipografia (principal + apoio)
• Efeitos de vidro, gradientes, botões
• Badges e componentes de UI
• Cards de conteúdo
• Espaçamento e grids
• Efeitos de transição entre seções (waves, brushes)
• Motion effects e animações

Dica: Crie versões Light Mode e Dark Mode do design system. Isso te permite fazer testes A/B depois com diferentes temas visuais para ver qual converte mais.

Etapa 3, Revisar e Ajustar o Design System

Quando o Claude Code terminar o design system, peça para ele abrir no navegador:

Abre o design-system.html no navegador para eu ver como ficou.

Se preferir, peça para ele te mostrar onde o arquivo foi salvo para encontrar na sua pasta. Avalie o resultado e veja o que quer ajustar. Coisas comuns:

• Fonte principal (exemplo: prefiro Montserrat Black nos títulos, Inter no corpo)
• Cor dos botões (em testes, botão verde converte melhor em LPs de captação)
• Campos do formulário (se você só capta email e WhatsApp, remova o campo de nome)
• Variantes de modo (chocolate, dark, light)
• Logo branca no dark mode, colorida no light mode

Volte ao Claude Code e peça os ajustes:

Gostei muito do resultado, porém quero algumas alterações:

1. Quero também ter a versão light, pois iremos fazer diferentes versões de páginas
2. O botão eu quero que seja verde, pois a taxa de conversão é melhor
3. Campo de formulário: somente WhatsApp e email, não captamos o nome
4. A logo no dark mode tem que ser a versão branca e na light mode a colorida

Etapa 4, Construir a Landing Page

Com o design system aprovado, agora sim a LP:

Está aprovado, vamos começar a construir a landing page.

Versão /t1, Chocolate Mode
Versão /t2, Dark Mode  
Versão /t3, Light Mode

Vamos construir as três com a mesma estrutura e copy, porém alterando os temas.

A copy está aqui: [cole a sua copy aqui, pode ser o texto direto ou o caminho do arquivo]

Estrutura recomendada da LP de captação:

• Hero: Logo + badge (datas/ao vivo) + headline + sub-headline + formulário + foto
• Seção de Aulas: Cards das aulas com data, tema e badge “ao vivo” piscando
• Depoimentos: Prints da comunidade com a frase “Elas também começaram em um evento como esse”
• Sobre o Expert: Foto + bio + prova social (credenciais, números)
• CTA Final: Formulário repetido + urgência

Etapa 5, Ajustar Hero e Mobile

Essa é a parte mais crítica. Mais de 90% dos acessos vêm do celular. Pontos de atenção:

• Tudo na primeira dobra: headline, formulário e foto devem aparecer sem scroll
• Elementos centralizados no mobile: diferente do desktop que fica texto à esquerda e foto à direita
• Botão em uma linha: não pode quebrar em duas linhas no mobile
• Tamanho de fonte: headlines menores no mobile, legíveis sem zoom

Dica prática: Tire um print da tela e desenhe/escreva por cima marcando onde cada elemento deve ficar. Cole esse print no chat do Claude Code. Ele entende imagens.

Parte 4, Checklist de Configurações Obrigatórias

Antes de colocar sua landing page no ar, ela precisa de algumas configurações de tracking e performance. A boa notícia: você não precisa mexer em código. Basta pedir ao Claude Code que ele faz tudo pra você.

Peça ao Claude Code para configurar tudo de uma vez:

Agora que temos as páginas prontas, preciso que você configure:

1. Otimização de performance (score acima de 90 no PageSpeed)
2. Meta Pixel do Facebook (meu Pixel ID é: XXXXXXXXX)
3. CAPI - Conversions API server-side (meu token é: XXXXXXXXX)
4. UTM Passthrough para rastrear de qual anúncio veio o lead
5. Webhook no formulário (meu webhook é: https://...)
6. Microsoft Clarity (meu Project ID é: XXXXXXXXX)
7. Proteção contra race condition no redirect do formulário

O Claude Code vai fazer tudo sozinho. Mas é importante você entender o que cada configuração faz e por que ela existe, para saber cobrar e verificar se foi feito corretamente.

4.1, Otimização de Performance

O Claude Code vai otimizar sua página automaticamente: converter imagens pesadas para WebP (de 1-2MB para poucos KB), fazer preload da imagem principal, otimizar fontes e aplicar lazy loading. O resultado é uma página que carrega rápido e tem score acima de 90 no Google PageSpeed.

Como verificar: Acesse pagespeed.web.dev, cole a URL da sua página e veja o score. Se estiver abaixo de 90, peça ao Claude para otimizar mais.

4.2, Meta Pixel (Facebook)

O Pixel rastreia quem visita sua página. Você precisa ter o ID do seu Pixel (encontra no Gerenciador de Eventos do Facebook) e passar para o Claude Code.

O que o Claude vai configurar:

• PageView: dispara automaticamente quando alguém abre a página
• Lead: dispara quando alguém preenche o formulário (1 vez por sessão)
• InitiateCheckout: dispara quando alguém clica no botão de compra (em páginas de vendas)

4.3, Conversions API (CAPI), Server-Side

O CAPI é o tracking “por baixo dos panos”. Ele garante que os dados do lead cheguem ao Facebook mesmo quando a pessoa usa bloqueador de anúncios no navegador. É como ter um plano B automático do seu Pixel.

Você precisa de um token de acesso da API do Facebook (gera no Facebook Business Settings > Events Manager). Passe o token ao Claude Code e ele cria o endpoint server-side automaticamente.

Na Vercel, você vai precisar configurar 2 variáveis de ambiente (o Claude Code te orienta):

• META_PIXEL_ID: seu ID do Pixel
• META_CAPI_TOKEN: seu token de acesso

4.4, UTM Passthrough

Essa configuração é essencial para quem trabalha com tráfego pago. Quando você coloca UTMs personalizadas nos seus anúncios (utm_source, utm_campaign, etc.), o UTM Passthrough garante que essas informações não se percam quando o lead preenche o formulário.

Na prática: Quando alguém acessa suapagina.com/t1?utm_source=facebook&utm_campaign=lancamento, essas UTMs são automaticamente capturadas e enviadas junto com os dados do formulário. Assim você sabe exatamente qual anúncio gerou aquele lead.

Bônus: O sistema também identifica de qual versão da landing page o lead veio (ex: /t1, /t2, /t3), permitindo que você compare qual versão converte melhor.

4.5, Webhook no Formulário

O webhook conecta o formulário da sua página com a sua ferramenta de automação (n8n, Make, Zapier). Quando alguém se inscreve, os dados (email, WhatsApp, UTMs) são enviados automaticamente para lá.

Você só precisa ter a URL do seu webhook e passar para o Claude Code.

4.6, Proteção contra Race Condition (Descoberta Recente!)

Essa é uma configuração que descobrimos recentemente e agora é obrigatória em toda landing page.

O problema: Quando alguém preenche o formulário e clica em “inscrever”, a página precisa fazer duas coisas ao mesmo tempo: enviar os dados para o webhook E redirecionar para a página de obrigado. Se o redirect acontece rápido demais, o envio do webhook é cancelado no meio do caminho. Resultado: o lead aparece na página de obrigado, acha que se inscreveu, mas os dados nunca chegaram no seu sistema. Você perde leads sem saber.

Isso é o que chamamos de race condition: uma “corrida” entre o envio dos dados e o redirecionamento da página, onde o redirect ganha e cancela o envio.

A solução: O formulário só redireciona para a página de obrigado DEPOIS que todos os envios (webhook, pixel, CAPI) terminam. Se por algum motivo demorar demais, tem um timeout de segurança de 3 segundos que força o redirect para o lead não ficar esperando.

Peça ao Claude Code: Ele já sabe configurar isso automaticamente. Mas se quiser garantir, mencione especificamente:

Garanta que o redirect do formulário só aconteça depois que o webhook 
e o pixel terminarem de enviar. Use Promise.allSettled com safety 
timeout de 3 segundos para evitar race condition.

4.7, Microsoft Clarity (Mapa de Calor Gratuito)

O Clarity é uma ferramenta gratuita da Microsoft que mostra o mapa de calor da sua página: onde as pessoas clicam, até onde fazem scroll, e gravações reais das sessões dos visitantes. Muito útil para entender o comportamento e otimizar.

Como configurar:

• Acesse clarity.microsoft.com e crie uma conta (gratuito)
• Adicione um novo projeto com o domínio da sua página
• Copie o Project ID gerado
• Passe o ID para o Claude Code, ele coloca o script em todas as páginas

Use 1 Project ID por domínio.

Parte 5, Deploy: Colocando sua Página no Ar

Essa é a parte que parece mais complexa, mas o Claude Code faz praticamente tudo por você. Você só precisa de 3 coisas:

• Uma conta no GitHub (github.com), para salvar seu projeto na nuvem
• Uma conta na Vercel (vercel.com), para colocar a página no ar
• Acesso ao DNS do seu domínio: para apontar o domínio customizado

5.1, Peça ao Claude Code para preparar tudo

É a primeira vez que vou fazer um deploy. Preciso que você:
1. Crie um repositório no GitHub para esse projeto
2. Instale a Vercel CLI se não tiver
3. Configure o vercel.json com as rotas /t1, /t2, /t3 e /obg
4. Faça o deploy na Vercel

Meu domínio é: [seudominio.com.br]
Quero o subdomínio: [minicurso.seudominio.com.br]

O Claude Code vai fazer tudo: criar o repositório, configurar as rotas, os headers de segurança, o cache das imagens, instalar a Vercel CLI se necessário, e publicar.

Ele pode te pedir para rodar um comando no terminal para fazer login na Vercel ou no GitHub. É só copiar e colar o que ele sugerir.

5.2, A única parte manual: apontar o domínio

Depois do deploy, o Claude Code vai te mostrar um IP e pedir para você criar um registro DNS. Essa é a única parte que você faz manualmente, no site onde você registrou o domínio (Cloudflare, Registro.br, Hostinger, GoDaddy, etc.):

• Vá em DNS > Adicionar Registro
• Tipo: A
• Nome: o subdomínio que você quer (ex: minicurso, workshop, evento)
• IP: o IP que o Claude Code te mostrou
• Se estiver no Cloudflare: escolha DNS Only (ícone cinza, não laranja)
• Salve

A propagação leva de 1 a 5 minutos. Depois disso, sua página já está acessível no seu domínio.

SSL: O certificado HTTPS (cadeado de segurança) é gerado automaticamente pela Vercel. Nos primeiros minutos pode aparecer “não seguro”, mas normaliza sozinho.

5.3, Fazendo alterações depois

Sempre que você quiser mudar algo na página depois que ela já está no ar, é só abrir o Claude Code e pedir a alteração. Quando terminar, peça para ele fazer o deploy novamente:

Faz o deploy dessas alterações na Vercel.

Dica importante: Sempre peça para o Claude Code salvar no GitHub (commit) ANTES de fazer o deploy. Se você pular essa etapa, corre o risco de perder as alterações.

Parte 6, Checklist Final

Antes de subir tráfego, peça ao Claude Code para verificar cada item. Você também pode conferir manualmente:

• Design System criado e aprovado (com versões light/dark se necessário)
• Hero na primeira dobra: headline, formulário e foto visíveis sem scroll (principalmente no celular!)
• Mobile otimizado: mais de 90% dos acessos vêm do celular, então essa é a versão mais importante
• Imagens otimizadas: todas em WebP, nenhuma foto pesada de câmera
• PageSpeed 90+: teste em pagespeed.web.dev
• Meta Pixel configurado com PageView + Lead
• CAPI funcionando server-side (plano B do Pixel)
• UTM Passthrough: teste acessando com ?utm_source=teste e confira se a UTM chega no webhook
• Webhook enviando dados para sua automação (n8n, Make, Zapier)
• Race Condition protegida: redirect só acontece após envio dos dados (sem perder leads)
• Clarity instalado em todas as páginas
• Formulário testado: inscreva-se na sua própria página e confira se os dados chegam
• Salvo no GitHub: sempre salvar ANTES do deploy
• Deploy feito na Vercel com domínio customizado
• SSL ativo: acesse via HTTPS e confirme o cadeado

Resumo do Fluxo Completo

1. Buscar referências visuais (design system, logo, Pinterest, fotos)
2. Pedir ao Claude Code para construir o design system
3. Revisar, ajustar e aprovar o design system
4. Pedir ao Claude Code para construir a landing page (3 versões)
5. Ajustar hero e mobile
6. Pedir ao Claude Code para configurar: performance, Pixel, CAPI, UTM, webhook, race condition, Clarity
7. Pedir ao Claude Code para salvar no GitHub e fazer deploy na Vercel
8. Apontar domínio no DNS (única parte manual)
9. Testar tudo antes de subir tráfego

Lembre-se: Boas referências encurtam o caminho. Quando o assunto é inteligência artificial, a qualidade do input define a qualidade do output. Invista tempo nas referências e o Claude Code entrega resultados que surpreendem.

Baixe as 4 Skills de Landing Page

Clique nos links abaixo para baixar cada skill. São arquivos .md que você salva no seu computador e depois pede ao Claude Code para instalar.

• frontend-design , Estética e construção visual de alta qualidade
• ui-ux-pro-max, Design system inteligente com 67+ estilos e 161 paletas [LINK DE DOWNLOAD]
• landing-page-guide , 11 elementos essenciais para LPs de alta conversão [LINK DE DOWNLOAD]
• landingpage-performance, Otimização de velocidade para score 90+ no PageSpeed

Como instalar: Baixe os 4 arquivos, abra o Claude Code no terminal do VS Code e peça:

Instala as skills frontend-design, ui-ux-pro-max, landing-page-guide 
e page-performance. Os arquivos estão na minha pasta de Downloads.

Pronto. O Claude Code faz o resto.

Qualquer dúvida, pergunte ao Claude Code, ele vai te guiar no que você precisa fazer. E se quiser ver o processo completo em ação, assista ao vídeo no meu canal.