aurora-ember-bio-lab/splatstudio

Skill 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. Herói — logotipo ou marca nominal, título (entrada de tagline), subtítulo (1–2 frases), CTA primário, CTA secundário. Use o parâmetro hero_density como espaçamento 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 logotipos ou depoimentos. Se for 0, pule esta seção.
4. Preços — 2–3 faixas. Inclua apenas se has_pricing for verdadeiro.
5. CTA do rodapé — faixa grande com cor de destaque e um botão de chamada para ação.
6. Rodapé — mínimo: links + direitos autorais.

3. Aplicar sistema de design

• Todas as cores devem vir dos tokens de DESIGN.md. Não invente valores hexadecimais.
• Tipografia: use a fonte de exibição declarada para títulos, e 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/entrada declarados. 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 herói, 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> dentro de <head>.
• Fallbacks de 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 direcioná-lo.

5. Autoverificação

Antes de finalizar, verifique:

• Todo o texto é significativo em conteúdo, não lorem ipsum (use as entradas product_name e tagline; gere texto específico plausível para o restante).
• Nenhuma referência de cor quebrada (todo valor de cor CSS está na paleta do DESIGN.md ou em uma variante 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).
• Destaque usado no máximo duas vezes no total.

6. Concluído

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

---

Para autores de skill lendo isto como referência

Este é um skill mínimo, mas completo. Estrutura:

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

Coisas a notar:

• O bloco de front-matter od: é opcional para compatibilidade apenas com Claude-Code, mas adicioná-lo ativa as entradas tipadas, controles deslizantes, metadados de visualização e controle 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 substituto. O skill dá ao agente autoridade 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. Skills que desejam compatibilidade com modo de comentário devem anotar sua saída.

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