Skill de Landing Page SaaS

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

1. Leia o contexto

Antes de escrever qualquer coisa:

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

Seções obrigatórias, em ordem:

Hero — logotipo ou marca nominativa, título (entrada do slogan), subtítulo (1–2 frases), CTA principal, CTA secundário. Use o parâmetro hero_density como padding vertical em px.
Recursos — 3 a 6 blocos de recursos. Cada: ícone, título curto, corpo de 1–2 frases.
Prova social — proof_count logotipos ou depoimentos. Se for 0, pule esta seção.
Preços — 2 a 3 planos. Inclua apenas se has_pricing for verdadeiro.
CTA do rodapé — faixa larga com cor de destaque e um 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 títulos, a fonte do corpo para todo o resto.
Layout: respeite as regras de grade, largura máxima e espaçamento entre seções.
Componentes: use os padrões de botão/cartão/input declarados. Não adicione sombras se DESIGN.md disser mínimo em "Profundidade e Elevação".
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 CSS embutido em um bloco <style> dentro de <head>.
Fallbacks de fontes do sistema caso as fontes do DESIGN.md não possam 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 tem conteúdo significativo, não é lorem ipsum (use as entradas product_name e tagline; gere texto específico plausível para o restante).
Não há referências de cores quebradas (cada valor de cor CSS está na paleta do DESIGN.md ou é uma variante alfa/fallback válida).
Os pontos de interrupção 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, JS ou README separado.

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

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

Coisas a notar:

O bloco de metadados od: é metadado de compatibilidade retido. Clean Design lê suas entradas tipadas, controles deslizantes, metadados de pré-visualização e dicas de capacidade.
O fluxo de trabalho abaixo do bloco de metadados é 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á ao agente autoridade para substituir quando o briefing conflitar, mas nunca para inventar novos tokens.
A marcação data-od-id conecta elementos ao modo de comentário local. Skills que desejam compatibilidade com modo de comentário devem anotar sua saída.

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