Skill de Landing para SaaS

Produza uma landing page single-page para SaaS. Agente, siga exatamente este fluxo de trabalho.

1. Leia o contexto

Antes de escrever qualquer coisa:

Leia o arquivo DESIGN.md no diretório de trabalho atual. Se estiver ausente, pare e solicite 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.

Seções obrigatórias, em ordem:

Hero — logotipo ou marca-palavra, manchete (entrada do slogan), subtítulo (1–2 frases), CTA principal, CTA secundário. Use o parâmetro hero_density como padding vertical em px.
Funcionalidades — 3–6 blocos de funcionalidades. Cada um: ícone, título curto, corpo de 1–2 frases.
Prova social — proof_count logotipos ou depoimentos. Se 0, pule esta seção.
Preços — 2–3 planos. Inclua apenas se has_pricing for verdadeiro.
CTA do rodapé — faixa grande com cor de destaque e botão de chamada para ação.
Rodapé — mínimo: links + direitos autorais.

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

Gere um único index.html autocontido com:

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

Antes de finalizar, verifique:

Todo o texto é significativo, não lorem ipsum (use as entradas product_name e tagline; gere uma cópia específica plausível para o restante).
Nenhuma referência de cor quebrada (cada valor de cor CSS está na paleta do DESIGN.md ou é uma variante com alfa/fallback válida).
Os breakpoints responsivos correspondem à seção "Comportamento Responsivo" do DESIGN.md.
A página parece boa em 1440w, 768w e 375w (simule mentalmente).
A cor de destaque é usada no máximo duas vezes no total.

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

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

saas-landing-skill/
├── SKILL.md    ← você está aqui
└── assets/
    └── base.html    (template inicial opcional; esta skill não usa um)

Coisas a observar:

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

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