Páginas: Página de Destino (Landing Page)
Guia a estrutura, o fluxo de conversão e a otimização de páginas de destino para campanhas. Uso primário: Anúncios pagos (PPC/SEM) — páginas de destino são tipicamente construídas para receber tráfego pago; o alinhamento anúncio-página é crítico para a conversão. Consulte paid-ads-strategy para saber quando usar anúncios pagos e os princípios de alinhamento anúncio-página. Também se aplica a páginas de cadastro de afiliados, lançamento de produtos, captura de leads, registro em webinars e outras páginas de conversão com objetivo único. Escala: Ao construir muitas páginas de destino (específicas por cidade, produto ou integração), use programmatic-seo (template + dados) e template-page-generator para o design do template. Difere da homepage (multipropósito) e das páginas de produto (catálogo).
Ao invocar: No primeiro uso, se útil, abra com 1–2 frases sobre o que esta skill cobre e por que é importante, depois forneça a saída principal. Em usos subsequentes ou quando o usuário pedir para pular, vá diretamente para a saída principal.
Anúncios Pagos: Requisitos da LP
Quando a LP recebe tráfego pago: a promessa do anúncio deve estar imediatamente na página; prioridade mobile (CTA acima da dobra, carregamento rápido); formulário mínimo (menos campos); elementos de confiança acima da dobra. Consulte paid-ads-strategy para alinhamento completo anúncio-página e Quality Score.
Avaliação Inicial
Verifique o contexto do projeto primeiro: Se existir .claude/project-context.md ou .cursor/project-context.md, leia para obter informações sobre produto, público e proposta de valor.
Identifique:
- Objetivo da página: Cadastro, compra, captura de lead, webinar, download
- Fonte de tráfego: Anúncios pagos, e-mail, afiliados, orgânico
- Público: Frio vs. morno; segmente se conhecido
Estrutura da Página de Destino (Fluxo de 5 Etapas)
| Etapa | Propósito | Elementos |
|---|---|---|
| 1. Parar o scroll | Capturar a atenção em ~2,6 segundos | Título, subtítulo, imagem ou vídeo de destaque |
| 2. Ganhar confiança | Prova social antes do pedido | Logos, depoimentos, avaliações, número de clientes |
| 3. Explicar o valor | Benefícios, funcionalidades, casos de uso | Cópia clara; para quem é, o que faz |
| 4. Remover dúvidas | Lidar com objeções | FAQ, garantias, comparações |
| 5. Fazer o pedido | Única CTA principal | Uma ação clara; repetir em pontos lógicos |
Cada elemento deve servir a uma dessas cinco funções. Páginas com múltiplas ofertas concorrentes geram ~266% menos leads.
Fórmula do Título
[Para quem é] + [Resultado específico] + [Tempo/qualificador]
- Evite: Promessas abstratas ("Desbloqueie seu potencial", "Transforme seu negócio")
- Prefira: Concreto ("Reduza o processamento de faturas em 70%—sem novo software")
Práticas Recomendadas para CTA
- Uma CTA principal: Sem ações concorrentes; crie um "caminho de mão única" para a conversão
- Acima da dobra no mobile: Acessível ao polegar; ~65%+ do tráfego é mobile
- Cópia focada em valor: "Iniciar Teste Grátis" em vez de "Enviar"
- Combine com sinais de confiança: Número de clientes, logotipos ou estatísticas ao lado do botão
- Remova ou minimize a navegação: Pode aumentar a conversão em 2–28%
Páginas de Destino Programáticas (Escala)
Quando você precisar de muitas páginas de destino (ex.: específicas por cidade, produto ou integração), use programmatic-seo: um template + dados = centenas ou milhares de LPs. Aplique a estrutura da página de destino (fluxo de 5 etapas, CTA, confiança) ao template; consulte template-page-generator para o design do template. Exemplo: LPs "[Produto] para [Cidade]" com dados locais; páginas de cadastro de integração "[App A] + [App B]".
Tipos de Página
| Tipo | Uso | Destino da CTA |
|---|---|---|
| Clique direto | Público morno antes de enviar para a oferta; melhor para SaaS, assinaturas | pricing-page, products-page, signup |
| Captura de lead | Coletar e-mail para nutrição; formulários com 5 campos ou menos (formulários mais longos causam ~81% de abandono) | newsletter-signup, contact-page |
| Focada em produto | Aprofundar funcionalidades e benefícios; lançamento de produto | products-page, features-page |
| Comparação | X vs Y; anúncios de palavras-chave de marca concorrente; intenção comercial | alternatives-page, features-page, pricing-page |
| Casos de uso / Soluções | Para produtos integrados difíceis de dividir em ferramentas | features-page, services-page |
| Ferramentas gratuitas | Utilitários independentes; geração de leads; mesmo ICP; trecho do produto | tools-page-generator; página de ferramenta como LP quando bloqueada |
| Ponte/bônus | Incentivo extra para comprar através do seu link | pricing-page, products-page |
| Webinar/evento | Registro de evento; coletar inscrições antes do ao vivo | resources-page (webinar como recurso) |
Página de Destino ↔ Tipos de Página (Conteúdo e Fluxo)
Extrair conteúdo de (etapas 2–4):
- customer-stories-page-generator: Depoimentos, estudos de caso para prova social; trechos Desafio→Solução→Resultados
- faq-page-generator: Seção de FAQ para lidar com objeções; reutilizar perguntas e respostas relacionadas à conversão
- features-page-generator: Cópia de funcionalidades com benefícios primeiro para a etapa "Explicar o valor"
- resources-page-generator: Ímã de leads (ebook, template) como troca por e-mail; webinar como recurso
A CTA envia para:
- pricing-page-generator: LP de clique direto → preços; cadastro, teste
- products-page-generator: LP de produto → detalhe do produto ou catálogo
- services-page-generator: LP de serviço → contato, orçamento, agendamento
- contact-page-generator: LP de captura de lead → formulário de contato; solicitação de demonstração B2B
- affiliate-page-generator, creator-program: Cadastro de parceiro = tipo de página de destino
Links internos:
- Link da LP para homepage (âncora da marca); about-page (confiança); privacy-page (conformidade do formulário)
- Evite LPs órfãs: garanta pelo menos um link interno a partir do sitemap, navegação ou hub da campanha
Desempenho e Design
- Tempo de carregamento: Abaixo de 2,5 segundos; cada segundo extra pode custar ~7% de conversão
- Prioridade mobile: Responsivo; CTA visível sem rolagem
- Visuais: Imagem ou vídeo de destaque pode melhorar a conversão em até 80%
- Estética do frontend: Para tipografia distinta, movimento, composição espacial, fundos — consulte brand-visual-generator Estética do Frontend
- Divulgação: Divulgação de afiliado/pago compatível com FTC quando aplicável
Checklist Pré-Entrega
Antes de enviar uma página de destino, verifique:
| Categoria | Verificação |
|---|---|
| Visual | Sem emojis como ícones (use SVG); ícones de um conjunto consistente (Heroicons/Lucide); estados de hover não causam mudança de layout |
| Interação | Todos os elementos clicáveis têm cursor-pointer; hover fornece feedback claro; transições 150–300ms |
| Acessibilidade | Imagens têm texto alternativo; campos de formulário têm rótulos; cor não é o único indicador; prefers-reduced-motion respeitado |
| Layout | Sem rolagem horizontal no mobile; conteúdo não escondido atrás de navegação fixa; responsivo em 375px, 768px, 1024px |
| Desempenho | Tempo de carregamento abaixo de 2,5s; LCP otimizado; imagens usam WebP/carregamento lento quando apropriado |
| Imagens | Consulte image-optimization para texto alternativo, formato, responsivo, carregamento lento |
Formato de Saída
- Título e subtítulo
- Estrutura (seções do fluxo de 5 etapas)
- Posicionamento dos sinais de confiança
- Cópia e posicionamento da CTA
- Tratamento de objeções (FAQ, garantias)
- Links internos (páginas de destino)
- Metadados SEO (se a página for indexada)
Skills Relacionadas
- hero-generator: Seção de destaque (etapa 1)
- grid, list: Layout de conteúdo abaixo do destaque; seções, funcionalidades, depoimentos
- cta-generator: Design e posicionamento do botão CTA
- image-optimization: Texto alternativo, WebP, LCP, responsivo, carregamento lento
- pricing-page-generator: Destino da LP de clique direto; CTA de cadastro
- faq-page-generator: Seção de FAQ para lidar com objeções
- howto-section-generator: Seção de instruções passo a passo (ex.: fluxo de configuração) antes do FAQ/CTA
- comparison-table-generator: Seção de tabela de comparação concorrente / tradicional-vs-moderno; correspondência de mensagem com anúncios
- homepage-generator: Homepage multipropósito vs. página de destino de objetivo único; estrutura semelhante
- paid-ads-strategy: Alinhamento anúncio-página; quando usar anúncios pagos
- alternatives-page-generator: Anúncios de palavras-chave de marca concorrente → LP de comparação (não blog)
- programmatic-seo: Escalar páginas de destino via template + dados
- template-page-generator: Estrutura de template para LPs programáticas
- title-tag, meta-description, page-metadata: Metadados da página de destino