SaaS Landing Skill

Compétence SaaS Landing

Génère une page d'accueil SaaS mono-page. Agent, suis ce workflow exactement.

1. Contexte

Avant d'écrire quoi que ce soit :

• Lis DESIGN.md dans le répertoire de travail actuel. S'il manque, arrête-toi et demande-en un.
• Identifie la palette de couleurs, les jetons typographiques et les principes de mise en page.
• Note la section « Agent Prompt Guide » — elle remplace toute instruction ici en cas de conflit.

2. Planification des sections

Sections obligatoires, dans cet ordre :

1. Hero — logo ou mot-symbole, titre (saisie du slogan), sous-titre (1–2 phrases), CTA principal, CTA secondaire. Utilise le paramètre hero_density comme espacement vertical en px.
2. Fonctionnalités — 3 à 6 tuiles de fonctionnalités. Chacune : icône, titre court, corps de 1 à 2 phrases.
3. Preuve sociale — proof_count logos ou témoignages. Si 0, ignore cette section.
4. Tarifs — 2 à 3 formules. Inclure uniquement si has_pricing est vrai.
5. CTA Pied de page — large bande de couleur d'accent avec un seul bouton d'appel à l'action.
6. Pied de page — minimal : liens + copyright.

3. Application du système de design

• Toutes les couleurs doivent provenir des jetons de DESIGN.md. N'invente pas de valeurs hexadécimales.
• Typographie : utilise la police d'affichage déclarée pour les titres, la police de corps pour tout le reste.
• Mise en page : respecte les règles de grille, de largeur max et d'espacement des sections.
• Composants : utilise les motifs de boutons/cartes/saisies déclarés. N'ajoute pas d'ombres si DESIGN.md indique minimal dans Profondeur et Élévation.
• Accent : utilise la couleur d'accent une seule fois dans le hero, une seule fois dans le CTA du pied de page, et pour tous les liens. Ne sature pas la page.

4. Écrire le fichier

Produis un seul fichier index.html autonome contenant :

• Tout le CSS intégré dans un bloc <style> dans <head>.
• Des polices de secours système si les polices de DESIGN.md ne sont pas chargeables depuis Google Fonts, etc.
• Aucun JS externe.
• HTML sémantique (<header>, <main>, <section>, <footer>).
• Chaque élément modifiable balisé avec data-od-id="<slug-unique>" pour que le mode commentaire de l'application hôte puisse le cibler.

5. Auto-vérification

Avant de terminer, vérifie :

• Tout le texte a du sens, pas de lorem ipsum (utilise les saisies product_name et tagline ; génère un contenu spécifique plausible pour le reste).
• Aucune référence de couleur cassée (chaque valeur CSS de couleur est dans la palette de DESIGN.md ou une variante alpha/fallback valide).
• Les points de rupture responsive correspondent à la section Comportement Responsive de DESIGN.md.
• La page a un bon rendu à 1440w, 768w et 375w (simule mentalement).
• L'accent n'est utilisé qu'au maximum deux fois au total.

6. Terminé

Écris uniquement index.html. Ne génère pas de fichier CSS, JS ou README séparé.

---

Pour les auteurs de compétences lisant ceci comme référence

C'est une compétence minimale mais complète. Structure :

saas-landing-skill/
├── SKILL.md    ← vous êtes ici
└── assets/
    └── base.html    (template optionnel de démarrage ; cette compétence n'en utilise pas)

Choses à remarquer :

• Le bloc front-matter od: est optionnel pour la compatibilité avec Claude-Code uniquement, mais l'ajouter active les saisies typées, les curseurs, les métadonnées de prévisualisation et le filtrage par capacité d'OD.
• Le workflow en dessous du front-matter est du Markdown standard que l'agent lit comme son prompt système.
• DESIGN.md est traité comme un collaborateur, pas comme une surcharge. La compétence donne à l'agent l'autorité de surcharger lorsque le brief est en conflit, mais jamais d'inventer de nouveaux jetons.
• Le balisage data-od-id est la façon dont nous connectons les éléments au mode commentaire. Les compétences souhaitant la compatibilité avec le mode commentaire doivent annoter leur sortie.

Voir ../../skills-protocol.md pour le protocole complet.