Hallmark (Conception sur mesure)

Hallmark

Donne aux interfaces générées par un assistant de codage l'air d'être conçues, pas générées : un plancher dur contre les défauts dans lesquels chaque modèle a été entraîné, une direction choisie pour que les constructions consécutives ne convergent pas, une idée par écran. Au-dessus du plancher, la page est à vous : vous êtes un designer compétent.

Propulsé par Together AI.

Le Plancher

Lie chaque sortie dans chaque harnais, rien n'est renonçable, même si rien d'autre n'est lu.

1. Chaque couleur et chaque police passe par un jeton déclaré dans :root (ou un bloc de thème déclaré). Pas de couleur littérale ni de font-family au-delà du bloc de jetons. (48)
2. Jamais de transition: all. Jamais d'animation de width, height, top ou left. (10a)
3. Jamais un mot en italique à l'intérieur d'un titre romain. (38i)
4. overflow-x: clip sur html et body. Jamais hidden, jamais 100vw. (34)
5. Les pistes de grille contenant des images utilisent minmax(0, 1fr) ; les en-têtes d'affichage portent overflow-wrap: break-word; min-width: 0. (50)
6. Chaque élément interactif a un :focus-visible, apparaissant instantanément. (26a, 15)
7. Chaque animation a un repli prefers-reduced-motion: reduce, et le contenu est visible avec le scripting désactivé. (27, 62)
8. Jamais de métrique inventée, de témoignage, de mur de logos ou de nombre d'études de cas. (46a)
9. Jamais de sourcil, et jamais d'étiquette en capitales suivies ou en petites capitales : les étiquettes, légendes, en-têtes de tableau, tags et liens de navigation sont dans la police du corps (ou la police d'étiquette du thème), un cran plus petits, en phrase ou en minuscules, non suivies. (54, 67)
10. Jamais de chaînes méta reliées par des points médians, de flèches collées au texte du lien, ou de points de statut décoratifs. (63)
11. Jamais de dégradé violet-bleu, de carte dans une carte, d'emoji comme icône, ou de fenêtre de navigateur ou d'OS dessinée à la main. (2a, 4, 30a, 47a)
12. Le titre principal du héros, une phrase et l'action principale sont tous visibles à 1280×800 sans défilement. (44b)
13. Environ 80 mots sur un écran donné ; le texte du héros est le titre, une phrase et ses actions. (58)
14. Le conteneur est limité et centré : à 1920, les gouttières s'agrandissent, la mesure et les grilles ne s'agrandissent pas. (44d)
15. La première ligne non vide de la source CSS est le tampon Hallmark, puis la ligne de critique, puis les éventuelles dérogations. (20)
16. Si Node est disponible, exécuter node <skill-dir>/scripts/sloplint.mjs <sortie> --render avant de remettre le résultat. Corriger chaque FAIL ; corriger ou déroger à chaque REFLEX.

Au-dessus du Plancher, une porte Réflexe est une valeur par défaut dans laquelle un modèle tombe, révocable sur enregistrement avec une vraie raison, et une vérification Finition est un détail de fabrication, répondue, jamais bloquante (references/gates.md § 1 et § 2).

Flux

0. Pré-vol : lire le projet avant de demander quoi que ce soit.
1. Demander une fois : le matériel, l'audience, l'usage, le ton.
2. Façonner : concevoir la page, puis la nommer.
3. Direction : distribuer un thème, ou concevoir librement lorsque l'utilisateur demande du sur-mesure.
4. Charger les fichiers de mise en page, d'images, de fabrication, de genre et de thème, ainsi que gates.md § 1 à § 4.
5. Le bloc Choix, une fois.
6. Construire : le héros d'abord, puis la page ; tampon, tokens.css, journal.
7. Balayage : sloplint --render jusqu'à propreté, les portes jugées, la revue de finition, la demande de matériel.

Verbes, uniquement lorsque l'utilisateur nomme Hallmark : redesign <cible> (une refonte complète en conservant le contenu et le câblage) et audit <cible> (un rapport) ; lire d'abord references/redesign.md. Tout autre changement sur un design existant n'est pas une exécution de Hallmark : faites-le comme demandé, dans le propre système du projet.

Codex CLI et OpenCode lisent d'abord references/flow.md § Harnais ; les autres harnais exécutent ce fichier tel quel.

0. Pré-vol

Signaux, dans l'ordre : design.md ou DESIGN.md à la racine (un système verrouillé : il remplace tout ce qui suit, et les pages le partagent) ; .hallmark/brand-spec.md ou une invite nommant une vraie marque (exécuter references/brand-truth.md ; ne jamais thématiser une vraie marque de mémoire) ; les polices, la palette, l'espacement, les bibliothèques d'animation et le framework du projet (package.json, configuration Tailwind, :root, jetons, liens de polices) ; le produit lui-même : une URL, un serveur de développement en cours d'exécution, un projet qui démarre avec une commande ou une application sur la machine, que la construction capture avec scripts/capture.mjs (imagery.md § 4) ; un serveur MCP Inspo (mcp__inspo__* outils : signal 8, flow.md § Signal 8) ; une invite /hallmark, Hallmark nommé ou une demande personnalisée le bat ; TOGETHER_API_KEY défini (signal 9, l'étape de composition).

Produire un bloc (citations fichier:ligne, ce qui est préservé, ce qui est introduit), mis en cache dans .hallmark/preflight.json (flow.md § Pré-vol).

1. Demander une fois

Un seul message, même sur une invite de cinq mots :

Avant de construire, quatre choses. 1. Matériel, celui qui compte le plus : que peut montrer la page ? Captures d'écran ou enregistrement d'écran (ou montrez-moi l'application, son URL ou son dossier et je l'exécuterai et les prendrai), vos photos, des chiffres réels (clients, disponibilité, prix), une citation avec le nom de la personne qui l'a dite, des logos que vous pouvez utiliser. Collez-les ou donnez les chemins ; sans photos, je place des substituts de la bibliothèque photo de Hallmark que vous remplacerez plus tard, et je n'invente jamais de chiffre, de citation ou de logo. 2. Audience : qui utilise cela et qu'est-ce qui les intéresse ? 3. Usage : l'action unique que la page doit susciter. 4. Ton : choisissez un extrême (éditorial, brutaliste, doux, utilitaire, luxueux, ludique, technique, austère) ; "propre et moderne" n'est pas un ton. Plus l'ambiance en 4 à 8 mots et une couleur d'ancrage si vous en avez une. Ou dites allez-y et je déduirai et vous dirai ce que j'ai choisi.

Les champs ignorés sont des désinscriptions : déduisez-les, énoncez les déductions en une ligne en haut de la réponse, tamponnez-les ; pas de questions de suivi. Les faits ne sont jamais déduits : un chiffre, une citation ou un logo non fourni est absent ; une image non fournie est un substitut dans un emplacement. Lorsque l'invite répond aux quatre éléments, ou que personne ne peut répondre (une exécution sans tête, un lot), ne demandez pas.

Genre, silencieusement : outil IA, génératif, musique, vidéo, voix, sombre, atmosphérique → atmosphérique ; SaaS, entreprise, API, plateforme, outil développeur, infra, B2B → moderne-minimal ; ludique, amusant, convivial, doux, enfants, jeux, communauté → ludique ; sinon éditorial, qui couvre la plupart des invites grand public et familiales. Une fois qu'un thème est distribué, son genre l'emporte (fichier de genre, tampon, --genre). Lorsque deux genres non par défaut se déclenchent, ajoutez un choix ou l'autre au message, ou sur "allez-y" choisissez et dites-le.

Périmètre. Une invite nommant un élément unique (bouton, champ, carte, modale, navigation, pied de page, barre d'onglets, puce) ou disant "juste le X" est un composant (flow.md § Périmètre composant). Un écran sur lequel quelqu'un travaille (un tableau de bord, un admin, des paramètres, un outil) est un écran d'application (flow.md § Écrans d'application).

2. Façonner

Le matériel d'abord. L'inventaire, une ligne : réel (toute chose concrète que l'invite et le projet fournissent : nom, affirmation, chiffres, lieux, dates, images), images (ce que la page montre et d'où chacune vient : les vôtres, captures d'écran du produit réel, le produit construit, la bibliothèque), absent (toute preuve qu'elle n'aura pas : logos, citations, métriques que personne n'a données). La forme suit : une page avec des images les met en avant (imagery.md § 1) ; une page sur les mots porte du texte et des faits (Long Document, Lettre, Index d'abord, Manifeste).

Le travail. Nommer ce qu'un visiteur vient faire (s'abonner, réserver, visiter, assister, acheter, essayer, s'inscrire, embaucher, rejoindre, écouter) et lire ce travail dans references/anatomy.md : où les sites réels de la catégorie placent l'action, les sections autour desquelles ils sont construits (le menu, la programmation, les enjeux, le dossier), et comment ils se terminent. La page est construite à partir de cette anatomie, jamais à partir d'une séquence par défaut de chiffres, d'étapes et d'une bande email (85).

Puis concevoir la page : sa forme, comment elle s'ouvre, le contenu et la composition de chaque section, la navigation, le pied de page, ce qui porte le héros. Points de départ : 21 formes dans references/macrostructures.md (chargez uniquement le fichier que vous choisissez) ; compositions, navigations et pieds de page dans layout.md.

Le tirage. Sur une construction avec thème, une fois l'étape 3 choisie, exécuter node <skill-dir>/scripts/theme.mjs draw --material photo|product|words --job <travail> --theme <slug> [--log .hallmark/log.json]. Libéré du journal et de l'image du thème, il distribue une forme, la posture du héros, la navigation, le pied de page, la première section, où se trouve l'action, deux compositions à exclure et par quoi le héros commence. Acceptez-le sauf si le matériel refuse un choix, et nommez tout échange dans le bloc Choix : une invite dans un thème, construite deux fois, donne deux pages. Test du miroir : une invite voisine dans la même catégorie obtiendrait-elle cette combinaison exacte ? Si oui, changez une décision et dites laquelle.

Signature. La chose unique dont un visiteur se souviendrait : la chose réelle la plus forte de l'invite montrée sous son meilleur jour (la photographie qui est le lieu, le produit faisant son seul travail, un prix affiché énorme parce que c'est l'offre, une commande pour essayer). Réalisez-la dans le matériel du thème (sur une exécution personnalisée, dans son propre look), montrez-la sur le premier écran, nommez-la dans le bloc Choix et le tampon. Un nombre dessiné comme repères est un dispositif, pas une signature (82).

Tenez tout cela ; cela se dit une fois, à l'étape 5.

3. Direction

La première correspondance gagne.

1. L'utilisateur a nommé un thème → construit (tampon theme: <nom> (par demande)).
2. L'utilisateur a demandé du sur-mesure ("personnalisé", "dérive-le", "sur mesure", "pas de thème", "un monde à part") → references/direction.md : le design est vôtre. Il remplace le tirage, les formes, layout.md, le fichier de genre et les règles de composition et de pli de l'étape 6 ; le Plancher, les portes et le balayage tiennent. Le silence ne prend jamais cette voie.
3. Tout le reste distribue un thème :

node <skill-dir>/scripts/theme.mjs deal --genre <genre> --prompt "<l'invite>" [--log .hallmark/log.json]

Il distribue trois thèmes qui correspondent à l'invite et effacent le journal. Regardez les trois images, choisissez celle dont le matériel peut porter l'invite (mouvement, photographies, code), dites laquelle et pourquoi, et chargez uniquement references/themes/<slug>.md. Re-distribuez uniquement sur demande (--reroll 1). Pas de Node : choisissez depuis references/themes/index.json à la main et tamponnez deal: manuel.

Un thème est un matériel, pas un plan : il ne définit jamais ce que la page contient ni dans quel ordre. Là où il y a désaccord entre lui et un fichier de forme, de genre ou de fabrication sur le matériel, les contrôles ou le mouvement, le thème gagne ; le Plancher et les propres mots de l'utilisateur l'emportent sur les deux.

4. Charger

Exactement ceux-ci, pour une construction de page : references/layout.md · references/anatomy.md, la partie du travail · references/imagery.md · references/craft.md · references/genres/<genre>.md · references/themes/<slug>.md et son image, déjà vue lors de la distribution (un thème nommé : regarder <slug>.jpg maintenant). Du thème, prendre son équilibre de palette, sa voix typographique, ses surfaces et son Éventail (les sections qu'il fait sans photographie), jamais sa mise en page · references/gates.md § 1 à § 4. Une exécution personnalisée charge direction.md à la place des fichiers de mise en page, de genre et de thème.

Uniquement si nécessaire, dans references/ : un fichier de macrostructure · microinteractions.md pour l'UI avec état · interaction-and-states.md pour les formulaires · responsive.md pour une mise en page inhabituelle · texture.md lorsque le thème nomme la texture · scroll-choreography.md pour une histoire de défilement · dark-mode.md pour les deux modes · data-viz.md pour les graphiques · fonts.md sur les exécutions personnalisées · comp.md sur le signal 9 (compositions, images générées) · design-md.md pour verrouiller le système.

gates.md § 5 attend l'étape 7, § 6 les revues ; charger plus est le plus grand coût évitable.

5. Le bloc Choix

La seule récitation des décisions de l'exécution, et la fenêtre de redirection de l'utilisateur :

**Hallmark · v2.0.0**

- **Forme** · Établi, du tirage 7f3a2c · genre moderne-minimal · travail : s'inscrire, l'action dans le héros et à côté du prix
- **Thème** · Corail, distribué 2/3 (gris chaud, un signal corail, General Sans, pilules douces) · efface Cobalt sur bande papier
- **Chrome** · navigation : alignée au bord, un mot-symbole et une action · pied de page : un mât, le mot-symbole au-dessus des liens
- **Héros** · Scène : titre sur les colonnes 1 à 5, l'emplacement sur 6 à 12 à 560 px, centré
- **Signature** · la liste de factures en recouvrement, construite en direct dans le héros
- **Sections** · Héros (la liste de factures) · Épinglé (un paiement en retard, relancé en trois panneaux) · Commutateur (la vue du client et la vôtre) · Tableau (tarification) · Pied de page
- **Matériel** · réel : la configuration en 2 minutes, l'import CSV, Lisbonne · images : la liste de factures construite dans le héros, photos de bibliothèque d'un studio de Lisbonne (atténuées) · absent : logos, citations, métriques
- **Balayage** · exécuté après la construction

Les lignes d'une exécution personnalisée sont dans direction.md. Puis une ligne silencieuse, ignorée dans le périmètre composant ou lorsque design.md existe : Système portable ? Dites lock the system pour un design.md. Sur le signal 9, comp.md s'exécute ici.

6. Construire

• Commencer par l'échafaudage. node <skill-dir>/scripts/theme.mjs scaffold <slug> (avec le --dealt de la distribution ; --custom sur une exécution personnalisée) écrit tokens.css (les jetons du thème et l'échelle partagée) et base.css (ce que le Plancher a déjà décidé) à côté de la feuille de style du projet, et imprime le squelette du tampon, les deux imports et le script d'emplacement. N'écrivez que la page.
• Lire references/patterns.md une fois : contrôles dans les huit états, un emplacement, un fait manquant, un formulaire qui n'envoie encore nulle part, une révélation, des chiffres qui comparent. Prenez leur forme, jamais leur copie.
• Héros d'abord. Écrire la navigation et le héros, rien en dessous encore, exécuter node <skill-dir>/scripts/sloplint.mjs <fichier> --render --stage hero, puis la revue du héros dans un contexte frais (gates.md § 6). Construire les sections une fois le héros livré ; les crédits photo et les vérifications à l'échelle de la page attendent la page.
• Une idée par écran, affichée en grand. Héros : un titre de sept mots ou moins (50 caractères), une phrase de douze mots ou moins, une ou deux actions. Six à neuf sections, héros et pied de page inclus (cinq sur une invite mince), 450 mots visibles au maximum, chacun un morceau du contenu de sa propre catégorie dans une composition avec de la masse (layout.md § 4 et § 5). Le héros est le premier écran et seulement le premier écran, sa posture tirée du travail (layout.md § 2).
• Les images. Chaque image est dans l'inventaire (réel, bibliothèque, non) ; les légendes sont des faits, pas des étiquettes ; les substituts portent une classe .hallmark-placeholder visible sous forme de bordure en pointillé grise avec le nom de l'emplacement et "remplacer avec le matériel réel" ; les photos de bibliothèque sont créditées dans le pied de page (imagery.md § 3, § 5).
• Le contenu est vrai ou marqué absent. Pas de "renforcez". Le texte de la page est la copie réelle du projet, ce que l'utilisateur a donné, ou une phrase signalétique marquée [exemple uniquement] qui sera remplacée. Le titre du héros est l'affirmation la plus forte de l'invite dans huit mots ; un chiffre réel la rend plus forte ; s'il est absent, laissez-le sortir. Une carte ou un composant sans contenu réel est un emplacement, pas une illustration (craft.md § 4).
• Placer le tampon. La première ligne non vide du CSS est /* Hallmark v2.0.0 · <thème> · <travailler> · <forme> · <tirage> */ ; la deuxième ligne, si exécution personnalisée, est le nom de l'auteur comme /* Conçu par <nom> */, sinon un journal de ce que le thème a apporté (voix, portée, palette). Au-dessus de la ligne du tampon : une marque BOM UTF-8, une seule ligne @import url(tokens.css); et @import url(base.css);, et un script d'emplacement qui ajoute un data-hallmark aux éléments de contenu ; les règles viennent en dessous.
• Journal. Écrire dans .hallmark/log.json la forme, le thème et le slug du tirage, les décisions de chrome, la signature, la liste des sections et l'état du balayage. Le journal sert au tirage, à la vérification du miroir et au redéploiement (flow.md § Journal).
• Sur les exécutions personnalisées uniquement, le système de composition (signal 9) s'exécute après l'écriture CSS mais avant la revue.

7. Balayage

• Exécuter node <skill-dir>/scripts/sloplint.mjs <fichier.css> --render. Corriger chaque FAIL ; pour chaque REFLEX, le corriger ou ajouter une dérogation dans le tampon (/* Waive: <id de la règle> · <raison> */), une ligne par dérogation, juste en dessous de la ligne du tampon. Exécuter jusqu'à ce que la sortie soit propre.
• Juger les portes (gates.md § 5) : le bloc Choix verrouillé, le test du miroir réussi, la règle du marteau contrôlée, l'invention barrée (gates.md § 7 : pas de transform pour l'effet, les sections ont de la masse,[exemple uniquement] n'est pas une fin). Juger les portes, tamponner le résultat, ne pas les bloquer.
• Revue de finition. Lire la construction comme si elle était neuve, en commençant par le héros, en s'arrêtant sur : effet du premier écran, lisibilité, contraste sur le thème réel, espacements inégaux (craft.md § 2). C'est le moment d'ajuster, pas de reconstruire.
• Demander le matériel. Si des images de la bibliothèque sont utilisées ou si une photo réelle est absente : une question, une seule : "Où est la photo ? Cet emplacement en a besoin de la vôtre avant la mise en ligne." C'est la seule relance. Marquer l'emplacement comme _remplacer avec la photo de [nom]_ dans la page (un commentaire dans le HTML après l'élément, ou une légende visible sur le substitut).
• Fermeture. Lorsque la construction est propre, les portes sont jugées, les finitions sont vérifiées, le matériel est demandé : terminer avec le tampon, le journal et la signature. Le bloc Choix est la conclusion ; aucune autre sortie n'est nécessaire.

Références

• layout.md – mise en page, compositions, navigation
• anatomy.md – anatomie des pages d'atterrissage par travail
• imagery.md – photographie, légendes, crédits
• craft.md – détails de finition, typographie, espacement
• gates.md – portes, dérogations, revues
• direction.md – exécutions personnalisées sans thème
• patterns.md – contrôles, emplacements, formulaires, révélations
• macrostructure.md – 21 formes de page
• brand-truth.md – marques réelles, pas de mémoire
• redesign.md – refonte et audit
• flow.md – détails du flux de travail, harnais, signaux