Constructeur de landing page premium
Vous construisez des landing pages qui passent l'évaluation d'un designer senior. Le plancher n'est pas « ça fonctionne et c'est joli ». Le plancher est indistinguible d'une page réalisée par une équipe produit qui se soucie de la qualité.
Ce fichier est la méthode : les règles qui annulent toutes les autres, les 11 étapes du processus et la livraison. Le détail technique de chaque étape se trouve dans references/. Suivez dans l'ordre.
Comment utiliser ce skill
Ne chargez que ce que l'étape demande. Chaque étape ci-dessous se termine par une ligne Lisez, qui pointe vers le fichier de référence de ce moment. N'ouvrez pas toutes les références d'un coup : elles totalisent près de 4000 lignes, et ce qui importe à chaque étape tient en une ou deux.
La numérotation est la même dans tous les fichiers. Lorsqu'un texte dit « voir 10.4 » ou « section 12.7 », cherchez dans le plan à la fin de ce fichier quelle référence contient cette section. Les sections 0, 1, 3 et 19 sont ici ; les autres, dans references/.
Les scripts effectuent la vérification lourde. Exécutez-les plutôt que de réécrire :
| Script | Pour quoi | Nécessite |
|---|---|---|
scripts/contraste.py | Mesurer les paires de contraste des tokens avant application (étape 4) | Python 3.8+ |
scripts/checar-texto.py | Révision anti-slop, boutons et rythme du texte (étapes 2 et 10) | Python 3.8+ |
scripts/auditar-responsivo.mjs | Audit par largeur, de 320 à 1920 px, avec zoom 200 % et mouvement réduit (étape 9) | Node 18+ et Playwright |
Les chemins sont relatifs au dossier de ce skill. Si l'environnement ne permet pas d'exécuter un script (par exemple, sans navigateur pour Playwright), dites à l'utilisateur quelle vérification reste en attente et donnez-lui la commande exacte à exécuter sur sa machine. Ne déclarez jamais une vérification qui n'a pas été effectuée.
Les exemples de code sont en HTML, CSS et JavaScript purs. En React, Next.js, Astro, Tailwind, Webflow ou autre constructeur, traduisez en conservant les noms des tokens, les états et les règles.
0. Avant tout pixel
Quatre règles qui annulent toutes les autres si elles sont enfreintes :
- Aucun pixel sans briefing fermé (étape 1). La majeure partie des retouches vient du fait de commencer à dessiner avant de savoir ce qu'on dessine.
- Aucune valeur basée sur l'impression visuelle. Toute mesure de typographie, couleur, espace et durée provient d'un token, d'une mesure ou d'un tableau. Jamais de « ça a l'air bien ».
- Faites ce qui a été demandé, rien de plus. Si vous avez une meilleure idée, implémentez la demande et proposez l'idée séparément. Un effet supplémentaire appliqué de votre propre chef est une retouche garantie.
- Ne réutilisez jamais l'identité d'un autre projet. Chaque page naît de la marque de son projet. Copier une palette, une typographie ou une signature visuelle d'un exemple produit exactement la page générique que la section 1 interdit.
0.1 Ce qui relève de la méthode et ce qui relève de l'identité
C'est la distinction la plus importante de ce document. La méthode ne change pas. L'identité change à chaque projet.
| Invariant : toujours utilisé | Variable : collecté du projet |
|---|---|
| Le processus en 11 étapes | Palette et rôle de chaque couleur |
| La structure des tokens, c'est-à-dire les noms | Les valeurs des tokens |
Échelle fluide avec clamp() et déclinaison en rem | Familles typographiques et raison de l'échelle |
Règle de regroupement, base de 8 px, minmax(0,1fr) | Largeur du conteneur et densité |
| Ombre en couches, avec un plafond de deux tokens | Teinte et intensité de l'ombre |
| Vocabulaire du mouvement : une courbe, deux plages | Intensité du mouvement et signature de survol |
| Matériel visuel propre, jamais de banque | Quelle technique de matériau correspond à la marque |
| Accessibilité WCAG 2.2 AA et le QA des sections 12 et 16 | Rien. Ce n'est pas négociable |
| Les règles anti-slop de la section 1 | Rien. Ce n'est pas négociable |
Toute valeur concrète dans ce document est un exemple de remplissage, pas un modèle à copier. Les exemples proviennent d'un projet réel déjà validé et servent à montrer le niveau de rigueur attendu, pas l'apparence à reproduire. Une marque de mode, une banque et un studio de jeux remplissent les mêmes champs avec des valeurs complètement différentes et atteignent le même niveau de qualité.
Si deux pages réalisées avec ce skill semblent sœurs, le skill a été utilisé de travers.
1. Règle racine : zéro AI slop
« AI slop » désigne l'ensemble des marques qui dénoncent un contenu généré sans critère. Une page peut être techniquement correcte et néanmoins être refusée pour cela. Cette section a priorité sur tout autre choix esthétique.
1.1 Slop visuel : interdit
| Interdit | Pourquoi | Que faire |
|---|---|---|
| Dégradé violet ou indigo vers bleu | Signature visuelle de template IA | Palette dérivée de la marque, avec rôle défini par couleur |
| Glassmorphism partout | Effet appliqué sans fonction | Flou seulement sur navigation flottante et superposition |
| Icône de robot, cerveau, circuit, hologramme, puce | Cliché de « IA » | Icône de l'objet réel du domaine (agenda, message, graphique) |
| Photo de banque d'images | Générique et reconnaissable | Texture procédurale, UI du produit, illustration technique |
| Image générée par IA | Détectable et incohérente avec la marque | Même alternative ci-dessus |
| Emoji comme icône d'interface | Infantilise et brise la composition | SVG de trait dans le système d'icônes |
| Cartes blanches identiques avec bordure grise, en grille 3×2 | Moule le plus commun de template | Empreintes différentes, contenu visuel dans la carte |
| Liste de coche verte répétée dans toute section | Paresse de composition | Varier : liste, comparaison, miniature, donnée |
| Grands nombres 01 02 03 sans rien à côté | Décoration qui n'informe pas | Nombre avec miniature de ce qui se passe à cette étape |
| Blob coloré en arrière-plan | Ornement sans fonction | Texture en relation avec la marque, ou rien |
| Ombre unique grande et grise | On dirait un flou, pas de la profondeur | Ombre en couches (voir 4.5) |
| Haut de nébuleuse sombre avec faisceau vertical de lumière et floraison bleue et violette | Signature de toute une génération de pages d'outils techniques. Copier, c'est annoncer de quelle année et de quel créneau vous avez copié | Atmosphère dérivée de la marque : la texture, l'angle et la couleur du projet |
| Titre en dégradé de blanc vers lavande et rose | A cessé d'être une finition pour devenir un marqueur de template | Dégradé seulement lorsque les arrêts proviennent de la palette du projet, et utilisé une fois sur la page |
| Gros titre du type « remplace A, B, C et D » | Fonctionne seulement pour un produit qui remplace effectivement quatre catégories, avec des données ouvertes pour le prouver. Dans tout autre cas, se lit comme une vantardise | Voir les modèles de gros titres en 10.4 |
1.2 Slop de texte : interdit
Ponctuation bannie, sans exception :
| Caractère | Nom | Remplacer par |
|---|---|---|
— | tiret cadratin | point, virgule ou deux-points |
– | demi-cadratin | point, virgule ou « à » dans un intervalle |
· | point médian | virgule, ou séparation en deux éléments |
… comme points de suspension décoratifs | point final |
Le tiret cadratin est la marque numéro un du texte généré par machine. Réécrivez la phrase, ne remplacez pas le caractère par un trait d'union lâche avec des espaces, ce qui a le même effet.
Dans un bloc de code et une spécification, n'utilisez pas le point médian comme séparateur : séparez en lignes avec un libellé.
Formules de phrase bannies :
- « Ce n'est pas X. Ce n'est pas Y. C'est Z. »
- « Imaginez [situation] »
- « Dans le monde d'aujourd'hui », « À l'ère numérique », « De plus en plus »
- « Transformez », « Révolutionnez », « Élevez », « Débloquez », « Potentialisez »
- « Plongez », « Explorons », « Découvrez comment »
- Triade partout : trois adjectifs, trois puces, trois colonnes dans chaque section
- Point d'exclamation dans un texte institutionnel
- Prudence empilée : « peut aider à potentiellement améliorer »
Règles positives :
- Phrase courte et concrète, dans le langage du lecteur, pas du produit.
- Verbe à la place du nom abstrait : « répond en 5 minutes », pas « réactivité du service ».
- Nombre seulement avec origine. Sans donnée réelle, décrivez ce qui sera mesuré.
- Accentuation complète et correcte. Ne remplacez jamais un caractère accentué par de l'ASCII.
1.3 Slop structurel : interdit
L'erreur la plus difficile à voir : chaque section avec le même moule.
libellé → titre → paragraphe → trois cartes identiques
libellé → titre → paragraphe → trois cartes identiques
libellé → titre → paragraphe → trois cartes identiques
C'est un template, même avec de bons tokens et une bonne animation.
Règle de variation : aucun format de section ne se répète à la suite. Alternez entre au moins cinq formats tout au long de la page :
- grille de cartes avec miniature d'interface
- liste verticale avec scène synchronisée à côté
- onglets avec capture de produit
- composition en bento avec un bloc dominant
- comparaison en deux colonnes
- frise chronologique ou pas à pas
- bloc sombre avec illustration technique
- tableau ou panneau de données
1.4 Slop de processus : interdit
- Implémenter la typographie et les composants de mémoire, sans mesurer de référence.
- Livrer sans ouvrir dans un navigateur et sans exécuter la vérification.
- Livrer avec une erreur dans la console.
- Copier les valeurs d'un projet précédent sans recalculer le contraste.
1.5 Test du slop
Avant de livrer, répondez. Tout « oui » est un échec :
- Une section utilise-t-elle le même moule que la précédente ?
- Y a-t-il un tiret cadratin, un demi-cadratin ou un point médian dans un texte visible ?
- Une image provient-elle d'une banque ou d'un générateur IA ?
- Une icône représente-t-elle « technologie » au lieu de représenter la chose ?
- En changeant le logo et la palette, la page conviendrait-elle à n'importe quelle entreprise ?
- Un nombre apparaît-il sans origine ?
La question 5 est la plus sévère. Si la réponse est oui, le problème est conceptuel, pas de finition.
3. Processus en 11 étapes
Aucune étape ne peut être sautée. Chacune a un critère de sortie objectif.
Calibrage des délais, d'après ce que publient les studios de référence : redesign ciblé de 4 à 6 semaines ; page produit sur mesure de 6 à 8 ; site d'entreprise ou de logiciel de 8 à 12. Un cas documenté de nouvelle marque plus page complète a pris 7 semaines et environ 600 heures, réparties en 4 semaines de marque et design et 3 d'animation et de construction. Ils ont terminé deux jours avant l'échéance, et ont utilisé ces deux jours pour ajuster le texte, pas la mise en page.
Le périmètre ne se mesure pas en pages. Un site de 30 pages avec peu de moules réutilisables est plus simple qu'une expérience de 5 pages où chacune a sa propre structure, sa narration sur mesure et son interaction complexe. Orientez l'estimation par la quantité de compositions distinctes, pas d'URL.
Quatre habitudes de processus qui valent pour toute envergure :
- Le texte générique de remplissage coûte cher. Une mise en page construite pour un paragraphe court cesse de fonctionner lorsque le texte réel doit expliquer des fonctionnalités, des publics et des avantages. La retouche apparaît dans la phase la plus coûteuse. C'est pourquoi l'étape 2 existe, et pourquoi les maquettes utilisent du texte réel.
- La phase visuelle ne commence pas par la page entière. Elle commence par une ou deux compositions clés qui contiennent les éléments les plus importants du futur système, pour résoudre la typographie, la couleur, l'image, la composition, le composant et le mouvement sans tout dessiner.
- Le code avec le design, pas après. Là où le résultat est meilleur, il n'y a pas de passage de relais : le même groupe qui crée le système visuel livre l'expérience interactive, et la performance est traitée comme faisant partie du design. Beaucoup de détails ne prennent vie qu'à l'implémentation, avec une nuance qui n'apparaît pas dans un vecteur statique. Des jours dans l'outil de design produisent de bonnes idées, et une idée ne se livre pas.
- Testez avec du contenu réel. Un gros titre long, un texte traduit, une proportion d'image étrange et un média manquant révèlent des problèmes qui restent invisibles dans un fichier de design poli.
Étape 1. Briefing et identité
Ne dessinez rien avant de fermer cette étape. Interrogez l'utilisateur. Pour chaque élément sans réponse, proposez deux ou trois options et demandez confirmation. Ne présumez jamais en silence, et n'héritez jamais de l'identité d'un exemple.
1.1 Métier et objectif
- Qui lit la page, et quelle décision doit-il prendre ?
- Quelle est l'action unique que la page doit générer ?
- Y a-t-il des restrictions légales dans le secteur (santé, finances, éducation, juridique, alimentation) ?
- Y a-t-il des données réelles de résultat, ou est-il interdit de citer un nombre ?
1.2 Identité visuelle : collectez ou proposez
| Champ | Question à l'utilisateur | S'il n'y a pas de réponse |
|---|---|---|
| Couleurs de la marque | Quelles sont les couleurs, en hexadécimal ? Quelle est la principale ? | Proposez 2 ou 3 directions de la section 4.2 et demandez un choix |
| Couleur d'action | Quelle couleur les boutons doivent-ils utiliser ? | Dérivez de la couleur de la marque, en assombrissant jusqu'à passer 4,5:1 avec le blanc |
| Typographie | Quelles polices la marque utilise-t-elle ? Y a-t-il une licence pour le web ? | Proposez 2 appariements de la section 4.3 et demandez un choix |
| Ton visuel | La marque est-elle sobre, chaleureuse, technique, élégante ou énergique ? | Demandez. Cela définit la texture, le rayon, la densité et le mouvement |
| Logo | Avez-vous un fichier SVG, ou PNG avec fond transparent ? | Demandez. Sans lui, utilisez le nom en texte dans la typographie choisie |
| Manuel de marque | Avez-vous un manuel, un brandbook ou un guide d'identité ? Pouvez-vous l'envoyer ? | Demandez. C'est la source la plus riche. Sans lui, travaillez avec le logo et les couleurs |
| Graphismes de la marque | La marque a-t-elle un motif graphique, une texture, une forme récurrente, une grille ou une signature visuelle propre ? Pouvez-vous envoyer les fichiers ? | Demandez des images ou des vecteurs. Ils deviendront la base des textures de la section 7 |
| Pièces existantes | Y a-t-il une présentation, un post, un emballage, un catalogue ou un ancien site ? | Demandez 3 à 5 pièces. Elles montrent la marque appliquée, ce que le manuel ne montre pas toujours |
| Matériel du produit | Y a-t-il des écrans, des photos propres ou des diagrammes ? | Définissez par la section 7 ce qui sera créé |
| Références | Y a-t-il des pages de référence ? | S'il y en a, mesurez à l'étape 3. S'il n'y en a pas, proposez une direction |
| Ce qu'il faut éviter | Y a-t-il une couleur, un style ou un élément interdit par la marque ? | Demandez. Il est moins cher de le savoir maintenant |
| Niveau de mouvement | Discret, équilibré ou expressif ? | Par défaut : équilibré |
| Ton de voix | Formel ou direct ? Vous tutoyez ou vous vouvoyez ? | Demandez |
1.3 Fiche d'identité
Enregistrez les réponses. Cette fiche est la source des tokens à l'étape 4.
PROJET
Objectif de la page :
Action unique :
Public :
IDENTITÉ
Couleur principale : #
Couleur d'action : # contraste avec blanc : ___:1
Accent secondaire :