Habilidade de Landing Page SaaS

Produza uma landing page SaaS de página única. Agente, siga este fluxo de trabalho exatamente.

1. Ler contexto

Antes de escrever qualquer coisa:

• Leia DESIGN.md no diretório de trabalho atual. Se estiver faltando, pare e peça um.
• Identifique a paleta de cores, os tokens de tipografia e os princípios de layout.
• Observe a seção "Guia de Prompt do Agente" — ela substitui qualquer instrução aqui se houver conflito.

2. Planejar seções

Seções obrigatórias, em ordem:

1. Hero — logo ou wordmark, título (entrada de tagline), subtítulo (1–2 frases), CTA primário, CTA secundário. Use o parâmetro hero_density como preenchimento vertical em px.
2. Recursos — 3–6 blocos de recursos. Cada um: ícone, título curto, corpo de 1–2 frases.
3. Prova social — proof_count logos ou depoimentos. Se 0, pule esta seção.
4. Preços — 2–3 níveis. Inclua apenas se has_pricing for verdadeiro.
5. CTA de Rodapé — faixa grande com cor de destaque e um botão de chamada para ação.
6. Rodapé — mínimo: links + copyright.

3. Aplicar sistema de design

• Todas as cores devem vir dos tokens do DESIGN.md. Não invente valores hexadecimais.
• Tipografia: use a fonte de exibição declarada para títulos, a fonte do corpo para todo o resto.
• Layout: respeite a grade, a largura máxima e as regras de espaçamento entre seções.
• Componentes: use os padrões de botão/card/entrada declarados. Não adicione sombras se o "Profundidade e Elevação" do DESIGN.md indicar mínimo.
• Destaque: use a cor de destaque apenas uma vez no hero, uma vez no CTA do rodapé e para todos os links. Não inunde a página.

4. Escrever o arquivo

Produza um único index.html autocontido com:

• Todo o CSS embutido em um bloco <style> em <head>.
• Fallbacks de fonte do sistema se as fontes do DESIGN.md não puderem ser carregadas do Google Fonts etc.
• Sem JS externo.
• HTML semântico (<header>, <main>, <section>, <footer>).
• Cada elemento editável marcado com data-od-id="<unique-slug>" para que o modo de comentário do aplicativo host possa direcioná-lo.

5. Auto-verificação

Antes de finalizar, verifique:

• Todo o texto tem significado de conteúdo, não lorem ipsum (use as entradas product_name e tagline; gere cópias específicas plausíveis para o restante).
• Nenhuma referência de cor quebrada (cada valor de cor CSS está na paleta do DESIGN.md ou em uma variante válida de alfa/fallback).
• Os pontos de interrupção responsivos correspondem à seção "Comportamento Responsivo" do DESIGN.md.
• A página tem boa aparência em 1440w, 768w e 375w (simule mentalmente).
• O destaque foi usado no máximo duas vezes no total.

6. Concluído

Escreva apenas index.html. Não gere um arquivo CSS, arquivo JS ou README separado.

Para autores de habilidades lendo isso como referência

Esta é uma habilidade mínima, mas completa. Estrutura:

saas-landing-skill/
├── SKILL.md    ← you are here
└── assets/
    └── base.html    (optional starter template; this skill doesn't use one)

Coisas a notar:

• O bloco de front-matter od: é opcional para compatibilidade apenas com Claude-Code, mas adicioná-lo ativa as entradas tipadas do OD, sliders, metadados de visualização e controle de capacidade.
• O fluxo de trabalho abaixo do front-matter é Markdown simples que o agente lê como seu prompt do sistema.
• O DESIGN.md é tratado como um colaborador, não como uma substituição. A habilidade dá ao agente autoridade para substituir quando o briefing entra em conflito, mas nunca para inventar novos tokens.
• A marcação data-od-id é como conectamos elementos ao modo de comentário. Habilidades que desejam compatibilidade com o modo de comentário devem anotar sua saída.

Veja ../../docs/skills-protocol.md para o protocolo completo.