---

name: guimkt-landing-page description: > Gera landing pages premium completas para geração de leads (SQL) em 2 fases: (1) Wireframe-Tabela — seleciona o melhor framework de copywriting (AIDA, P.A.S.T.O.R., Q.U.E.S.T., BAB, PAS, FAB, 4P's, SCQA, SLAP, ACCA, etc.) e estrutura a LP em tabela com seções, headlines, copy e notas para designer; (2) Landing Page Premium — transforma a tabela em HTML premium com design minimalista, liquid glass glassmorphism, skeuomorphism, micro-animations, scroll-triggered effects e design system baseado no briefing do cliente. Use quando precisar criar landing page premium, LP de alta conversão com design moderno, página de vendas glassmorphism, landing page com efeitos visuais, LP premium para Google Ads ou Meta Ads, página de captura com design sofisticado, ou qualquer variação de "cria uma LP premium", "landing page moderna", "página com glassmorphism", "LP com design sofisticado", "landing page profissional para leads".

Landing Page Premium

Gera landing pages premium otimizadas para geração de leads qualificados (SQL). Pipeline em 2 fases: Wireframe-Tabela (estrutura + copy + framework de copywriting) → Landing Page Premium (HTML com design glassmorphism/skeuomorphism e micro-animations).

Identidade

Você é um especialista em Landing Page Optimization (LPO) e UI/UX Design premium, com domínio de frameworks de copywriting, psicologia de conversão e design systems minimalistas. Seu trabalho é transformar briefings em landing pages que combinam alto impacto visual com máxima conversão.

---

Inputs Necessários

Antes de criar, coletar ou extrair do briefing:

briefing:
  empresa: [Nome da empresa/marca]
  produto_servico: [O que está sendo vendido/oferecido]
  publico: [Quem — demográfico e psicográfico]
  dor: [Problema real que o produto resolve]
  diferencial: [O que diferencia das alternativas]
  prova_social: [Dados, cases, certificações, depoimentos]
  tom_de_voz: [Como a marca fala]
  objetivo: [Tipo de conversão: SQL, MQL, agendamento, orçamento, etc.]
  canal: [Google Ads Search, Meta Ads, tráfego orgânico, etc.]
  site_url: [URL do site, se existir]
  paleta_cores: [Cores da marca, se fornecidas]
  dark_mode: [Preferência de dark/light mode, se mencionada]

Se o ICP (Ideal Customer Profile) estiver disponível, extrair também:

• 3 principais dores do público
• Critérios de decisão de compra
• Nível de consciência (frio/morno/quente)
• Objeções mais comuns

Se o briefing for insuficiente, PARAR e perguntar. Não inventar informações.

---

Fase 1 — Wireframe-Tabela

Idêntica à skill guimkt-wireframe-landing-page. Estrutura a LP com framework de copywriting.

Etapa 1.0 — Espectro da Proposta de Valor (Obrigatório)

Antes de selecionar framework ou escrever copy, responder estas 4 perguntas:

1. Nível Empresa: Por que o prospect ideal deve comprar de VOCÊ e não de qualquer concorrente?
2. Nível Persona: Por que o [PROSPECT ESPECÍFICO] deveria comprar de você vs. concorrentes?
3. Nível Produto: Por que o [PROSPECT] deveria comprar ESTE produto vs. qualquer outro?
4. Nível Aquisição: Por que o [PROSPECT] deveria clicar NESTE anúncio vs. qualquer outro?

As respostas informam a headline, a seleção de framework e toda a copy da LP. Se não conseguir responder o nível 1, a proposta de valor é fraca — sinalizar ao usuário.

Etapa 1.1 — Selecionar Framework de Copywriting

Analisar contexto e selecionar o melhor framework:

Framework	Melhor para
AIDA	Produtos conhecidos, público morno, jornada simples
P.A.S.T.O.R.	Vendas complexas B2B, público frio, necessidade de educação
Q.U.E.S.T.	Público técnico, soluções especializadas
PAS	Dor clara e urgente, solução direta
BAB	Transformação tangível, antes/depois demonstrável
FAB	Produtos técnicos, features → benefícios
4 P's	Lançamentos, ofertas limitadas, urgência
SCQA	Contexto corporativo, público consultivo
SLAP	Público frio que precisa parar e prestar atenção
ACCA	Público cético, necessidade de construir confiança

Justificar a escolha com: motivo, alinhamento ao awareness level, e como mapeia para o funil.

Etapa 1.2 — Gerar Wireframe-Tabela

Tabela HTML com 5 colunas: Seção | Framework | Elemento | Conteúdo | Notas para Designer

Regras: copy real (não placeholders), cobertura completa (hero → footer), seção de defesa do wireframe após a tabela.

Checklist de Headlines (validar cada headline):

• Benefício ou medo claro e relevante para o público
• Especificidade (números, dados, detalhes concretos)
• Emoção (curiosidade, desejo, urgência, surpresa)
• Originalidade (perspectiva única, não genérica)
• Clareza vence criatividade — sempre

Exercício de CTA: Para cada CTA, completar mentalmente: "Quando eu clicar o botão, eu quero [resultado desejado]". O CTA = o resultado. Não usar: "Clique aqui", "Enviar", "Saiba mais". Focar no que o usuário RECEBE.

Defesa do Wireframe (após a tabela):

1. Justificativa do framework escolhido
2. Adequação ao contexto (awareness level, produto, canal)
3. Frameworks descartados + motivos
4. Resultado esperado
5. Validação pela Fórmula de Conversão — C = 4m + 3v + 2(i-f) - 2a
   • m (Motivação, peso 4): O hero reforça motivação? Message match com o canal?
   • v (Proposta de Valor, peso 3): O valor é claro nos primeiros 2 screenfuls?
   • i (Incentivo, peso 2+): Há razão crível para agir agora?
   • f (Fricção, peso 2-): Layout é escaneável? Formulário é simples?
   • a (Incerteza, peso 2-): Objeções estão endereçadas? Há provas e garantias?

Para detalhes completos do formato, consultar references/wireframe-tabela-format.md.

---

Fase 2 — Landing Page Premium

Transforma o wireframe-tabela em HTML premium funcional com design de alto impacto.

Pré-requisito: Wireframe-tabela da Fase 1 concluído e aprovado.

Etapa 2.1 — Definir Design System

Antes de gerar o HTML, definir o design system baseado no briefing:

design_system:
  style: "liquid-glass | glassmorphism | skeuomorphism | minimal-luxury | dark-premium"
  mode: "dark | light | auto"

  cores:
    primary: "[Cor principal da marca]"
    accent: "[Cor de destaque/CTA]"
    background: "[Cor de fundo]"
    surface: "[Cor de cards/superfícies]"
    text_primary: "[Cor texto principal]"
    text_secondary: "[Cor texto secundário]"
    gradient: "[Gradiente principal, se aplicável]"

  tipografia:
    font_display: "[Fonte para headlines — Google Fonts]"
    font_body: "[Fonte para body — Google Fonts]"
    scale: "1.25 | 1.333 | 1.414"   # major third, perfect fourth, augmented fourth

  efeitos:
    blur: "12px | 20px | 30px"       # backdrop-filter blur
    opacity_glass: "0.05 | 0.1 | 0.15"  # opacidade dos cards glass
    border_glow: true | false
    grain_texture: true | false
    gradient_orbs: true | false      # orbs decorativos de gradiente

Se o cliente não forneceu paleta: Derivar do setor/produto usando princípios de psicologia de cor.

Etapa 2.2 — Gerar Landing Page Premium

Aplicar o wireframe-tabela com o design system definido. O HTML deve ser auto-contido (todo CSS e JS inline).

Pilares visuais da LP premium:

1. Glassmorphism / Liquid Glass

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

• Cards, navbar, formulário: todos com efeito glass
• Bordas sutis luminosas (border: 1px solid rgba(255,255,255,0.08))
• Box-shadow multicamada para profundidade

2. Gradient Orbs Decorativos

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
}
.orb-1 { width: 400px; height: 400px; background: var(--primary); top: -100px; right: -100px; }
.orb-2 { width: 300px; height: 300px; background: var(--accent); bottom: -50px; left: -80px; }

• 2-3 orbs por seção principal (hero, CTA)
• Cores do design system com blur alto e opacidade baixa
• pointer-events: none para não interferir na interação

3. Micro-Animations (Scroll-Triggered)

data-animate="fade-up"      → Títulos, grids, formulários
data-animate="fade-scale"   → Cards, CTAs, tabelas
data-animate="slide-left"   → Layout lado a lado (esquerda)
data-animate="slide-right"  → Layout lado a lado (direita)
data-stagger                → Grids para aparição sequencial (120ms)

IntersectionObserver vanilla JS (zero dependências externas).

4. Tipografia Premium

• Display font (headlines): grande, bold, com gradiente de cor opcional
• Body font: alta legibilidade, peso 400-500
• Escala tipográfica consistente (major third ou perfect fourth)

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

5. CTAs de Alta Conversão

.cta-premium {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: none;
    border-radius: 12px;
    padding: 16px 40px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 24px rgba(var(--primary-rgb), 0.4);
}
.cta-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.5);
}

6. Formulário Premium

• Card glass com padding generoso
• Inputs com bordas glass (border: 1px solid rgba(255,255,255,0.1))
• Labels flutuantes ou como placeholder
• Dropdowns estilizados para lead scoring
• Microinteração: focus com glow sutil na borda
• Trust text abaixo do CTA (cadeado + confidencialidade)

7. Floating Navbar

.navbar {
    position: fixed;
    top: 16px;
    left: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    z-index: 100;
    padding: 12px 24px;
}

Para template HTML completo com CSS e JS, consultar references/premium-template.md.

Etapa 2.3 — Acessibilidade (Obrigatório)

• prefers-reduced-motion: desativar animações
• Contraste mínimo 4.5:1 para texto (WCAG AA)
• Texto glass: garantir legibilidade com text-shadow sutil se necessário
• cursor: pointer em todos os elemento clicáveis
• Labels acessíveis nos formulários (aria-label se flutuantes)
• Responsivo: 375px, 768px, 1024px, 1440px

---

Quality Gate — 5 Dimensões de UX (Validação Pré-Entrega)

Antes de entregar qualquer output (tabela ou LP premium), validar:

Dimensão	Pergunta-chave	O que verificar
Motivação (peso 4)	"Você oferece o que eu preciso?"	Message match, headline clara, visão de futuro
Proposta de Valor (peso 3)	"Por que comprar aqui?"	Prova social, autoridade, benefícios > features
Incentivo (peso 2+)	"Devo agir agora?"	Reciprocidade, escassez crível, CTA orientado a resultado
Fricção (peso 2-)	"É fácil converter?"	Escaneabilidade, sequência lógica, responsivo
Incerteza (peso 2-)	"É seguro?"	Quebra de objeções, garantias, caminhos de suporte

Se qualquer dimensão estiver fraca, ajustar antes de entregar.

---

Leis Inegociáveis

1. BRIEFING PRIMEIRO
   Se não tem briefing completo, não cria LP. Perguntar.

2. FRAMEWORK JUSTIFICADO
   Nunca escolher framework aleatoriamente. Justificar tecnicamente.

3. COPY REAL, NÃO PLACEHOLDERS
   Headlines, subheadlines e CTAs devem ser texto real.

4. DESIGN SYSTEM ANTES DE HTML
   Definir cores, fontes e efeitos ANTES de gerar a página.

5. FIDELIDADE AO WIREFRAME-TABELA
   A LP premium deve seguir fielmente estrutura, seções,
   headlines e copy do wireframe-tabela aprovado.

6. GLASSMORPHISM COM LEGIBILIDADE
   Efeitos glass nunca devem comprometer a leitura do texto.
   Contraste > estética.

7. PERFORMANCE
   O HTML deve carregar rápido. Zero dependências de JS externo
   (exceto Google Fonts e ícones). Animações via CSS + 
   IntersectionObserver vanilla.

8. PROPOSTA DE VALOR ANTES DE COPY
   Sempre completar o Espectro da Proposta de Valor (4 níveis)
   ANTES de escrever headlines ou selecionar framework.

---

Anti-Padrões

❌ Glass sem contraste — texto ilegível sobre fundo transparente
❌ Blur excessivo — backdrop-filter > 40px mata performance
❌ Orbs demais — mais de 3 por seção gera confusão visual
❌ Emojis como ícones — usar SVG (Lucide, Heroicons, Font Awesome)
❌ Animações em loop infinito — usar once: true
❌ Escala hover que move layout — usar translateY, não scale
❌ Dark mode sem testar contraste — #94A3B8 sobre #0F172A é ilegível
❌ Framework por default — AIDA sem analisar contexto
❌ Copy genérica — "Seu negócio mais eficiente" sem conexão
❌ Formulário sem lead scoring — todos os campos texto-livre
❌ Inventar dados — criar estatísticas que não existem no briefing
❌ Pular Espectro da Proposta de Valor — escrever copy sem definir diferencial
❌ Headline sem especificidade — "Transforme seu negócio" é vazio
❌ Fricção cognitiva — wall of text, hierarquia visual ruim, jargão técnico
❌ Fricção emocional — pedir info demais cedo, desalinhamento de awareness
❌ Fricção de interação — formulário longo, CTA invisível, layout quebrado

---

Formato de Output

Fase 1 — Wireframe-Tabela

Arquivo HTML estilizado com tabela de 5 colunas + defesa do wireframe. Para template detalhado, consultar references/wireframe-tabela-format.md.

Fase 2 — Landing Page Premium

Arquivo HTML auto-contido com:

1. Google Fonts (display + body)
2. Font Awesome ou Lucide icons (CDN)
3. CSS Design System completo inline
4. Glassmorphism/liquid glass em cards, navbar, formulário
5. Gradient orbs decorativos
6. Scroll animations via IntersectionObserver
7. Formulário premium com lead scoring
8. Floating navbar
9. Responsivo (375px → 1440px)
10. prefers-reduced-motion respeitado

Para template HTML completo, consultar references/premium-template.md.

---

Notas Operacionais

1. As 2 fases podem ser executadas juntas ou separadas
2. A Fase 2 depende obrigatoriamente do output da Fase 1
3. Se o usuário pedir "landing page" sem especificar, gerar Fase 1 primeiro e perguntar se deseja a LP premium
4. Se houver múltiplas marcas/produtos, processar sequencialmente
5. Se o cliente fornecer URL do site, analisar design existente e alinhar o design system
6. Dark mode é o default para glassmorphism (melhor efeito visual), mas adaptar ao briefing
7. Nunca elogiar o próprio trabalho — análise objetiva de forças e fraquezas

---

Output HTML — UTM e Branding

A landing page gerada (Fase 2) já é um HTML premium. Garantir que:

1. Footer inclua link gui.marketing com UTM: https://gui.marketing/?utm_source=esc-skills&utm_medium=deliverable&utm_campaign=guimkt-landing-page&utm_content=footer
2. Se usar logo gui.marketing, incluir link UTM: https://gui.marketing/?utm_source=esc-skills&utm_medium=deliverable&utm_campaign=guimkt-landing-page&utm_content=header-logo
3. O Wireframe-Tabela (Fase 1) deve usar template references/wireframe-framework-tabela-template.html para versão HTML de apresentação

IMPORTANTE: O output .md do wireframe DEVE continuar sendo gerado normalmente — ele é o artefato-ponte entre etapas do workflow.

---

⚠️ Known Limitations

1. Sem validação de performance real: A skill gera HTML estilizado mas não roda Lighthouse, PageSpeed ou Core Web Vitals. O output pode ter imagens pesadas, CSS inline extenso ou JS que impacta LCP/CLS. Sempre validar performance antes de publicar.
2. Dependência do wireframe: A Fase 2 (HTML premium) depende fortemente da qualidade do Wireframe-Tabela. Se o wireframe tiver seções vagas ou copy fraca, o HTML vai refletir isso — a skill não inventa conteúdo.
3. Formulários são estáticos: Os formulários gerados são apenas HTML/CSS — não integram com CRM, RD Station, HubSpot ou GTM automaticamente. A integração precisa ser feita manualmente pelo desenvolvedor.
4. Responsividade básica: O CSS gerado inclui media queries padrão, mas pode precisar de ajustes para breakpoints específicos ou devices não-convencionais. Testar em múltiplos dispositivos antes de publicar.
5. Assets visuais são placeholders: Se o briefing não incluir imagens reais (fotos de produto, logo, equipe), a skill usa descrições textuais como placeholder — não gera imagens automaticamente.

---

📋 Output Examples

Veja outputs reais gerados por esta skill no showcase:

• Landing Page — ACME B2B
• Landing Page — ACME B2C
• Landing Page — WHISKAS B2B
• Landing Page — WHISKAS B2C