Landing page soignée, étape 1 : forme et identité

Signature — pipeline de forme et d'identité pour OpenCode

Dérivé de Top 50 Websites for Design Inspiration (50 sites ouverts en direct dans un navigateur, vérifiés le 22 octobre 2026) et du cœur de processus de Hallmark de Nutlope. Chaque forme et identité nomme des preuves de corpus réelles — la bibliothèque est constituée d'observations, pas de folklore de goût.

Division du travail (à ne pas brouiller)

• frontend-design possède le savoir-faire : direction artistique, jugement typographique, jugement des couleurs, philosophie du mouvement, rédaction, boucle d'auto-critique. Quand il est chargé, suivez-le — ne reformulez pas ses règles ici.
• Signature possède le processus et la bibliothèque : quelle forme cette construction a, quelle identité elle porte, le registre de non-répétition, et une liste mécanique de portes (grep et calcul).

Verbes

Build (par défaut)

1. Diviser le brief en : domaine, public et mots d'énergie (« cinématique », « dense », « personnel », « grandiose »).
2. Choisir une forme depuis references/structures.md. La dire en une ligne : Forme : <nom> (finaliste : <nom>). Si le brief est vague, proposer le trio du domaine — ne jamais se taire par défaut.
3. Vérifier contre le corpus : ouvrir 1 à 2 URLs de preuve depuis les lignes forme/identité avec le Playwright MCP (outils de navigation + capture d'écran) ou webfetch. Un lien mort promeut la ligne suivante. Les ancres de palette sont des graines jusqu'à ce que vous ayez regardé la page en direct.
4. Choisir une identité depuis references/identities.md qui partage l'ambiance de la forme, puis fixer ses graines de jetons selon ce que vous avez réellement vu.
5. Écrire d'abord les jetons : un bloc :root sémantique + le timbre (ci-dessous), avant tout CSS de composant.
6. Construire. Un élément mémorable porte la page ; tout le reste reste discret (règle de retenue du frontend-design — appliquer, ne pas re-dériver).
7. Exécuter toutes les Portes et corriger chaque échec. Puis le passage de goût — via frontend-design s'il est chargé, sinon contre sa liste d'étalonnage des caractéristiques d'IA.

audit <cible>

Lire le code/le site et exécuter seulement les Portes. Chaque échec est une puce : fichier:ligne — n° de porte — correctif en une ligne. Résultats mécaniques uniquement ; quand quelque chose est un problème de goût, nommer le principe de frontend-design pertinent en une ligne au lieu d'inventer une nouvelle règle. Si des timbres existent, signaler si la forme répète une construction antérieure.

redesign <cible>

Conserver l'architecture de l'information, le texte et les actifs de marque. Grep les timbres : la nouvelle forme doit différer de la dernière forme tamponnée. L'identité peut tourner ; changer la voix de la marque ou la palette nécessite une demande préalable.

study <url | capture d'écran>

Ouvrir la source. Extraire : ordre des sections → forme la plus proche ; ancres de palette (échantillonner les couleurs réelles) ; rôles typographiques et polices observées → identité la plus proche. Émettre une ligne : study : source=<url> forme≈<Forme> identité≈<Identité> ancres=<hex>. Si rien dans la bibliothèque ne correspond, ajouter une nouvelle ligne d'identité (format en bas de identities.md) — mais ne jamais substituer silencieusement le résultat de l'étude à un choix de bibliothèque : si l'utilisateur veut l'ADN étudié textuellement, le timbre devient identité=studied:<source> et les valeurs d'étude deviennent les jetons.

Le registre est le code

• Tamponner en haut de la feuille de style principale (et refléter dans l'en-tête index.html pour les constructions uniquement HTML) : /* signature : forme=<Forme> identité=<Identité> refs=<urls réellement ouvertes> */
• Avant de choisir, grepper le projet pour les timbres existants. Pas deux constructions consécutives ne partagent une forme ; préférer ne pas réutiliser l'identité non plus.
• Pas de fichier de registre séparé. Le CSS est le registre.

Contrat

• Les jetons de design vivent en un seul endroit (propriétés personnalisées :root ou tokens.css/Tailwind @theme du projet). Les noms sont des rôles sémantiques (--color-ink), pas des valeurs.
• Réutiliser les propres noms de jetons du projet plutôt que de les masquer ; étendre le thème Tailwind, jamais de valeurs arbitraires en ligne.
• Une feuille de style globale existante est en appendice uniquement : garder chaque directive @tailwind/@import "tailwindcss" exactement en place, ajouter des jetons sous les règles existantes, et placer tout nouveau @import tout en haut. Ne jamais supprimer silencieusement les directives du framework — cela supprime le style de toute l'application. Réécritures complètes uniquement sur demande explicite.
• Respecter les conventions de fichiers du framework. Ne pas réinventer les motifs de routage/disposition que le projet a déjà.
• Portée : c'est un processus de goût. Pas de texte inventé (si l'utilisateur n'a pas donné de mots, demander) ; pas de logique métier ; pas de choix d'identité de marque à partir de rien — suivre celle qui vous est donnée.

Portes (mécaniques — chaque réponse doit être « non » ; chaque échec = un correctif avant transfert)

Discipline des jetons

1. Échec si un #hex, oklch(), rgb() ou font-family apparaît dans un composant qui ne se résout pas en un jeton nommé. Le remonter ou le remplacer.
2. Échec si un padding/gap/marge est en dehors de l'échelle d'espacement du projet (multiples de 4px en l'absence de jeton nommé). Un 17px arbitraire est un signe.
3. Échec si le commentaire du timbre est manquant, ou nomme des URLs qui n'ont jamais été réellement ouvertes.

Survie de la mise en page 4. Échec si la page défile horizontalement à toute largeur de fenêtre 320–1920px. overflow-x: clip sur à la fois html et body (pas hidden — clip préserve sticky/fixed). 5. Échec si une piste de grille/ligne 1fr contenant une image n'est pas minmax(0, 1fr). 6. Échec si un texte de taille d'affichage manque overflow-wrap: anywhere (et min-width: 0 sur son conteneur) — les mots composés longs débordent sur mobile. 7. Échec si un texte cliquable (bouton, nav, onglet, étiquettes CTA) peut passer à 2 lignes à 320/375/768/1280px.

Faits de code 8. Échec sur transition: all — nommer les propriétés. 9. Échec si un élément porte plus d'un effet de survol (combinaisons de translate + scale + shadow + color). 10. Échec si les entrées changent border-width entre les états ; les changements d'état vont vers couleur/contour/ombre. Les anneaux de focus sont outline, pas la bordure. Désactivé nécessite ≥2 de : opacité, cursor: not-allowed, disabled/aria-disabled. 11. Échec si un élément <svg>/<canvas>/décoratif n'a ni aria-hidden="true" ni un nom accessible.

Mouvement et performance 12. Échec si une animation/keyframe manque d'une solution de repli prefers-reduced-motion : reduce. 13. Échec sur du contenu à rotation automatique sans pause au survol et au focus (WCAG 2.2.2). 14. Échec si l'actif héros LCP est loading="lazy", ou qu'une vidéo héros manque poster/fetchpriority="high".

Contraste et honnêteté 15. Échec si toute paire couleur/fond manque WCAG 4.5:1 (corps) ou 3:1 (grand texte, icônes, anneaux de focus). Deux points chauds : texte héritant d'une couleur pendant qu'un parent a changé de surface ; remplissage de bouton dans les 5% de luminosité de son texte. 16. Échec sur des faits fabriqués — métriques, pourcentages, citations, noms, prix que l'utilisateur n'a jamais fournis, remplissant des emplacements de statistiques. Les emplacements vides disent « confirmer », jamais inventer. 17. Échec sur les emojis utilisés comme icônes de fonctionnalité/étape/prix ; une bibliothèque d'icônes par page, maximum. 18. Échec sur le chrome redessiné : fausses barres de navigateur, fausses encoches de téléphone, fausses fenêtres de terminal/IDE. Utiliser une vraie capture d'écran ou rien.

Discipline de la bibliothèque 19. Échec si une police chargée n'est pas une police web connue, gratuite ou sous licence. Les polices de fonderie dans le corpus (Commercial Type, Klim, Grilli Type, type.today, essais Pangram Pangram) sont des références d'affichage — vérifier la licence, demander avant de payer. Google Fonts et les polices variables ouvertes passent. 20. Échec si la forme de cette construction correspond au timbre le plus récent du projet (greper d'abord, selon la règle du registre).

Références — lire à la demande, jamais tout à la fois

• references/structures.md — dix formes de page avec squelettes, preuves et tableau du trio de domaine. Lire lors du choix de la forme (build/redesign/audit).
• references/identities.md — vingt identités : graines de palette, paires de polices, preuves de corpus. Lire lors du choix de l'identité (build/redesign/study).

Exemple travaillé (issu des propres conseils du corpus)

Brief : « Meet India Journeys — site d'opérateur touristique pour un voyage au Kerala entre rivière et patrimoine. » Mot de domaine « voyage » → trio est Scroll Story · Case Catalog · Luxury Ledger. Choisir Scroll Story (finaliste : Case Catalog) parce que le sujet est des lieux présentés un par un. Ouvrir apple.com et simplychocolate.dk en direct pour étudier le rythme des chapitres, les médias héros et le traitement plein écran. Identité : Forest Confection (vert foncé + cacao, affichage condensé) convient à rivière et patrimoine ; échantillonner la référence en direct avant de fixer les jetons. Timbre : /* signature : forme=Scroll Story identité=Forest Confection refs=apple.com,simplychocolate.dk */