Landing Page Profissional do Zero com Claude Code

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