Gerador de Landing Page

Gere landing pages de alta conversão a partir de uma descrição de produto. Gera componentes Next.js/React completos com múltiplas variações de seção, frameworks de copy comprovados, otimização SEO e padrões de performance. Não é lorem ipsum — é texto real que converte.

Alvo: 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, variações de seção, estilização Tailwind ou copy com consciência de SEO.
Você quer 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 herói (centralizado, dividido, gradiente, fundo de vídeo, minimalista)
Seções de recursos (grade, alternada, cards com ícones)
Tabelas de preços (2 a 4 níveis com listas de recursos e alternador)
Acordeão de FAQ com marcação de esquema
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:

Coletar entradas — colete nome do produto, tagline, público, 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 pelos campos ausentes.
Analisar a voz da marca (recomendado) — se o usuário tiver conteúdo de marca existente (texto do site, postagens de blog, materiais de marketing), execute-o através de 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 de estilo de design e framework de copy:
- formal + profissional → estilo enterprise, framework AIDA
- casual + amigável → estilo bold-startup, framework BAB
- profissional + autoritativo → estilo dark-saas, framework PAS
- casual + conversacional → estilo clean-minimal, framework BAB
Selecionar estilo de design — mapeie a escolha do usuário (ou infira a partir da análise de voz da marca) para um dos quatro conjuntos de classes Tailwind na Referência de Estilo de Design.
Aplicar framework de copy — escreva todo o texto do título e corpo usando o framework escolhido (PAS / AIDA / BAB) antes de gerar os componentes. Combine a formalidade e o tom do perfil de voz em todo o texto.
Gerar seções em ordem — Herói → Recursos → Preços → FAQ → Depoimentos → CTA → Rodapé. Pule seções não relevantes para o produto.
Validar contra a lista de verificação de SEO — percorra cada item na Lista de Verificação de SEO antes de gerar o código final. Corrija quaisquer lacunas inline.
Gerar componentes finais — entregue arquivos TSX completos e prontos para copiar e colar com todas as classes Tailwind, meta SEO e dados estruturados incluídos.

Como Acionar Esta Skill

Produto: [nome]
Tagline: [proposta de valor em uma frase]
Público-alvo: [quem são]
Principal ponto de dor: [qual problema você resolve]
Principal benefício: [resultado primário]
Níveis de preço: [gratuito/pro/enterprise ou descreva]
Estilo de design: dark-saas | clean-minimal | bold-startup | enterprise
Framework de copy: PAS | AIDA | BAB

Referência de Estilo de Design

Estilo	Fundo	Destaque	Cards	Botão CTA
Dark SaaS	`bg-gray-950 text-white`	`violet-500/400`	`bg-gray-900 border border-gray-800`	`bg-violet-600 hover:bg-violet-500`
Clean Minimal	`bg-white text-gray-900`	`blue-600`	`bg-gray-50 border border-gray-200 rounded-2xl`	`bg-blue-600 hover:bg-blue-700`
Bold Startup	`bg-white text-gray-900`	`orange-500`	`shadow-xl rounded-3xl`	`bg-orange-500 hover:bg-orange-600 text-white`
Enterprise	`bg-slate-50 text-slate-900`	`slate-700`	`bg-white border border-slate-200 shadow-sm`	`bg-slate-900 hover:bg-slate-800 text-white`

Bold Startup títulos: 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 estão
Sub: O que acontece se não resolverem
CTA: O que você oferece
Exemplo — H1: "Sua equipe perde 3 horas por dia com relatórios manuais" / Sub: "Cada hora gasta em planilhas é uma hora sem fechar negócios. Seus concorrentes já estão automatizados." / CTA: "Automatize seus relatórios em 10 minutos →"

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

H1: Declaração ousada que prende a atenção → Sub: Fato interessante ou benefício → Recursos: Pontos de prova que geram desejo → CTA: Ação clara

BAB (Antes → Depois → Ponte)

H1: "[Estado antes] → [Estado depois]" → Sub: "Veja como [produto] faz a ponte" → Recursos: Como funciona (a ponte)

Componente Representativo: Herói (Gradiente Centralizado — Dark SaaS)

Use este modelo estrutural para todas as variantes de herói. Troque as classes de layout, direção do gradiente e posicionamento da imagem para as variantes dividida, fundo de vídeo e minimalista.

export function HeroCentered() {
  return (
    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
      <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
      <div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
      <div className="relative z-10 max-w-4xl">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
          Agora em beta público
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          Entregue mais rápido.<br />
          <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
            Quebre menos.
          </span>
        </h1>
        <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
          A plataforma de deploy que detecta erros antes dos seus usuários.
          Configuração zero. Rollbacks instantâneos. Monitoramento em tempo real.
        </p>
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">
            Iniciar teste grátis
          </Button>
          <Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
            Veja como funciona →
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">Sem cartão de crédito necessário · Teste grátis de 14 dias</p>
      </div>
    </section>
  )
}

Outros Padrões de Seção

Seção de Recursos (Alternada)

Itere sobre um array features com { title, description, image, badge }. Alterne a direção do layout com i % 2 === 1 ? "lg:flex-row-reverse" : "". Use <Image> com width/height explícitos e rounded-2xl shadow-xl. Envolva em <section className="py-24"> com contêiner max-w-6xl.

Tabela de Preços

Itere sobre um array plans com { name, price, description, features[], cta, highlighted }. O plano destacado recebe border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20; os outros recebem border border-gray-800 bg-gray-900. Renderize preço null como "Personalizado". Use ícone <Check> por linha de recurso. Layout: grid gap-8 lg:grid-cols-3.

FAQ com Marcação de Esquema

Injete JSON-LD de FAQPage via <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> dentro da seção. Mapeie FAQs com { q, a } para shadcn <Accordion> com type="single" collapsible. Contêiner: max-w-3xl.

Depoimentos, CTA, Rodapé

Depoimentos: Grade (grid-cols-1 md:grid-cols-3) ou bloco de herói de citação única com avatar, nome, cargo e texto da citação.
Banner CTA: Seção de largura total com título, subtítulo e dois botões (primário + fantasma). Adicione sinais de confiança (garantia de reembolso, faixa de logotipos) imediatamente abaixo.
Rodapé: Logotipo + colunas de navegação + links sociais + legal. Use separador border-t border-gray-800.

Lista de Verificação de SEO

Etapa de validação: Antes de gerar o código final, verifique se cada item da lista acima está satisfeito. Corrija quaisquer lacunas inline — não pule itens.

Metas de Performance

Métrica	Alvo	Técnica
LCP	< 1s	Pré-carregar imagem do herói, use `priority` no Next/Image
CLS	< 0.1	Definir width/height explícitos em todas as imagens
FID/INP	< 100ms	Adiar JS não crítico, usar `loading="lazy"`
TTFB	< 200ms	Usar ISR ou geração estática para landing pages
Bundle	< 100KB JS	Auditar com `@next/bundle-analyzer`

Armadilhas Comuns

Imagem do herói não pré-carregada — adicione a prop priority ao primeiro <Image>
Breakpoints móveis ausentes — sempre projetar mobile-first com prefixos sm:
CTA muito vago — "Começar" supera "Saiba mais"; "Iniciar teste grátis" supera "Inscreva-se"
Página de preços sem sinais de confiança — adicione garantia de reembolso e depoimentos perto do CTA
Sem CTA acima da dobra no celular — garanta que o botão esteja visível sem rolagem em viewport de 375px

Skills Relacionadas

Analisador de Voz da Marca (marketing-skill/content-production/scripts/brand_voice_analyzer.py) — Execute antes da geração para estabelecer o perfil de voz e garantir consistência do texto
Sistema de Design de UI (product-team/ui-design-system/) — Gere tokens de design a partir da cor da marca antes de construir a página
Análise Competitiva (product-team/competitive-teardown/) — O posicionamento competitivo informa a mensagem da landing page e a diferenciação

Limitações

Use esta skill apenas quando a tarefa corresponder claramente ao escopo descrito acima.
Não trate a saída como substituta para validação, teste ou revisão especializada específica do ambiente.
Pare e peça esclarecimentos se entradas necessárias, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.

n2g7/agent-skills

O que é agent-skills?

Perguntar na sua IA favorita

Documentação