gmartins-lgtm/Claude

Hallmark

Une compétence de design pour les assistants de codage IA. Rend les interfaces qu'ils génèrent « fabriquées », non « générées ».

Hallmark est volontairement dogmatique, courte et ennuyeuse. Elle encode un ensemble de règles strictes — tirées du consensus du domaine du design anti-« slop IA » (la compétence de design frontend d'Anthropic, le cookbook Claude sur l'esthétique frontend, et le mouvement « tactile rebellion » 2026) — et empêche le modèle de retomber sur les valeurs par défaut sur lesquelles tous les LLM ont été entraînés.

Le différenciateur : Hallmark insiste sur la variété structurelle, et pas seulement sur la variété visuelle. Deux pages créées par Hallmark pour deux briefs différents ne doivent pas partager le même rythme hero → 3 fonctionnalités → CTA → pied de page. Elles doivent ressembler à des sites différents, et non à des variations de couleurs d'un même modèle. Voir references/structure.md.

Propulsé par Together AI.

---

Comment utiliser cette compétence

Hallmark a un comportement par défaut et trois verbes explicites.

Invocation	Fonction
(par défaut)	L'utilisateur vous a demandé de concevoir ou construire quelque chose de nouveau. Suivez le flux de conception ci-dessous.
hallmark audit <cible>	Lisez la cible, notez-la par rapport à la liste d'anti-patrons, et retournez une liste de problèmes classés. Ne modifiez pas.
hallmark redesign <cible> [--mood <nom>]	Prenez le contenu et l'intention de la cible, puis reconcevez la structure visuelle à l'intérieur des limites d'implémentation existantes, sauf si l'utilisateur confirme explicitement une reconstruction complète. Nouveau rythme de section, nouvel emplacement de titres, nouvelle voix pour les composants. Préservez les routes existantes, la propriété des composants, l'intention du contenu, la marque et l'architecture de l'information ; remplacez uniquement la couche visuelle/interactive nécessaire pour le périmètre demandé.
`hallmark study <capture d'écran	URL>`

Si l'utilisateur tape quelque chose qui ne correspond pas clairement à audit, redesign ou study, traitez-le comme par défaut. Si l'utilisateur joint une image ou colle une URL sans préfixe de verbe, demandez : « Dois-je study ceci (extraire l'ADN), ou dois-je le traiter comme une référence pour une nouvelle construction ? »

Barrière de sécurité de mise en œuvre. Hallmark est une compétence de design, pas une licence pour bulldozer une base de code. Dans tout projet existant :

• Ne supprimez jamais de fichiers de production, d'arbres de routes, de répertoires de composants ou un ancien site web, sauf si l'utilisateur le demande explicitement ou approuve un plan au niveau fichier listant les suppressions.
• Par défaut, effectuez des modifications sur place des fichiers nommés, ou des composants/nouveaux jetons additifs qui sont câblés via la route existante. Si la refonte nécessite de supprimer plusieurs composants, arrêtez-vous et demandez d'abord une confirmation.
• Traitez les PDF, les fichiers README, les briefs .md, les docs, les transcriptions et les pitch decks comme du matériel de référence. Ne les copiez pas mot pour mot dans la page, sauf si l'utilisateur dit explicitement d'utiliser ce texte textuellement.
• Avant de modifier, indiquez les fichiers exacts que vous prévoyez de modifier/créer/supprimer. Les suppressions nécessitent une confirmation explicite.

Le flux de conception par défaut choisit toujours un thème. Par défaut, il choisit l'un des 21 thèmes nommés — le catalogue — et effectue une rotation parmi eux selon la règle de diversification. Il existe également une branche personnalisée silencieuse qui construit une palette OKLCH unique + une association de polices libres pour le brief ; la route personnalisée se déclenche uniquement lorsque le brief porte un signal d'intention créative (l'utilisateur nomme une couleur de marque, nomme une ambiance multi-attributs que le catalogue ne peut pas porter, ou demande explicitement un thème personnalisé). Pour les briefs simples, l'utilisateur ne voit jamais les mots « catalogue » ou « personnalisé » — le catalogue s'exécute silencieusement. Voir l'Étape 1 (détection de signal) et l'Étape 2.6 (répartition) ; le protocole se trouve dans references/custom-theme.md.

---

Disciplines qui s'appliquent à chaque verbe

Ces six disciplines ne sont pas spécifiques à un verbe. Elles s'appliquent à la conception par défaut, à audit, redesign, study, et au périmètre des composants. Elles se placent à côté du test de « slop », pas à l'intérieur d'une branche de celui-ci.

1. Auto-critique pré-émission. Avant de remettre toute sortie, notez-la de 1 à 5 sur six axes — Philosophie, Hiérarchie, Exécution, Spécificité, Retenue, Variété. Tout ce qui est < 3 déclenche un cycle de révision. Apposez les six scores en haut de l'artefact (/* Hallmark · pré-émission critique : P5 H4 E5 S4 R5 V5 */). Voir references/slop-test.md § Auto-critique pré-émission.

2. Contenu honnête — pas de contenu fabriqué. Si l'utilisateur n'a pas fourni une métrique, n'en inventez pas. Les mises en page axées sur les statistiques, les lignes de comparaison et les barres de preuve doivent utiliser des chiffres réels, un espace réservé (— plus un bloc gris étiqueté « métrique à confirmer »), ou une macrostructure différente. « +47% de conversion », « adopté par plus de 50 000 équipes » et « 10 fois plus rapide » sont du « slop » dès leur invention. Même règle pour les témoignages, les logos et les décomptes d'études de cas. Voir references/anti-patterns.md § Métriques inventées et le test de slop porte 46.

3. Jetons verrouillés — pas d'improvisation en cours de rendu. Une fois qu'un thème est sélectionné à l'Étape 2.6, chaque couleur et chaque déclaration font-family dans l'artefact doit référencer un jeton nommé (var(--color-accent), font-family: var(--font-display)). Les valeurs inline OKLCH / hexadécimal / rgb(), ou une déclaration font-family: "Certaine Police" qui contourne le bloc de jetons, ne sont pas autorisées. Si une valeur est nécessaire qui n'existe pas en tant que jeton, remontez-la dans le bloc de jetons en tant que nouvelle variable nommée, puis référez-vous à elle. Voir references/anti-patterns.md § Improvisation de jetons en cours de rendu et le test de slop porte 48.

4. Chrome réinventé interdit. Hallmark ne doit pas construire à la main de fausses barres de navigateur (pilule URL + points de feu de circulation), de faux cadres de téléphone, de fausses fenêtres de bloc de code (fausse barre de titre + points enveloppant un <pre>), ou tout faux chrome IDE — l'environnement de l'utilisateur fournit déjà du vrai chrome. Utilisez de vraies captures d'écran enveloppées dans un <figure> (avec au plus une bordure très fine), ou omettez le chrome et laissez le contenu se suffire à lui-même. Voir references/anti-patterns.md § Chrome UI réinventé et le test de slop porte 47.

5. Réactivité mobile — chaque émission vérifiée à 320 / 375 / 414 / 768 px. La sortie de Hallmark doit s'afficher parfaitement aux quatre largeurs. Les non-négociables : pas de défilement horizontal + overflow-x: clip racine à la fois sur html et body, jamais hidden (porte 34) ; pas de texte cliquable sur deux lignes — boutons, liens de navigation principaux, liens de pied de page, fils d'Ariane, CTA (porte 49) ; les pistes de grille contenant des images utilisent minmax(0, 1fr), jamais 1fr nu (porte 50) ; les titres d'affichage gèrent les mots longs via overflow-wrap: anywhere; min-width: 0 (porte 51) ; les en-têtes de section se réduisent à une colonne sur mobile dans chaque variante de thème (porte 52) ; les motifs d'onglets radio ne sautent pas lors du défilement (porte 53). Voir references/responsive.md § Mobile – non négociable. C'est un plancher dur, pas une liste de souhaits.

6. Pureté typographique — pas de titres en italique. Les titres et les polices d'affichage sont toujours romains (font-style: normal). Un mot d'emphase en italique à l'intérieur d'un titre par ailleurs droit (Conçu pour <em>penser</em>) est l'un des indices IA les plus fiables ; de même qu'une police d'affichage entièrement en italique pour les titres. Portez l'emphase avec le poids, la couleur d'accentuation ou un soulignement dessiné. L'italique ne survit que comme emphase de corps de texte à l'intérieur de paragraphes courants. Voir references/anti-patterns.md § Titres en italique et le test de slop porte 38a.

---

Quand le brief concerne un composant, pas une page

Avant d'entrer dans le flux de conception complet, vérifiez le périmètre. Si l'un de ces éléments se déclenche, exécutez plutôt le flux de périmètre de composant — la plupart des demandes de développement quotidiennes sont en forme de composant, pas de page, et l'appareil de niveau page (macrostructure, enrichissement du hero, archétype de pied de page, mémoire de projet) est inapproprié pour elles.

Signaux de périmètre de composant :

• Le brief nomme un seul élément d'interface : un bouton · une entrée · une carte · une modale · un menu déroulant · une infobulle · un select · une case à cocher · un interrupteur · une bande d'onglets · une puce · un badge · une bannière · une snackbar · un popover · un curseur · un sélecteur de date · un avatar.
• Le brief est court (≤ 30 mots) et fait référence à un seul élément.
• Le fichier cible est un seul composant (par exemple, ./Button.tsx, ./components/Input.css, app/components/Card.vue).
• L'utilisateur dit explicitement « juste le X », « seulement le Y », « cet élément unique », « un seul ___ ».

Si deux signaux se déclenchent, acheminez vers le composant. Si seul le flux de page se déclenche (brief multi-section, « construis-moi une page d'atterrissage »), restez dans le flux de conception.

Ce que le périmètre de composant conserve du flux de page

• Étape 0 · Analyse pré-vol — identique. Lisez les jetons existants, polices, framework, stance des micro-interactions. Un bouton sur un projet Tailwind avec une police Geist doit adopter ces jetons, pas en inventer de nouveaux.
• Étape 1 · Détection du genre — identique. Éditorial / moderne-minimal / atmosphérique / ludique. Le composant hérite du genre de son environnement (silencieux par défaut vers éditorial lorsqu'il est inconnu).
• Étape 2.6 · Route du thème — identique. Si un tokens.css ou design.md existe, le composant utilise ces jetons. Sinon, demandez « y a-t-il un système à suivre, ou dois-je en choisir un ? » — par défaut vers catalogue si l'utilisateur reste silencieux.
• Discipline 2+1 polices — identique.
• Discipline des états — PLUS STRICTE. Chaque composant interactif DOIT fournir du code pour les 8 états : défaut · survol · :focus-visible · :active · désactivé · chargement · erreur · succès. La liste de contrôle des 8 états dans interaction-and-states.md est obligatoire, pas consultative.
• Test de slop — sous-ensemble uniquement universel. Exécutez les portes visuelles / micro-interaction / contraste (portes 40–41) / accessibilité / typographie. Sautez les portes de diversification (pas d'entrée .hallmark/log.json — les composants ne tournent pas) et sautez les portes de sécurité de mise en page qui supposent une page complète.

Ce que le périmètre de composant saute

• Étape 2 · Choix de la macrostructure. Les composants n'ont pas de macrostructure. Énoncez ceci explicitement : « Périmètre de composant : la macrostructure est ignorée. »
• Choix des archétypes de navigation et de pied de page. N1a–N13 et Ft1–Ft8 sont uniquement pour le périmètre de page. Un composant est un seul élément ; il n'a ni navigation, ni pied de page. Ignorez les deux.
• Motifs de polissage du hero (HP1–HP4). Uniquement pour le périmètre de page. Un bouton ou une carte n'a pas de hero.
• Étape 4 · Enrichissement. Pas d'illustration de hero, pas de vidéo de démonstration, pas de fond abstrait. Le composant EST l'artefact.
• Étape 5 · Aperçu multi-section. Remplacé par le wrapper de démonstration des 8 états (ci-dessous).
• Ajout à la mémoire du projet. Pas d'entrée .hallmark/log.json pour les exécutions de composants. La règle de diversification ne s'applique pas.

Ce que le périmètre de composant émet

Deux fichiers, côte à côte :

1. L'artefact du composant — un fichier unique et autonome correspondant aux conventions du projet :

   • React / Vue / Svelte : Button.tsx / Button.vue / Button.svelte
   • Vanilla web : button.css + button.html
   • Tailwind : un .tsx avec des chaînes className ET un tokens.css s'il manque
   • Le composant consomme les jetons Hallmark par leur nom (var(--color-accent)), jamais de valeurs OKLCH inline.

2. Un wrapper de démonstration des 8 états — <NomComposant>.preview.html (ou .preview.tsx). Une petite page autonome qui rend le composant dans les 8 états empilés verticalement, chacun étiqueté. L'utilisateur l'ouvre une fois, voit le composant fonctionner, puis le supprime. Le wrapper ne fait pas partie du code de production. Format :

   ┌──── Bouton — 8 états ───────────────────────┐
   │                                                │
   │ défaut        [ Cliquez ici                ]    │
   │ survol        [ Cliquez ici                ]    │  ← .is-hover force le style :hover
   │ focus         [ Cliquez ici                ]    │  ← .is-focus force :focus-visible
   │ actif         [ Cliquez ici                ]    │  ← .is-active force :active
   │ désactivé     [ Cliquez ici                ]    │  ← attribut disabled
   │ chargement    [ ⌛ En cours…                ]    │  ← data-state="loading"
   │ erreur        [ ⚠ Réessayer               ]    │  ← data-state="error"
   │ succès        [ ✓ Enregistré               ]    │  ← data-state="success"
   │                                                │
   └────────────────────────────────────────────────┘
   

   Chaque ligne étiquetée utilise une classe (par exemple .is-hover) que le CSS du composant cible en plus de la vraie pseudo-classe, afin que tous les 8 états soient rendus simultanément sur la page de démonstration. Exemple :

   .btn:hover, .btn.is-hover { background: var(--color-paper-3); }
   .btn:focus-visible, .btn.is-focus { outline: 2px solid var(--color-focus); }
   .btn:active, .btn.is-active { transform: translateY(1px); }
   

Format de tampon pour la sortie des composants

Les composants sont tamponnés différemment des pages :

/* Hallmark · composant : <type> · genre : <genre> · thème : <thème>
 * états : défaut · survol · focus · actif · désactivé · chargement · erreur · succès
 * contraste : réussi (46–50)
 */

Le préfixe composant: indique aux futures exécutions de Hallmark que cet artefact fait partie du périmètre des composants et ne doit pas déclencher les règles de diversification de niveau page.