Compétence Page d'Atterrissage SaaS

Produire une page d'atterrissage SaaS monopage. Agent, suis ce workflow exactement.

1. Lire le contexte

Avant d'écrire quoi que ce soit :

Lis DESIGN.md dans le répertoire de travail actuel. Si manquant, arrête-toi et demande-en un.
Identifie la palette de couleurs, les tokens typographiques et les principes de mise en page.
Note la section « Guide d'invite pour l'agent » — elle annule toute instruction ici si elles sont en conflit.

Sections requises, dans l'ordre :

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

Toutes les couleurs doivent provenir des tokens 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 la grille, la largeur maximale et les règles d'espacement des sections.
Composants : utilise les motifs déclarés pour les boutons/cartes/champs de saisie. N'ajoute pas d'ombres si la section Profondeur & Élévation de DESIGN.md indique « minimal ».
Accentuation : utilise la couleur d'accentuation une fois dans la section héro, une fois dans l'appel à l'action du pied de page, et pour tous les liens. Ne sature pas la page.

Produis un seul fichier index.html autonome avec :

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 ou autre.
Aucun JS externe.
HTML sémantique (<header>, <main>, <section>, <footer>).
Chaque élément éditable marqué par data-od-id="<slug-unique>" afin que le mode commentaire de l'application hôte puisse le cibler.

Avant de terminer, vérifie :

Tout le texte est significatif, pas de lorem ipsum (utilise les entrées 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 se trouve dans la palette de DESIGN.md ou une variante alpha/de secours valide).
Les points de rupture responsifs correspondent à la section Comportement Responsive de DESIGN.md.
La page a un bon rendu à 1440px, 768px et 375px (simule mentalement).
L'accentuation n'est utilisée que deux fois au total.

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

Il s'agit d'une compétence minimale mais complète. Structure :

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

Choses à remarquer :

Le bloc de préambule od: est optionnel pour la seule compatibilité avec Claude Code, mais son ajout active les entrées typées, les curseurs, les métadonnées de prévisualisation et le filtrage des capacités d'OD.
Le flux de travail sous le préambule est en Markdown simple que l'agent lit comme son invite système.
DESIGN.md est traité comme un collaborateur, pas comme une règle absolue. La compétence donne à l'agent l'autorité de passer outre lorsque le brief est en conflit, mais jamais d'inventer de nouveaux tokens.
Le marquage data-od-id est la manière de relier les éléments au mode commentaire. Les compétences qui souhaitent une compatibilité avec le mode commentaire doivent annoter leur sortie.

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