sheleg-design-skill

DESIGN SHELEG

Aperçu

Une page semble cinématique non pas par le nombre d'animations, mais par une source unique de vérité (position de défilement mesurée) qui entraîne de nombreuses réponses bon marché, en couches et dégradables indépendamment. Centralisez le défilement dans un seul store ; les couches le lisent par image et réagissent dans leur propre langage. Rien ne se fond en fondu — les choses se redéploient. Chaque couche se dégrade vers un état calme statique.

RÉFÉRENCE OBLIGATOIRE — pour le chemin cinématique : lisez SHELEG_DESIGN.md avant d'implémenter une page pilotée par le défilement — architecture, mathématiques de morphing, pont DOM↔WebGL, recette de build (§11), plan des fichiers. Le travail de UI produit ne nécessite pas cette lecture ; la seule règle qui s'applique est répétée ici : lorsque les tokens de mouvement d'un pack diffèrent des valeurs par défaut de SHELEG, le pack l'emporte.

OBLIGATOIRE AVANT TOUTE ANIMATION : lisez MOTION_DOCTRINE.md. SHELEG_DESIGN.md explique comment le mouvement est construit ; la doctrine dit s'il faut le construire — la table de fréquence qui désactive l'animation sur les chemins à haute répétition, l'arbre des easing et l'interdiction du ease-in, le plafond de durée, les formes interdites, et le contrat de mouvement réduit.

Quand l'utiliser

• Pages d'atterrissage/marketing/hero où le mouvement est un objectif déclaré ; fonds de particules ou WebGL liés au défilement ; graphiques liés au défilement, flux d'étapes, rails, parallax
• Un site à défilement existant qui semble nerveux, saccadé ou déphasé
• UI produit nécessitant un système visuel verrouillé — tableaux de bord, administration, outils internes/de développement, tokens, clair/sombre — pack de style uniquement, via workbench
• Surfaces de produits IA : UI de chat et d'agent, sortie en continu, journaux d'exécution, erreurs de modèle, états de contenu généré et de confirmation (AI_PRODUCT_PATTERNS.md)
• Déplacer un système visuel à travers la frontière Figma dans les deux sens (FIGMA_BRIDGE.md)

N'appliquez jamais la couche de mouvement cinématique à : l'UI produit, les sites de documentation, les sites de contenu statique — ou toute page dont le système visuel ou le texte n'est pas encore finalisé. L'UI produit ne prend que la moitié du pack de style et rien d'autre.

Patron central — cinq principes, dans l'ordre

1. Une horloge. Tout mouvement dérive d'un seul état de défilement mesuré ; aucune couche ne mesure le défilement elle-même, donc les couches ne peuvent jamais dériver de phase.
2. Lire par image, notifier rarement. Les consommateurs chauds (WebGL/canvas/rail) lisent le store de manière impérative, zéro rendu framework ; seuls les changements d'acte/section grossiers notifient le framework.
3. Maintenir, puis redéployer. Maintenez une formation ~80% d'une section, puis morphez en une courte vague en arc de cercle, décalée en phase. Les fondus sont interdits.
4. Mouvement mérité. Le défilement est réservé aux instruments qui racontent l'état au fil du temps ; le mouvement de survol/entrée reste sous 500 ms et ne bloque jamais le contenu.
5. Se dégrader vers le calme. Mouvement réduit / curseur grossier / sans WebGL se réduisent à une page statique, entièrement lisible. L'effet est un bonus, jamais une dépendance.

Packs de style

La méthodologie de mouvement est indépendante du style ; l'identité visuelle provient d'un pack de style dans styles/. Chaque fichier de pack commence par sa propre description complète — ce tableau sert à choisir, pas à lire à la place du pack :

Pack	Aspect	Choisir pour
instrument-console	console aérospatiale presque noire, un bleu électrique, télémétrie monochrome	technique / systèmes / infra · contrat central
editorial-luxury	encre crème et expresso, accent sauge, Fraunces/Newsreader	éditorial / recherche / B2B premium · contrat central
workbench	UI produit clair/sombre calme, bordures comme élévation, données monochromes	tableaux de bord / administration / outils internes et de développement (autonome) · contrat central
briefing-room	présentation sombre 16:9, un ton de bleu en OKLCH, art tramé	decks investisseurs et conseil, briefings, présentations en tant que page (autonome) · contrat central
atrium	lumière du jour crème, un ton terre cuite, verre cannelé sur photographie	santé grand public, longévité, bien-être, DTC haute confiance · contrat central
orchard	dalles d'avoine chaudes, sauge et orange bonbon, pilules 3D douces	biotech grand public convivial, bien-être DTC, kits et compléments · contrat central
field-notes	papier vert réglé par des filets, accent rouille, marques de recadrage	logiciels open-source et outils de développement vendus sur l'auditabilité (autonome)
showroom	galerie blanche, encre presque noire, ombre d'encadrement à sept couches	entreprises centrées produit dont le meilleur argument est l'application à l'écran
blueprint	papier blanc, une grille de 32 px, marques d'alignement, aucun rayon	infrastructure vendue sur la précision — recherche vectorielle, stockage, moteurs de requête
prism	lavis irisé avec un bord dur, grotesque sur corps monochrome	porte d'entrée d'un projet d'infrastructure OSS, où la première étape est une commande
maquette	table presque noire, modèles axonométriques crème, aqua pâle	infrastructure de données d'entreprise vendue à un acheteur d'architecture
cyclorama	champ pastel sur une boucle de 32s, sérif machine à écrire, remplissage orange	transformation IA d'entreprise et cabinets de conseil en IA appliquée
scoreboard	papier chaud, encre primaire, orange chaud qui marque seulement, chiffres pixel	produits dont l'argument est un nombre qui s'accumule — croissance, publicité, SEO

Un kit matérialisé répond en partie à ce qu'un pack central omet. npx sheleg-design-skill --kit <pack> produit src/styles.css, dont la moitié composant est du CSS authoré pour les états qu'un pack central refuse de spécifier — :hover, :focus-visible, :disabled, sélectionné. Il n'est pas livré avec ce skill, donc un agent ne lisant que ce bundle les inventera. Récupérez d'abord le kit et traitez toute différence entre le kit et le pack comme un défaut dans l'un d'eux, plutôt qu'un choix.

Six des treize sont sous contrat central, et cela change ce que vous obtenez. Un pack marqué contrat central ne spécifie pas ## Components, ## Hero, ## Responsive ni ## Signature element — donc les états par composant, la fenêtre d'ouverture et son plafond de ligne, les règles de repli, et l'élément unique par lequel la page est mémorisée sont vôtres à décider, et vous le dites à voix haute lorsque vous le faites. Les sept autres répondent aux quatre. Cette asymétrie est la chose la plus susceptible de vous faire inventer une valeur et croire que vous l'avez lue : ce qu'un pack central énonce est mesuré à deux décimales, et cette précision n'est pas une preuve concernant la moitié qu'il laisse silencieuse. Chaque pack déclare son propre niveau sur une ligne Contract: au-dessus de son registre.

Lisez le pack choisi en entier avant de styliser quoi que ce soit — il fournit la palette, la typographie, la texture, les valeurs des tokens de mouvement, les motifs signature et les interdictions. Chaque pack livre une couche de tokens prête à l'emploi dans styles/tokens/<pack>.css — copiez ce fichier textuellement au lieu de transcrire les tableaux. Pour un nouveau style, copiez styles/STYLE_PACK_TEMPLATE.md et conservez chaque titre — Register / Palette / Type / Texture & surface / Components / Hero / Responsive / Motion tokens / Signature motifs / Signature element / Motion flavor (packs cinématiques uniquement) / Micro-interactions / Bans / Gotchas — puis authorisez son tokens/<pack>.css dans la même modification ; n'inventez jamais de valeurs de tokens ad hoc.

Calibration — trois cadrans

Un pack répond quel registre. Il ne répond pas jusqu'où. Deux pages d'atterrissage sur le même pack, l'une pour un assureur réglementé et l'autre pour un studio de design, ne sont pas la même page. Trois cadrans portent cette différence, et ils sont réglés une fois, à voix haute, avant qu'aucune disposition n'existe.

• DESIGN_VARIANCE 1–10 — 1 est la symétrie parfaite, 10 est l'asymétrie délibérée et aucune section ne se ressemble.
• MOTION_INTENSITY 1–10 — 1 est statique, 10 est cinématique et physique.
• VISUAL_DENSITY 1–10 — 1 est un mur de galerie, 10 est un cockpit.

Valeur de base 7 / 5 / 4. Énoncez les valeurs et une ligne de raisonnement avant de construire ; ne demandez pas à l'utilisateur de modifier un fichier, et ne déviez pas silencieusement de ce que vous avez annoncé.

Les lire à partir du brief

Le brief se lit comme	VARIANCE	MOTION	DENSITY
minimaliste, calme, éditorial, « silencieux comme Linear »	5–6	3–4	2–3
consommateur premium, axé marque, « semble cher »	7–8	5–7	3–4
agence, portfolio, expérimental, appât à récompenses	9–10	7–9	3–4
page d'atterrissage / marketing, sans autre signal	7	5	4
UI produit : tableaux de bord, administration, outils internes	4–5	2–3	6–8
confiance d'abord : réglementé, secteur public, clinique	3–4	2–3	4–5
présentation / deck	5–6	1–2	3–4
refonte, conserver l'identité existante	correspondre	correspondre +1	correspondre
refonte, refonte explicite	+2	+2	correspondre

Un brief peut correspondre à deux lignes, et elles peuvent diverger d'un facteur trois. « Un tableau de bord d'administration interne silencieux » active à la fois « silencieux comme Linear » (DENSITY 2–3) et « UI produit » (DENSITY 6–8). La règle de priorité : la ligne qui nomme la surface l'emporte sur la ligne qui nomme une humeur. Une surface décide combien doit tenir ; une humeur décide comment elle est gérée — dans un pack d'UI produit, « silencieux » s'achète par la retenue dans la couleur et le mouvement, pas par le vide. Dites quelle ligne vous avez prise et pourquoi lorsque deux s'activent.

Comment ils se lient

• Le pack l'emporte sur les valeurs, les cadrans l'emportent sur la quantité. Un cadran n'invente jamais une couleur, une police ou un rayon — ceux-ci proviennent de la couche de tokens du pack. Il décide combien d'asymétrie la grille porte, combien de la page bouge, et à quel point elle est dense.
• MOTION_INTENSITY est plafonné par la table de fréquence, pas l'inverse. Un 9 sur un écran de paramètres signifie toujours que le chemin clavier ne s'anime pas. Lisez MOTION_DOCTRINE.md §1 d'abord ; le cadran augmente ce qui reste après que cette table a coupé.
• Le mouvement revendiqué est le mouvement montré. Au-dessus de 4, la page bouge réellement — entrée sur le hero, révélation sur les sections clés, réponse sur l'action principale. Une page statique annonçant 7 est cassée. Si un mouvement fonctionnel ne rentre pas dans le périmètre, réduisez le cadran à 3 et livrez une page statique propre ; ne construisez jamais à moitié un mouvement qui cale, se coupe ou saute.
• Un pack autonome fixe son propre plafond. workbench et briefing-room ne sont pas cinématiques ; MOTION_INTENSITY au-dessus de 3 sur l'un ou l'autre est une erreur de lecture du pack, pas un choix audacieux. field-notes est autonome par défaut et peut opter pour la couche cinématique — il comporte une section ## Motion flavor indiquant comment — c'est donc le seul pack autonome sans plafond strict. Lisez cette section avant d'augmenter le cadran dessus.

La barre d'artisanat — ce que « fait » signifie, dans l'ordre

Quand n'importe qui peut générer un prototype par une invite, l'artisanat est le seul différenciateur restant. Les designers classent ce que cela signifie (Figma, State of the Designer 2026, n=906) : polish visuel 58% · résolution de problème réfléchie 47% · UX claire intuitive 36% · émotion et plaisir 35% · cohérence 15%. Lisez cela comme une définition du fait, dans cet ordre :

1. Polish — le pack appliqué sans exception : tokens, pas de littéraux ; pas de hex, rayon ou taille de police ad hoc dans le diff.
2. Pensée système — la décision visuelle vit à un endroit (la couche de tokens, le registre SCENES) et tout le reste la lit.
3. UX claire — la structure et le comportement ne relèvent pas de ce skill à moitié ; si les flux et les états ne sont pas décidés, arrêtez-vous et décidez-les d'abord.
4. Émotion — mouvement mérité uniquement (principe 4), et jamais au détriment de 1–3.
5. Cohérence — un easing, un ensemble de durées, un accent, un atome par tâche sur chaque écran.

Chargement à la demande — trois choses que la couche de pack ne décide pas

• Profondeur de scène — six couches (SURFACE_COMPOSITION.md), avant d'écrire du CSS pour une page cinématique. Une scène a des plans ; tout sur un seul plan est l'échec qu'aucun easing ne répare.
• Graphiques — confiez le pack à dataviz (même fichier), avant de dessiner un graphique dans un pack. Les noms de tokens ne sont pas uniformes parmi les treize — seuls --bg et --ink se résolvent partout — et une propriété personnalisée non définie ne génère pas d'erreur, elle échoue silencieusement. En deviner une est le moyen le plus silencieux de livrer un mauvais graphique.
• Surfaces mobiles (MOBILE_SURFACES.md), lorsque le brief est un écran d'application native ou une vue mobile-web — pas une page de bureau dont le seul souci mobile est le repli. Cinq règles mobiles que les packs énoncent chacun seul, une sixième aucun pack ne répond (la rampe typographique suit la largeur de la fenêtre, pas la taille de texte de l'utilisateur), et la moitié qu'aucun pack ne décide sur un téléphone : la convention de plateforme.

Choisir entre les packs — montez-les, ne les imaginez pas

Lorsque plus d'un pack pourrait porter un produit, ne discutez pas. Rendez-les.

Montez les packs candidats sur une page existante et peuplée — vrai en-tête, vraies données, vraie densité — basculé par un paramètre de recherche ?variant=<pack>, et passez de l'un à l'autre dans le navigateur. Seule la couche de tokens change ; le balisage reste.

Une route jetable avec un contenu factice est un vide : chaque pack y a l'air bien, ce qui est précisément pourquoi ça ne résout rien. S'il n'y a vraiment pas encore de page peuplée, le choix est prématuré — construisez la page avec le pack vers lequel pointe le registre du brief, puis revenez-y une fois qu'il y a quelque chose de réel à basculer. Si le brief ne donne aucun signal, les valeurs par défaut sont workbench pour l'UI produit et showroom pour une page marketing : les deux sont suffisamment calmes pour que changer plus tard coûte la disposition, pas l'identité. (Cela disait autrefois « le pack par défaut » sans en nommer aucun, ce qui n'est pas un repli.)

Le harnais de comparaison est un échafaudage, pas un livrable : il disparaît avec la même modification qui enregistre la décision.

Surfaces de produits pilotées par l'IA

La conception de produits IA est désormais la troisième compétence la plus demandée dans cette même enquête (37%) — devant le mouvement et l'architecture de l'information — et les surfaces sont nouvelles : un modèle qui diffuse, un agent qui agit, une réponse qui pourrait être fausse. Lisez AI_PRODUCT_PATTERNS.md avant d'écrire du code pour une surface IA.

...