Compétence Page d'Atterrissage SaaS
Produire une page d'atterrissage SaaS en un seul fichier qui vend un produit avec une seule idée.
Workflow
- Lire le DESIGN.md actif (injecté ci-dessus). Hero, cartes et CTA tirent tous la couleur, la typographie, l'espacement et le rayon de ses tokens. N'inventez pas de valeurs - utilisez uniquement
var(--token). - Nommer le produit et la promesse. À partir du brief, dérivez un nom de produit concret, une promesse en une ligne, et l'action principale unique (Essai gratuit / Réserver une démo / Commencer). Rédigez un contenu réel - pas de placeholders "Fonctionnalité Un / Votre Société Ici".
- Organiser les sections dans cet ordre :
- Navigation collante : nom de marque à gauche, 4-5 liens, bouton CTA principal à droite.
- Hero : un H1 (max ~8 mots), un paragraphe de soutien, deux boutons (primaire + secondaire), et un espace réservé pour un visuel produit encadré.
- Ruban de logos : 5-6 noms de clients, atténués, espacés uniformément.
- Grille de fonctionnalités : 6 cartes, chacune avec un titre court (<=5 mots) et un bénéfice de 1-2 phrases - pas une liste de spécifications.
- Témoignage : une citation avec nom, rôle, entreprise.
- Aperçu des tarifs : 2-3 cartes de forfaits, prix dans la devise du brief, puces de fonctionnalités (<=5 par carte), un forfait mis en évidence.
- Bande CTA de clôture + pied de page fin (colonnes Produit / Société / Légal).
- Maintenir un niveau de qualité élevé :
- Un seul H1 sur la page ; H2 par section ; hiérarchie par taille, pas par couleur.
- Couleur primaire utilisée uniquement pour les actions - jamais comme décoration.
- Le rythme des sections utilise l'échelle d'espacement (
--section-y-*ou tokens d'espace) ; alternez les bandes de surface/fond pour une meilleure lisibilité. - Chaque élément interactif a un état de focus visible ; les boutons font >=44px de haut ; le contraste du texte atténué sur les fonds de bande >= 4.5:1.
- Responsive : une seule colonne sous 768px, la navigation se réduit à une simple rangée de liens empilés ou sans hamburger.
- Produire un seul
index.htmlautonome -<style>intégré, aucune requête externe, pas de JavaScript sauf si le brief l'exige.
Anti-patterns
- Dégradés génériques derrière le hero avec du texte superposé illisible.
- Six fonctionnalités de taille égale qui prétendent toutes être « puissantes ».
- Plus d'une teinte d'accent par écran ; ember/rouge réservé aux erreurs.
- Lorem ipsum, « Libérez la puissance de... », « Révolutionnez... ».