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 o arquivo 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 — logotipo ou marca nominativa, título (entrada do slogan), subtítulo (1–2 frases), CTA primário, CTA secundário. Use o parâmetro hero_density como espaçamento vertical em px.
2. Funcionalidades — 3–6 blocos de funcionalidades. 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 planos. 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 do 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/input declarados. Não adicione sombras se o DESIGN.md disser que Profundidade e Elevação é mínima.
• Destaque: use a cor de destaque apenas uma vez no herói, uma vez no CTA do rodapé e em todos os links. Não inunde a página.

4. Escrever o arquivo

Produza um único index.html autocontido com:

• Todo o CSS inline em um bloco <style> dentro de <head>.
• Fontes de fallback 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.

5. Autoverificação

Antes de finalizar, verifique:

• Todo o texto tem conteúdo significativo, não é lorem ipsum (use as entradas product_name e tagline; gere 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 em uma variante alfa/fallback válida).
• Os breakpoints responsivos correspondem à seção de Comportamento Responsivo do DESIGN.md.
• A página parece boa em 1440w, 768w e 375w (simule mentalmente).
• Cor de destaque usada 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 que estão 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 opcional de início; este skill não usa um)

Coisas para notar:

• O bloco od: de front-matter é opcional para compatibilidade apenas com Claude-Code, mas adicioná-lo ativa as entradas tipadas, controles deslizantes, metadados de pré-visualização e restrição 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 como uma substituição. O skill dá ao agente autoridade para substituir quando o briefing conflitar, 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.

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