onfire7777/universal-ai-skills-library

Skill de Landing Page SaaS

Produzir 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 ficheiro DESIGN.md no diretório de trabalho atual. Se não existir, pare e peça um.
• Identifique a paleta de cores, os tokens de tipografia e os princípios de layout.
• Anote a secção "Guia de Prompt do Agente" — ela substitui qualquer instrução aqui, se houver conflito.

2. Planear secções

Secções obrigatórias, por ordem:

1. Hero — logotipo ou marca-palavra, manchete (input de tagline), subtítulo (1–2 frases), CTA primário, CTA secundário. Use o parâmetro hero_density como padding vertical em px.
2. Funcionalidades — 3 a 6 blocos de funcionalidades. Cada um: ícone, título curto, corpo de 1 a 2 frases.
3. Prova social — proof_count logotipos ou testemunhos. Se for 0, salte esta secção.
4. Preços — 2 a 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 call to action.
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 manchetes e a fonte de corpo para todo o resto.
• Layout: respeite a grelha, a largura máxima e as regras de espaçamento entre secções.
• Componentes: use os padrões declarados de botão/cartão/input. Não adicione sombras se a secção Profundidade & Elevação do DESIGN.md indicar mínimo.
• Destaque: use a cor de destaque apenas uma vez no hero, uma vez no CTA de rodapé e para todas as hiperligações. Não inunde a página.

4. Escrever o ficheiro

Produza um único index.html autocontido com:

• Todo o CSS inline num bloco <style> dentro de <head>.
• Fallbacks de fontes do sistema se as fontes do DESIGN.md não puderem ser carregadas (Google Fonts, etc.).
• Sem 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 da aplicação anfitriã o possa identificar.

5. Auto-verificação

Antes de terminar, verifique:

• Todo o texto é significativo para o conteúdo, não é lorem ipsum (use os inputs product_name e tagline; gere uma cópia específica e plausível para o resto).
• Nenhuma referência de cor quebrada (cada valor de cor CSS está na paleta do DESIGN.md ou numa variante alfa/fallback válida).
• Os breakpoints responsivos correspondem à secção Comportamento Responsivo do DESIGN.md.
• A página tem bom aspeto 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 ficheiro CSS separado, ficheiro JS ou README.

---

Para autores de skills que leem isto como referência

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

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

Coisas a notar:

• O bloco de front-matter od: é opcional para compatibilidade apenas com Claude Code, mas adicioná-lo ativa os inputs tipificados, sliders, metadados de pré-visualização e bloqueio de capacidades da 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. A skill dá ao agente autoridade para substituir quando o briefing conflita, mas nunca para inventar novos tokens.
• A marcação data-od-id é como ligamos elementos ao modo de comentário. Skills que queiram compatibilidade com modo de comentário devem anotar a sua saída.

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