Référence vers style

Que fait Référence vers style ?

Transforme les références en un style pour l’ensemble du site, affiché sur un tableau visuel (board.html) et soutenu par un guide de style mesuré (style.md). L’apparence provient des références ; le contenu provient du sujet. Définir un style ne change jamais l’application ou le site. L’appliquer le fait, mais uniquement lorsque l’utilisateur nomme un style sauvegardé à utiliser (voir Application d’un style sauvegardé).

Aligner le style une fois, avant toute modification de page. Le guide est la source de vérité : construisez chaque élément visuel à partir de lui, et placez chaque correction d’abord dans le guide, afin que rien de construit à partir de lui ne puisse dériver de ce que vous avez vu sur le tableau.

Mesurer, ne pas évaluer à l’œil. La vision est bonne pour voir ce qu’une référence fait, et mauvaise pour les couleurs, tailles et espacements exacts. Chaque valeur qu’une référence montre provient de scripts/measure.py (tout le reste est dérivé de celles-ci ou choisi, et le précise), et chaque échantillon du tableau est rendu et mesuré de la même manière par scripts/verify.py jusqu’à correspondance. Le tableau reste visuel ; les nombres vivent dans le guide et le rapport.

Commencer calme, puis ajuster. Une référence est son style à pleine concentration, et étaler chaque trait sur chaque élément peut être excessif. Ainsi, la première passe utilise chaque trait distinctif uniquement là où il fait le plus de travail, à ses valeurs mesurées, et l’utilisateur augmente ou diminue chaque trait lors de la révision. Le changement de force affecte l’endroit où un trait apparaît, jamais ses valeurs mesurées.

Quand ne pas utiliser

• L’utilisateur souhaite une correspondance exacte avec son propre frame Figma. Construisez le frame.
• Le projet possède déjà un style sauvegardé dans design/styles/. Appliquez-le à la place (voir Application d’un style sauvegardé).

Prérequis

Avant l’étape 1, exécutez python3 <ce skill>/scripts/doctor.py (sur Windows, py -3 à la place de python3 partout). Il vérifie chaque dépendance et imprime la commande d’installation exacte pour chacune manquante.

• Exit 0 : prêt.
• Exit 1 : des paquets Python sont manquants. Montrez à l’utilisateur les commandes imprimées et attendez ; rien ne peut être mesuré sans eux.
• Exit 2 : le navigateur ne peut pas s’exécuter. Proposez les commandes d’installation imprimées. Si l’utilisateur ne peut pas l’installer, continuez uniquement avec des références image (demandez des captures d’écran de sites live), exécutez check.py avec --unverified, et dites lors de la révision que la précision du tableau n’est pas prouvée.
• Pas de Python du tout (python3 introuvable, ni py -3 sur Windows) : doctor.py ne peut pas s’exécuter. Dites à l’utilisateur que le skill nécessite Python 3.9 ou ultérieur, depuis python.org ou le gestionnaire de paquets de leur système, et attendez. N’installez pas Python vous-même.

Décisions

Prenez vous-même chaque décision nécessaire à l’exécution, et arrêtez-vous une seule fois : au tableau. Le tableau montre à l’utilisateur l’ensemble du style en un coup d’œil, afin qu’il le juge là, et non comme une liste de questions préalables.

• Décidez, ne demandez pas : quels traits prendre et laisser, la force initiale de chacun, le nom et le slug du style, la liste des sujets, la direction lorsque les références s’accordent, et comment éviter un style existant. Enregistrez chaque choix dans le guide (une source chosen: ou une ligne Prendre/Laisser), afin qu’il puisse être modifié ultérieurement.
• Demandez tôt uniquement quand vous ne pouvez pas continuer : une référence ne se charge pas ou n’est qu’une vignette, une dépendance est manquante, ou les références pointent vers des directions opposées (par exemple papier de dessin pâle et plan sombre) que ni elles ni le projet ne tranchent. Alors posez une courte question avec les options, votre choix en premier, et rien d’autre.
• Gardez l’arrêt court. Les nombres vivent dans le guide et verify.md, donc le message ne contient ni tableaux ni mesures. Terminez-le par ce bloc, puis attendez :

Votre avis : quelque chose à changer ?

Tableau : <chemin vers board.html> · Précision : 35 mesures sur 35 correspondent (verify.md) Décidé pour vous : nom et slug ; les principaux traits pris et laissés ; la direction, s’il y avait un choix Commencé calme : chaque trait calme et où il apparaît, en quelques mots

1. Augmenter ou diminuer un trait : nommez-le, par exemple "plus de grille" ou "moins de rouge"
2. Changer autre chose : dites quoi
3. Rien : le style est sauvegardé tel quel

Utilisation : le style est sauvegardé dans design/styles/<slug>/. Nommez-le lorsque vous souhaitez l’utiliser, par exemple "appliquer <slug> partout". Jusque-là, l’application ou le site ne change pas.

Avec un outil de question, posez-la là aussi, en commençant par "Votre avis". Rien n’a besoin d’approbation : chaque style sauvegardé est prêt à être utilisé, et l’utilisateur en choisit un par la suite.

Étapes

1. Voir les références, puis les mesurer. Ouvrez chacune : faites défiler les sites live et observez leur mouvement. Si l’une ne se charge pas ou n’est qu’une vignette, demandez une capture d’écran. Ne travaillez jamais à partir d’un titre ou d’une URL. Sauvegardez une capture d’écran de chacune dans references/, et notez tout mouvement observé. Préférez le PNG : le JPEG grise les fines lignes colorées.

   Lisez ensuite references/measure.md et mesurez une coupe par trait que vous pourriez prendre (un titre, un bouton, une règle, une zone d’arrière-plan), le tout en une seule exécution.

2. Lire le projet. Faites-le avant de choisir un style, pour que la direction s’adapte déjà :

   • Lisez design/styles/index.md s’il existe, afin que le nouveau style n’entre pas en conflit avec les précédents, et notez quels slugs sont pris.
   • Listez 4 à 8 objets, matériaux, processus, mesures ou lieux réels, chacun avec sa source. Partez de la liste de sujets partagés de l’index. Utilisez des choses réelles, pas des symboles du sujet, et omettez tout ce que vous ne pouvez pas sourcer.
   • Trouvez les tokens du site (propriétés CSS personnalisées, classes de framework ou variables Webflow) et chaque type de composant utilisé, comme les titres, boutons, cartes, figures, lignes de liste, navigation et formulaires, avec l’emplacement de chacun. Le guide restyle leur apparence ; leur contenu et leur structure restent.

3. Lire le style. Avec plusieurs références, lisez ce qu’elles partagent. Liez chaque trait à la coupe qui le montre ; cette preuve va dans le guide, pas dans le chat.

   Prendre : le style	Laisser : ce qui appartient à une seule référence
   Palette, caractère typographique, ligne et forme, surface, densité, rythme, hiérarchie, mouvement	Actifs, logos, copie, mises en page exactes, détails ponctuels

   Donnez à chaque trait Prendre une force, écrite dans la colonne Force du guide :

   Force	Où le trait apparaît	Utilisé pour
   calme	Seulement les 1 à 3 endroits où il fait le plus de travail, nommés	Le début pour chaque trait distinctif (une couleur d’accent, une police d’affichage, une texture, un motif)
   complet	Chaque composant auquel il convient	Le début uniquement pour ce dont chaque page a besoin : la surface de la page, la couleur du texte, et les traits qui ne créent pas d’ambiance (comme les coins carrés)
   fort	Chaque composant auquel il convient, et avec plus d’espace : plus de surface, un usage vedette	Uniquement lorsque l’utilisateur demande plus

   Diminuer un trait calme signifie le déplacer dans la colonne Laisser.

   Décidez vous-même du style (voir Décisions) : choisissez les traits, un nom dont le slug n’est pas pris (sauf si l’utilisateur a demandé de réviser ce style), et une direction qui n’entre pas en conflit avec un style existant. Ne vous arrêtez pas ici sauf si les références sont en conflit de manière irrésolue.

4. Écrire le guide. Chaque exécution a son propre dossier, afin qu’aucune exécution n’en écrase une autre :

   design/styles/
     index.md              chaque style, où il s’applique, liste de sujets partagés
     <slug>/
       style.md            le guide
       board.html          la vérification visuelle
       measured.json       ce que measure.py a lu des références
       verify.md           la proximité du tableau avec les références
       references/         captures d’écran des références
   

   Copiez assets/style.md de ce skill vers style.md et remplissez-le. Gardez chaque titre, dans l’ordre, et écrivez Aucun pour une section vide, afin que tous les guides se lisent de la même manière. Écrivez les valeurs exactement (hex, px, noms de polices), pour qu’une autre session puisse reconstruire le style sans les références.

   • Preuve : une ligne par coupe mesurée, nombres copiés depuis la sortie de measure.py.
   • Tokens : chaque token indique d’où il vient : crop:<nom> (la valeur y est mesurée ; une couleur doit correspondre à la lecture de cette coupe ou à sa valeur likely), derived: <règle> (construit à partir de tokens mesurés, comme un ton de survol ou une couleur de texte assombrie à 4.5:1), ou chosen: <raison> pour ce qu’aucune référence ne montre, comme les états et le texte courant. Les tailles viennent aussi des mesures : la taille de police est la hauteur de capitale (hauteur d’encre d’une coupe de type en capitales) ÷ le ratio de hauteur de capitale de la police. Chaque règle nomme une source de sujet réelle et n’utilise rien de la colonne Laisser. Préfixez chaque token avec --<slug>-, afin que les styles puissent partager une page sans conflit.
   • Composants : donnez à chaque type de composant un tableau de propriétés (propriété, puis token ou valeur exacte, pour chaque état), afin qu’il puisse être reconstruit sans deviner. Utilisez des tokens partout où il en existe un. Suivez la force de chaque trait : un composant en dehors des emplacements nommés d’un trait calme utilise les tokens plus simples du style à la place, comme la police de texte ou la couleur d’encre.
   • Mappage : mappez chaque token, classe ou variable existant de l’étape 2, et chaque type de composant, vers son nouveau token ou spécification de composant. C’est ce à partir de quoi l’application du style travaille, donc ne laissez rien dans le projet non mappé : écrivez Conserver ou Supprimer avec une raison là où rien ne le remplace.

5. Montrer le style, puis itérer. Lisez references/board.md, copiez assets/board.html comme une copie de fichier (pas en le retapant) et remplissez ses espaces réservés à partir du seul guide : chaque type de composant avec états, une section Styles, une très petite section réelle, et le mouvement, chacun tagué avec data-crop pour la coupe dont il provient. Vérifiez-le ensuite par rapport aux références et au guide, et corrigez chaque échec vous-même, pour au maximum trois tours :

   python3 <ce skill>/scripts/verify.py design/styles/<slug>
   python3 <ce skill>/scripts/check.py design/styles/<slug>
   

   Ouvrez le tableau dans le navigateur de l’utilisateur et donnez les chemins vers board.html et verify.md.

   Ajoutez ensuite le style et les éventuels nouveaux éléments de sujet à design/styles/index.md, en le créant depuis assets/index.md si nécessaire. design/styles/ est le seul endroit du projet que ce skill modifie.

   Arrêtez pour la révision avec le bloc des Décisions : quelque chose à changer ? La précision est montrée par verify.md, ainsi que tout ce qui échoue encore après trois tours, afin que l’utilisateur juge uniquement la direction et la force. Pour chaque tour de retour, mettez à jour le guide, reconstruisez uniquement les parties affectées du tableau, puis exécutez verify et le check une fois et corrigez ce qu’ils signalent pendant au maximum trois tours sans annuler les modifications de l’utilisateur. Mettez à jour l’index si le nom ou la liste des sujets a changé, rouvrez le tableau et demandez à nouveau. Chaque tour se termine mesuré, afin que le style sauvegardé soit toujours précis, quelle que soit l’étape où l’utilisateur s’arrête. Pour augmenter ou diminuer un trait, modifiez sa Force (écrivez (retour utilisateur) après) et les composants qu’il atteint ; les valeurs restent mesurées, donc cela ne nécessite pas de data-accept. Si l’utilisateur souhaite un trait plus audacieux que la référence elle-même (plus grand, plus lourd, plus saturé), cela modifie une valeur : traitez-le comme ci-dessous. Un changement demandé par l’utilisateur est intentionnel même lorsqu’il s’éloigne d’une référence : donnez au token chosen: retour utilisateur et marquez son échantillon data-accept avec la même raison, afin que verify le signale comme intentionnel au lieu de le faire échouer, et ne l’annulez jamais pour faire passer verify. Si l’utilisateur rejette la direction elle-même plutôt que les détails, ne corrigez pas les tokens : revenez à l’étape 3, relisez les références, choisissez une nouvelle direction, reconstruisez et arrêtez pour la révision à nouveau.

   L’exécution se termine lorsque l’utilisateur n’a rien à changer ou passe à autre chose. Il n’y a pas d’étape d’approbation. Pour utiliser le style plus tard, l’utilisateur le nomme, et le skill l’applique (voir Application d’un style sauvegardé).

Application d’un style sauvegardé

Lorsque l’utilisateur nomme un style sauvegardé à utiliser, par exemple "appliquer <slug> partout" ou "utiliser <slug> sur la page de tarification", lisez references/rollout.md et suivez-le. Il travaille à partir du seul guide : il ajoute les tokens du guide au projet, puis parcourt le Mappage ligne par ligne, restylant chaque composant depuis son tableau de propriétés sans changer son contenu ou sa structure. Sautez les étapes 1 à 5 : le style est déjà défini.

Exemple

Lisez examples/drafting-sheet/style.md et verify.md ; les fichiers JSON et board.html sont des sorties générées, valant la peine d’être ouvertes uniquement pour voir les balises data-crop. examples/drafting-sheet/ est une exécution terminée : une référence de feuille de dessin mesurée en huit coupes, le guide, et un tableau dont 36 mesures correspondent (une intentionnellement).

Références : dessins techniques et plans, pour un site sur une roue en croissance.

• Prendre : lignes fines et précises, grilles réglées, petites étiquettes techniques, annotation dense.
• Laisser : le cartouche de chaque dessin, les pièces et la disposition de la feuille.
• Sujet : une roue en croissance de 5,5 m, dimensions réelles du mât, dessins techniques.
• Règle : lignes de cote de plan + dimensions réelles du mât = figures annotées avec leurs valeurs mesurées.