Ship Page

Crie landing pages interativas e ricas em animação que rodam inteiramente no navegador como um único arquivo HTML.

Esta skill ajuda não-designers a publicar páginas de produto profissionais através da exploração visual ("mostre, não conte"), gerando então landing pages prontas para produção com interatividade real — não maquetes estáticas.

Princípios Fundamentais

Zero Dependências — Único arquivo HTML com CSS/JS inline. Sem npm, sem ferramentas de build, sem frameworks. Um único arquivo HTML sobreviverá a qualquer projeto React.
Mostre, Não Conte — As pessoas não conseguem descrever o que querem, mas reconhecem quando veem. Gere prévias visuais, deixe-as escolher.
Anti-AI-Slop — Sem gradientes roxos sobre branco. Sem templates SaaS genéricos. Cada página deve parecer feita sob medida para o produto.
Interativo por Padrão — Landing pages não são slides. Elas têm animações de scroll, estados de hover, contadores de dados, efeitos de partículas e microinterações que fazem os visitantes ficarem.
Pronto para Publicar — O resultado funciona imediatamente. Coloque o arquivo HTML em qualquer lugar — GitHub Pages, Vercel, Netlify ou apenas abra no navegador.

Modo de Detecção

Modo A: Nova Página — Crie do zero. Vá para a Fase 1.
Modo B: Conversão de README — Transforme um README do GitHub ou descrição de produto em uma landing page. Extraia o conteúdo, depois vá para a Fase 1, Etapa 2 (pule as perguntas de conteúdo, vá direto para o estilo).
Modo C: Aprimoramento — Melhore uma landing page HTML existente. Leia-a, entenda a estrutura, aprimore preservando o conteúdo. Siga as regras de viewport e densidade de seções.

Fase 1: Descoberta

Entenda o produto e colete o conteúdo. Faça TODAS as perguntas em uma única chamada AskUserQuestion.

Pergunta 1 — Tipo de Produto (cabeçalho: "Produto"): O que você está construindo? Opções: SaaS / Ferramenta de Desenvolvedor / Aplicativo Móvel / Projeto Open Source / Marca Pessoal / Outro

Pergunta 2 — Conteúdo (cabeçalho: "Conteúdo"): O que a página deve incluir? Opções: Vou colar meu conteúdo / Puxar do meu README / Apenas descreva para mim / Tenho um documento

Pergunta 3 — Seções Principais (cabeçalho: "Seções", multiSeleção: verdadeiro): Quais seções você precisa? Opções: Hero com CTA / Grade de Funcionalidades / Como Funciona / Preços / Depoimentos / FAQ / Estatísticas e Métricas / Inscrição Newsletter / Emblema de Estrelas do GitHub

Pergunta 4 — Público-Alvo (cabeçalho: "Lançamento"): Onde esta página vai ficar? Opções: GitHub Pages / Site independente / Lançamento no Product Hunt / Apenas explorando

Se o usuário fornecer conteúdo (README, descrição, documento), prossiga para:

Etapa 1.1: Análise de Conteúdo

Analise o conteúdo fornecido e extraia:

Nome do produto e descrição em uma linha
Funcionalidades principais (busque 3-6)
Sinais do público-alvo
Quaisquer métricas/números mencionados
Chamada para ação (o que os visitantes devem fazer?)

Confirme via AskUserQuestion (cabeçalho: "Verificação de Conteúdo"): "Aqui está o que extraí — parece certo?" Opções: Parece bom / Deixe-me ajustar

Fase 2: Descoberta de Estilo

Esta é a fase "mostre, não conte". A maioria das pessoas não consegue articular preferências de design em palavras.

Etapa 2.1: Seleção de Vibração

Pergunte via AskUserQuestion (cabeçalho: "Vibe", multiSeleção: verdadeiro, máximo: 2): Qual sentimento os visitantes devem ter? Opções: Futurista & Tecnológico / Limpo & Minimalista / Audacioso & Energético / Escuro & Premium / Lúdico & Criativo / Corporativo & Confiável

Etapa 2.2: Gerar Prévias de Estilo

Com base na seleção de vibe, gere 3 prévias HTML de seção única distintas mostrando:

Escolhas tipográficas (par de fonte de título + corpo)
Paleta de cores (fundo, texto, destaque, CTA)
Layout da seção hero com o nome do produto
Uma microinteração ou animação
Atmosfera geral (tratamento de fundo, espaçamento)

Cada prévia deve ser um arquivo HTML completo e funcional mostrando apenas a seção hero estilizada de três maneiras completamente diferentes. Salve prévias em .ship-page/previews/.

Leia references/STYLE_PRESETS.md para definições de predefinições curadas. Use as predefinições como BASE, depois personalize para o produto específico.

Confirme via AskUserQuestion (cabeçalho: "Escolha Seu Estilo"): "Qual direção ressoa?" Opções: Estilo A / Estilo B / Estilo C / Misturar elementos (descreva)

Etapa 2.3: Seleção Direta de Predefinição (Alternativa)

Se o usuário já sabe o que quer ou disser "apenas faça escuro/minimalista/tech":

Leia references/STYLE_PRESETS.md
Associe à predefinição mais próxima
Pule a geração de prévias, vá para a Fase 3

Fase 3: Gerar Landing Page

Gere a landing page completa usando o conteúdo da Fase 1 e o estilo da Fase 2.

Regras de Estrutura

Toda landing page segue esta arquitetura:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <!-- Fontes, variáveis CSS, todos os estilos inline -->
  <!-- Sem dependências externas exceto Google Fonts + Font Awesome CDN -->
</head>
<body>
  <nav><!-- Nav fixa com nome do produto + CTA --></nav>
  
  <section class="hero"><!-- Acima da dobra: headline, subheadline, CTA --></section>
  <section class="features"><!-- Grade de funcionalidades ou vitrine --></section>
  <section class="social-proof"><!-- Estatísticas, depoimentos, logotipos --></section>
  <!-- ... seções adicionais conforme necessário ... -->
  <section class="cta-final"><!-- Chamada para ação final --></section>
  <footer><!-- Links, copyright --></footer>

  <script>
    // Animações de scroll, contadores, interações — tudo inline
  </script>
</body>
</html>

Requisitos Técnicos Obrigatórios

Ajuste de Viewport — Cada seção deve parecer "completa" mas nunca transbordar. Use min-height: 100vh para o hero, alturas proporcionais para as demais.
Responsivo — Deve funcionar em dispositivos móveis. Use clamp() para todos os tamanhos de fonte, unidades relativas ao viewport para espaçamento.
Animações de Scroll — Use IntersectionObserver para revelar ao scroll. Os elementos devem animar ao entrar conforme o usuário rola.
Desempenho — Animações CSS preferidas em vez de JS. will-change em elementos animados. Debounce em manipuladores de scroll.
Acessível — HTML semântico, contraste suficiente, consulta de mídia prefers-reduced-motion para todas as animações.

Limites de Densidade de Seção

Por seção (para evitar superlotação):

Hero: 1 headline (máx. 8 palavras), 1 subheadline (máx. 20 palavras), 1-2 CTAs, efeito de fundo opcional
Funcionalidades: Máx. 6 cartões. Cada cartão: ícone + título (3-4 palavras) + descrição (máx. 15 palavras)
Estatísticas/Métricas: Máx. 4 contadores
Depoimentos: Máx. 3 citações
Preços: Máx. 3 planos
FAQ: Máx. 6 itens (use accordion/colapso)

Conteúdo demais para uma seção? Divida em duas seções com uma quebra visual entre elas.

Arquitetura CSS

:root {
  /* Tipografia — sempre use clamp() */
  --font-display: 'SUA_ESCOLHA', sans-serif;
  --font-body: 'SUA_ESCOLHA', sans-serif;
  --heading-size: clamp(2rem, 5vw, 4.5rem);
  --body-size: clamp(0.875rem, 1.5vw, 1.125rem);
  
  /* Cores — defina a paleta completa */
  --bg-primary: #...;
  --bg-secondary: #...;
  --text-primary: #...;
  --text-secondary: #...;
  --accent: #...;
  --accent-hover: #...;
  --cta-gradient: linear-gradient(...);
  
  /* Espaçamento */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --content-width: min(90vw, 1200px);
  
  /* Animação */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Classe base de revelação ao scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

JavaScript Essencial

Sempre inclua estes padrões:

// Revelação ao scroll com IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

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

// Contadores animados (para seções de estatísticas)
function animateCounter(el, target, duration = 2000) { ... }

// Scroll suave para links de navegação
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });

Leia references/SECTION_LIBRARY.md para templates completos de seção com padrões HTML, CSS e JS para cada tipo de seção.

Checklist Anti-AI-Slop

Antes de gerar, verifique:

Fontes NÃO são Inter, Roboto, Arial ou padrões do sistema
Esquema de cores NÃO é gradiente-roxo-em-branco
Hero não usa as palavras "Revolucionar" ou "Turboalimentar"
Botões de CTA têm animações de hover, não apenas mudança de cor
Fundo tem textura/profundidade — NÃO cor sólida lisa
Pelo menos uma escolha de design inesperada (layout assimétrico, tipografia ousada, divisor de seção criativo)

Entrega

Salve o arquivo HTML com um nome descritivo: {nome-do-produto}-landing.html
Abra no navegador: open {nome-do-produto}-landing.html
Apresente ao usuário e peça feedback

Fase 4: Iteração

Após a geração inicial, pergunte via AskUserQuestion (cabeçalho: "Feedback"): "Como está?" Opções: Pode publicar! / Ajustar cores-fontes / Alterar layout / Adicionar-remover seções / Recomeçar com novo estilo

Para modificações, siga estas regras:

Adicionar conteúdo: Verifique primeiro os limites de densidade da seção. Se excedidos, divida as seções.
Alterar estilo: Atualize as variáveis CSS, não reescreva a estrutura.
Adicionar seções: Leia references/SECTION_LIBRARY.md para o template da seção, insira em ordem lógica.
Remover seções: Exclua completamente, verifique se nenhuma referência JS quebra.

Referências (Divulgação Progressiva)

Esta skill usa divulgação progressiva — carregue os arquivos de referência somente quando necessário:

Arquivo	Quando ler	O que contém
`references/STYLE_PRESETS.md`	Fase 2 (descoberta de estilo)	5 predefinições de estilo curadas com variáveis CSS completas, pares de fonte e tratamentos de fundo
`references/SECTION_LIBRARY.md`	Fase 3 (geração)	Templates completos HTML/CSS/JS para cada tipo de seção (hero, funcionalidades, preços, etc.)

Ship Page — prompt→landing interativa (1 HTML)

O que é Ship Page — prompt→landing interativa (1 HTML)?

Perguntar na sua IA favorita

Documentação