Frontend Landings

Gere páginas de destino HTML impressionantes, zero build, em arquivo único, com presets visuais curados, animações suaves, design responsivo e modo escuro/claro — tudo em um único arquivo autossuficiente.

Antes de Começar

Leia o arquivo de referência de presets visuais para entender as estéticas disponíveis:

references/STYLE_PRESETS.md

Dois Modos de Operação

Modo 1: Do Zero

O usuário fornece os detalhes do produto → gere uma landing page completa.

Colete estas entradas (pergunte se não fornecidas):

Nome do produto/marca (obrigatório)
Tagline / manchete principal (obrigatório)
3–6 funcionalidades ou benefícios principais (obrigatório)
Público-alvo (ajuda)
CTA principal (ex.: "Iniciar Teste Grátis", "Entrar na Lista de Espera") — padrão: "Comece Agora"
Preferências de cor (opcional — o preset cuidará disso)
Preset visual (mostre o menu de presets se não especificado)

Modo 2: Melhorar / Converter

O usuário fornece HTML existente, uma descrição, um screenshot ou uma URL → aprimore com melhor design, animações e responsividade.

Fluxo de trabalho:

Analise o design existente (estrutura, cores, tipografia, layout)
Identifique melhorias (animações, responsividade, acessibilidade, hierarquia visual)
Pergunte qual preset visual aplicar (ou preserve a estética existente)
Regere como um HTML de arquivo único com todas as melhorias

Sistema de Presets Visuais

SEMPRE ofereça o menu de presets no início de qualquer tarefa de landing page, a menos que o usuário já tenha escolhido um ou descrito explicitamente uma estética específica.

Apresente os presets assim:

Escolha um estilo visual para sua landing page (digite o número ou nome):

 1. ☁️  SaaS Minimalista Clean     — Brancos nítidos, sombras sutis, sensação nativa do sistema
 2. 🔮  Glassmórfico Moderno       — Painéis de vidro fosco, gradientes, translucidez
 3. 🏗️  Brutalista Ousado          — Texturas de concreto cru, tipo monoespaçado, contraste marcante
 4. 🌆  Ciberpunk Neon             — Fundos escuros, brilho elétrico, efeitos de linha de varredura
 5. ✒️  Premium Serif Elegante     — Luxo editorial, manchetes serifadas, toques dourados
 6. 🎨  Gradientes Divertidos      — Animações saltitantes, gradientes mesh, tudo arredondado
 7. 🌙  Modo Escuro Primeiro       — Pretos profundos, acentos neon, otimizado para OLED
 8. 📻  Vintage Retrô              — Tons sépia quentes, tipo retrô, texturas nostálgicas
 9. 🌿  Natureza Orgânica          — Tons terrosos, formas orgânicas, ilustrações botânicas
10. 🏢  Corporativo Profissional   — Paleta azul-marinho/giz, grade estruturada, constrói confiança

Ou descreva sua própria estética personalizada!

Depois que o usuário escolher, leia references/STYLE_PRESETS.md para as variáveis CSS detalhadas, pilhas de fontes, estilos de animação e tokens de design para aquele preset.

Requisitos de Saída

Arquitetura de Arquivo Único HTML

Cada saída DEVE ser um arquivo HTML completo e autossuficiente. Estrutura:

<!DOCTYPE html>
<html lang="pt" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Meta Tags SEO -->
  <title>{Nome do Produto} — {Tagline}</title>
  <meta name="description" content="{Descrição concisa do produto}">
  <meta property="og:title" content="{Nome do Produto}">
  <meta property="og:description" content="{Descrição}">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  
  <!-- CDN Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Anime.js para animações -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  
  <!-- Google Fonts (específico do preset) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family={Fontes+do+Preset}&display=swap" rel="stylesheet">
  
  <!-- Config Tailwind + Tema Personalizado -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          // Extensões específicas do preset
          fontFamily: { /* do preset */ },
          colors: { /* do preset */ },
        }
      }
    }
  </script>
  
  <style>
    /* Propriedades Personalizadas CSS do preset */
    :root { /* vars tema claro */ }
    .dark { /* vars tema escuro */ }
    
    /* Classes base de animação acionada por scroll */
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal.active { opacity: 1; transform: translateY(0); }
    
    /* Estilos personalizados específicos do preset */
  </style>
</head>
<body>
  <!-- Todo o conteúdo aqui -->
  
  <script>
    // Alternância de modo escuro
    // Observador de revelação por scroll
    // Animações de entrada com Anime.js
    // Componentes interativos (acordeão FAQ, alternância de preços, etc.)
  </script>
</body>
</html>

Pilha CDN (nenhuma outra permitida)

Tailwind CSS: https://cdn.tailwindcss.com (com config inline)
Anime.js: https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js
Google Fonts: Apenas fontes específicas do preset
Ícones: SVG inline apenas (estilo Heroicons). NUNCA use CDNs de fontes de ícones.

Funcionalidades Obrigatórias em Cada Saída

Design Responsivo — Mobile-first. Teste mentalmente em 375px, 768px, 1280px.
Modo Escuro/Claro — Detecção automática prefers-color-scheme + botão de alternância manual no menu de navegação.
Animações de Scroll — Animações de revelação baseadas em IntersectionObserver em todas as seções.
Rolagem Suave — scroll-smooth no html + JS para âncoras de navegação.
Acessibilidade — HTML5 semântico, rótulos ARIA em elementos interativos, estilos focus-visible, link "pular para o conteúdo", contraste de cores suficiente.
Meta Tags SEO — title, description, og:title, og:description, og:type, twitter:card.
Performance — Carregamento lento de imagens, CSS eficiente, JS mínimo.

Geração de Seções

Com base na entrada do usuário, inclua estas seções de forma inteligente. Nem todas são obrigatórias — adapte ao contexto do produto:

Sempre Incluir:

Navegação — Nav fixa/sticky com logotipo, links, alternador de modo escuro, botão CTA principal
Hero — Manchete grande + sub-manchete + botão(ões) CTA + elemento visual (gradiente, forma abstrata ou placeholder de imagem)
Funcionalidades — 3–6 cards/grid de funcionalidades com ícones SVG inline
CTA Final — Banner de call-to-action de largura total com manchete + botão
Rodapé — Links, direitos autorais, ícones sociais (SVG inline)

Incluir Quando Relevante:

Prova Social / Logotipos — Barra de logotipos "Confiado por" (use caixas placeholder com nomes estilo empresa)
Depoimentos — 2–3 cards de citação com placeholders de avatar
Preços — 3 tiers com alternância mensal/anual (alimentado por JS)
FAQ — Acordeão com animações suaves de abrir/fechar
Como Funciona — Processo de 3 etapas com etapas numeradas
Estatísticas / Métricas — Contadores animados (ex.: "10k+ usuários", "99,9% de uptime")

Manual de Animações

Use estes padrões de animação de forma consistente:

Revelação por Scroll (IntersectionObserver)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

Entrada Escalonada (Anime.js)

anime({
  targets: '.feature-card',
  opacity: [0, 1],
  translateY: [40, 0],
  delay: anime.stagger(100, { start: 300 }),
  easing: 'easeOutCubic',
  duration: 800
});

Animação do Texto Hero

anime({
  targets: '.hero-title .word',
  opacity: [0, 1],
  translateY: [20, 0],
  delay: anime.stagger(80),
  easing: 'easeOutExpo',
  duration: 1200
});

Micro-interações de Hover

Use transições CSS para hovers — Anime.js apenas para sequências complexas:

.card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); }

Animação de Contador

function animateCounter(el) {
  const target = parseInt(el.dataset.target);
  anime({
    targets: el,
    innerHTML: [0, target],
    round: 1,
    easing: 'easeInOutExpo',
    duration: 2000
  });
}

Implementação do Modo Escuro

// Verificar preferência do sistema e preferência salva
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && prefersDark)) {
  document.documentElement.classList.add('dark');
}

// Função de alternância (vincular ao botão)
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

Botão de alternância no nav:

<button onclick="toggleDark()" aria-label="Alternar modo escuro" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
  <!-- Ícone de sol (mostrado no modo escuro) -->
  <svg class="hidden dark:block w-5 h-5" ...>...</svg>
  <!-- Ícone de lua (mostrado no modo claro) -->
  <svg class="block dark:hidden w-5 h-5" ...>...</svg>
</button>

Tipografia e Regras Anti-Genéricas

NUNCA use estas fontes: Inter, Roboto, Arial, Helvetica, Open Sans, padrões system-ui.

Cada preset especifica seu próprio par de fontes distintas. Sempre carregue do CDN do Google Fonts.

NUNCA use cores padrão do Tailwind sem personalização. Cada preset define uma paleta personalizada através de variáveis CSS E da extensão tailwind.config.

NUNCA gere uma página que pareça com qualquer outra página de destino gerada por IA. Cada preset possui diferenciadores específicos — honre-os.

Ícones SVG Inline

Use SVGs inline estilo Heroicons. Aqui está o padrão:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="..." />
</svg>

Inclua 6–8 ícones comumente necessários diretamente no HTML. Escolha ícones contextualmente relevantes para as funcionalidades do produto.

Implementação do Acordeão FAQ

document.querySelectorAll('.faq-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const content = btn.nextElementSibling;
    const icon = btn.querySelector('.faq-icon');
    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
    
    // Fechar todos os outros
    document.querySelectorAll('.faq-content').forEach(c => { c.style.maxHeight = '0px'; });
    document.querySelectorAll('.faq-icon').forEach(i => { i.style.transform = 'rotate(0deg)'; });
    
    if (!isOpen) {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.style.transform = 'rotate(45deg)';
    }
  });
});

Implementação da Alternância de Preços

const toggle = document.getElementById('pricing-toggle');
const monthlyPrices = document.querySelectorAll('.price-monthly');
const annualPrices = document.querySelectorAll('.price-annual');

toggle.addEventListener('change', () => {
  const isAnnual = toggle.checked;
  monthlyPrices.forEach(el => el.classList.toggle('hidden', isAnnual));
  annualPrices.forEach(el => el.classList.toggle('hidden', !isAnnual));
});

Instruções Finais de Saída

Após gerar o HTML, SEMPRE anexe esta orientação:

✅ Sua landing page está pronta!

Para usá-la:
1. Copie todo o código acima para um arquivo chamado `index.html`
2. Abra-o em qualquer navegador — funciona independentemente, sem necessidade de build

Para implantar gratuitamente:
• Vercel: vercel.com → Novo Projeto → arraste e solte seu index.html
• Netlify: app.netlify.com → arraste e solte seu index.html
• GitHub Pages: Envie para um repositório → Configurações → Pages → Implantar a partir da main

Para personalizar ainda mais:
• Cores: Edite as variáveis CSS em :root { } e .dark { }
• Conteúdo: Todo o texto está diretamente no HTML — localize e substitua
• Fontes: Troque o link do Google Fonts e os valores de font-family
• Animações: Ajuste o tempo nas chamadas Anime.js e transições CSS

Checklist de Qualidade

Antes de entregar, verifique mentalmente:

hemsurendranath/frontend-landings-claude-skill

O que é frontend-landings-claude-skill?

Perguntar na sua IA favorita

Documentação