ChaseSunstrom/ui-design

Sampo : Conception UI, motion et 3D

Un chemin unique pour tout travail sur l'apparence ou le mouvement d'un écran : une page web, un écran d'application, un composant, une animation, une scène 3D, ou "rends ça beau". Il achemine vers les playbooks UI (les chemins ci-dessous sont relatifs à ce skill ; les mêmes fichiers s'affichent avec sampo playbooks show ui/NOM) et vers les verbes sampo qui mesurent le résultat. Le but est une UI avec un point de vue, jamais le kit de cartes générique : chaque étape ci-dessous pose une décision ou en prouve une. Une UI en terminal ou un mod Claude Code utilise ../playbooks/references/ui/terminal-ui.md à la place.

Travaillez à l'intérieur d'une tâche ciblée (chaque étape édite des fichiers). Par étape, lisez uniquement le playbook qu'elle nomme.

1. Direction : décider ce qu'elle doit transmettre

• Le dépôt en a déjà une (un DESIGN.md avec une section ## Direction, un guide de marque, un système de design livré) : elle prime. Lisez-la et passez à l'étape 2, sauf si l'utilisateur a demandé un nouveau look.
• Aucune direction, ou l'utilisateur veut des looks ou des styles à choisir : chargez : Skill sampo:directions (six cartes par écran à partir d'une phrase, le choix sauvegardé comme DESIGN.md avec un niveau d'audace).
• Montrez de vrais spécimens au lieu de les décrire : sampo page looks écrit une galerie avec un spécimen vivant par carte de look ; sampo looks classe les vingt selon les keeps et reverts passés de l'utilisateur, alors proposez à partir de son sommet.
• La position, les mots de goût, la banque de direction et "Valeurs par défaut à éviter" : ../playbooks/references/ui/design-direction.md.

2. Tokens : typographie, couleur, espace

• ../playbooks/references/ui/type-and-colour.md : échelle et appariement typographiques, rôles de palette OKLCH, mode sombre comme passe indépendante.
• CSS existant : sampo design extract SRC écrit la table de tokens à partir de ses propriétés personnalisées dans la section ## Tokens de DESIGN.md (--out - l'affiche à la place). À partir de rien : sampo design palette SEED --out tokens.css crée une palette claire et sombre à partir d'une couleur (--format css|dtcg|tailwind) ; elle imprime sur stdout, donc redirigez avec >. Tokens depuis Figma ou un .json DTCG : sampo design tokens tokens.json --to md --out DESIGN.md. Valeurs en dur : sampo design infer SRC propose des tokens.
• Actifs de marque : sampo design tokens DESIGN.md --to brand --out public/ écrit favicon.svg et card.svg.
• Dérive des tokens : sampo design xray PAGE --out xray.png souligne chaque élément en vert (couleur du token) ou en rouge.
• Prouvez avant de construire dessus : sampo design contrast TOKENS vérifie les paires de rôles (texte du corps 7:1 en sombre).

3. Construire : mise en page et comportement

• Partez d'un template strict : sampo new list, puis sampo new web DIR (une page) ou sampo new scene DIR (une scène 3D) ; sampo new check PATH le maintient strict.
• ../playbooks/references/ui/composition.md : rythme, grilles, profondeur à partir d'une lumière, le héros, un atlas d'états.
• ../playbooks/references/ui/interaction.md : délais de feedback, navigation clavier, erreurs de formulaire, règles tactiles 360 px.
• Graphiques : ../playbooks/references/ui/data-viz.md. Pages d'histoire : ../playbooks/references/ui/scrollytelling.md.
• Cartes côté code : sampo lib show NOM (les playbooks les nomment).

4. Motion : conçue, pas saupoudrée

• ../playbooks/references/ui/motion.md : tokens de timing, une table état-à-motion, storyboards, motion réduite comme chemin propre.
• Écrivez le Motion Score (motion.toml à la racine du dépôt), puis sampo motion check (une forme réduite manquante, un easing inconnu, un token que DESIGN.md n'a pas) et sampo motion compile --to css|waapi|three|lab --out FICHIER pour émettre le code.
• Jeux et UI ludique : ../playbooks/references/ui/game-feel.md. Son : ../playbooks/references/ui/sound-design.md.

5. 3D : une scène qui ne casse jamais la page

• ../playbooks/references/ui/scene-3d.md : composition, lumière et matériau, un budget de frames, le contrat de survie (pas de WebGL, motion réduite, contexte perdu), triage d'écran noir.
• Décrivez la scène une fois sous forme de données (caméra, lumières, matériaux, maillages, animations) dans scene.json, puis sampo scene compile scene.json --to three --out scene.js (un module three.js) ou --to component (un composant).
• Aucune dépendance : le template WebGL2 d'un seul fichier ../playbooks/references/ui/templates/scene.html (sampo new scene).
• Rig de lumières et presets PBR : sampo lib show light-and-material ; une texture de shader pour une surface, jamais toute la direction : sampo lib list --area looks, puis sampo lib show shader-NOM ; bibliothèques : sampo lib show three-js, sampo lib show react-three-fiber.

6. Vérifier : prouver en regardant

• sampo design lint SRC : défauts de design générique et maladresses artisanales ; corrigez chacun ou dites pourquoi il reste. Sa dernière ligne nomme les tokens de DESIGN.md qu'aucun fichier n'utilise : raccordez-les ou retirez-les de la table.
• sampo design check : les portes activées de DESIGN.md (## Gates, - brief: advisory|blocking) : les couleurs, familles de caractères et durées des Knobs, trouvés dans le code ; - a11y: … : paires de contraste de tokens, un chemin de motion réduite, pas de flashs rapides, alt d'image et un style de focus qui se voit ; - debt: advisory 40 : couleurs, durées et rayons non-tokénisés par fichier, sous le budget.
• sampo design contrast TOKENS à nouveau après tout changement de couleur ; sampo motion check après tout changement de motion.
• sampo critique URL : les styles que la page utilise réellement par rapport aux tokens de DESIGN.md (sans nom, quasi-duplicata, ponctuel) ; --why SELECTEUR montre quelle règle a gagné. --bingo score neuf indices d'un look templatisé (exit 1 sur une ligne complète) ; --marks capture.png transforme des traits de crayon rouge dessinés sur une capture d'écran en un FIX capturé par élément marqué (--note dit ce que chacun demande) ; --brief [ID] vérifie que les phrases citées par le brief sont sur la page.
• ../playbooks/references/ui/visual-qa.md : sampo smoke capture la matrice de frames (360/768/1440, clair et sombre, motion réduite) ; Lisez les PNG et regardez. Avant et après : sampo img diff A.png B.png --out diff.png.
• Les états d'un composant (par défaut, survol, erreur, vide, chargement) : sampo stories CHART capture chaque état dans une seule page de matrice. sampo shot et sampo stories prennent --profile tv|eink|car|wrist (la taille et l'échelle de cette surface) et --reduced-motion (prefers-reduced-motion: reduce, pour les affiches et les états statiques).
• Enregistrez chacun comme preuve à l'étape de la tâche ; un changement d'UI n'est pas terminé sur les seuls tests verts.

7. Goût

L'utilisateur garde ou rejette un look : sampo looks keep LOOK ou sampo looks revert LOOK, afin que le prochain classement en apprenne.