Habilidade de Página de Destino SaaS
Produza uma página de destino SaaS em arquivo único que venda um produto com uma única ideia.
Fluxo de Trabalho
- Leia o DESIGN.md ativo (injetado acima). Herói, cards e CTAs obtêm cor, tipo, espaçamento e raio de seus tokens. Não invente valores - use apenas
var(--token). - Nomeie o produto e a promessa. A partir do briefing, derive um nome de produto concreto, uma promessa de uma linha e a única ação principal (Iniciar teste / Agendar demonstração / Começar). Escreva conteúdo real - sem placeholders "Recurso Um / Sua Empresa Aqui".
- Organize as seções nesta ordem:
- Navegação fixa: logotipo à esquerda, 4-5 links, botão CTA primário à direita.
- Herói: um H1 (máx. ~8 palavras), um parágrafo de apoio, dois botões (primário + secundário), e um placeholder emoldurado para visual do produto.
- Faixa de logotipos: 5-6 nomes de clientes, suaves, espaçados uniformemente.
- Grade de recursos: 6 cards, cada um com título curto (<=5 palavras) e um benefício de 1-2 frases - não uma lista de especificações.
- Depoimento: uma citação com nome, cargo, empresa.
- Amostra de preços: 2-3 cards de planos, preços na moeda do briefing, marcadores de recursos (<=5 por card), um plano destacado.
- Faixa de CTA de encerramento + rodapé enxuto (colunas Produto / Empresa / Legal).
- Mantenha o nível de qualidade:
- Um H1 na página; H2 por seção; hierarquia por escala, não por cor.
- Cor primária usada apenas para ações - nunca como decoração.
- Ritmo de seção usa a escala de espaçamento (
--section-y-*ou tokens de espaço); alterne superfície/fundo das bandas para dar espaço de respiro. - Cada elemento interativo tem um estado de foco visível; botões têm >=44px de altura; contraste de texto suave em fundos de banda >= 4.5:1.
- Responsivo: coluna única abaixo de 768px, navegação colapsa para uma linha de links simples empilhada ou sem hambúrguer.
- Gere um
index.htmlauto-contido -<style>incorporado, sem requisições externas, sem JavaScript a menos que o briefing exija.
Antipadrões
- Gradientes genéricos atrás do herói com texto sobreposto ilegível.
- Seis recursos igualmente grandes que todos afirmam ser "poderosos".
- Mais de um tom de destaque por tela; vermelho/ember reservado para erros.
- Lorem ipsum, "Desbloqueie o poder de...", "Revolucione...".