Gerador de Landing Page

Gere landing pages de alta conversão a partir de uma descrição de produto. Produza componentes Next.js/React completos com variantes de seção, frameworks de copy comprovados, otimização de SEO e padrões focados em performance. Não é "lorem ipsum" — é copy real que converte.

Meta: LCP < 1s · CLS < 0.1 · FID < 100ms Saída: Componentes TSX + estilos Tailwind + meta SEO + variantes de copy

Quando Usar

• Você precisa gerar uma landing page de marketing em Next.js ou React.
• A tarefa envolve estrutura de página focada em conversão, variantes de seção, estilização com Tailwind ou copy otimizado para SEO.
• Você deseja uma saída completa de landing page a partir de uma descrição de produto, em vez de fragmentos de UI isolados.

Capacidades Principais

• 5 variantes de seção de herói (centralizado, dividido, gradiente, vídeo-bg, minimalista)
• Seções de recursos (grade, alternadas, cartões com ícones)
• Tabelas de preços (2–4 níveis com listas de recursos e alternância)
• Acordeão de FAQ com marcação de schema
• Depoimentos (grade, carrossel, citação única)
• Seções de CTA (banner, página inteira, inline)
• Rodapé (simples, mega, minimalista)
• 4 estilos de design com conjuntos de classes Tailwind

Fluxo de Geração

Siga estas etapas em ordem para cada solicitação de landing page:

1. Coletar entradas — colete nome do produto, slogan, público-alvo, ponto de dor, benefício principal, níveis de preço, estilo de design e framework de copy usando o formato de gatilho abaixo. Pergunte apenas por campos ausentes.
2. Analisar a voz da marca (recomendado) — se o usuário tiver conteúdo de marca existente (copy do site, posts de blog, materiais de marketing), execute-o através do marketing-skill/content-production/scripts/brand_voice_analyzer.py para obter um perfil de voz (formalidade, tom, perspectiva). Use o perfil para informar a seleção do estilo de design e do framework de copy:
   • formal + profissional → estilo enterprise, framework AIDA
   • casual + amigável → estilo bold-startup, framework BAB
   • profissional + autoritário → estilo dark-saas, framework PAS
   • casual + conversacional → estilo clean-minimal, framework BAB
3. Selecionar estilo de design — mapeie a escolha do usuário (ou infira da análise da voz da marca) para um dos quatro conjuntos de classes Tailwind na Referência de Estilo de Design.
4. Aplicar framework de copy — escreva todo o copy de título e corpo usando o framework escolhido (PAS / AIDA / BAB) antes de gerar os componentes. Mantenha a formalidade e o tom do perfil de voz em todo o texto.
5. Gerar seções em ordem — Herói → Recursos → Preços → FAQ → Depoimentos → CTA → Rodapé. Pule seções não relevantes para o produto.
6. Validar contra a lista de verificação de SEO — revise cada item da Lista de Verificação de SEO antes de emitir o código final. Corrija quaisquer lacunas inline.
7. Emitir componentes finais — entregue arquivos TSX completos, prontos para copiar e colar, com todas as classes Tailwind, meta SEO e dados estruturados incluídos.

Acionando Esta Habilidade

Product: [name]
Tagline: [one sentence value prop]
Target audience: [who they are]
Key pain point: [what problem you solve]
Key benefit: [primary outcome]
Pricing tiers: [free/pro/enterprise or describe]
Design style: dark-saas | clean-minimal | bold-startup | enterprise
Copy framework: PAS | AIDA | BAB

Referência de Estilo de Design

Títulos Bold Startup: adicione font-black tracking-tight a todos os elementos <h1>/<h2>.

Frameworks de Copy

PAS (Problema → Agitação → Solução)

• H1: Estado doloroso em que se encontram
• Sub: O que acontece se não resolverem
• CTA: O que você oferece
• Exemplo — H1: "Sua equipe perde 3 horas por dia em relatórios manuais" / Sub: "Cada hora gasta em planilhas é uma hora não fechando negócios. Seus concorrentes já estão automatizados." / CTA: "Automatize seus relatórios em 10 minutos →"

AIDA (Atenção → Interesse → Desejo → Ação)

…