Landing Page Profissional do Zero com Claude Code

O Guia Completo: Do Terminal ao Deploy

Páginas com IA09 de abril de 2026·15 min de leitura·por Vini Parizotto

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.