Je veux
transformer une maquette en écrans qui marchent
Le fichier Figma existe. Il devient des jetons, puis des composants, puis un pont qui reste synchronisé quand la maquette bouge.
À la fin
Un écart mesuré entre la maquette et le code, au lieu d’un désaccord verbal.
2 cartes sur 4 viennent du même groupe —Coupes, accueillir.
Les phrases, dans l’ordre
Copiez une phrase, laissez l’étape rendre ce qui est nommé, puis passez à la suivante.
reverse design system
Les jetons extraits de la maquette : couleurs, typographies, espaces, composants repérés.
Sous le capot
Calqueusecalqueuse des maquettes endormies
figma-shadcn
Les composants générés à partir de ces jetons.
Sous le capot
Mouleusemouleuse des maquettes en composants
design sync
Le suivi : ce qui a changé côté maquette et n’a pas encore changé côté code.
Sous le capot
Contremaitressecontremaîtresse du pont art-code
visual-auditor
La comparaison écran par écran entre la page en ligne et la maquette.
Sous le capot
Portraitisteportraitiste des écrans comparés
Sous le capot — 4 cartes
Si ce n’est pas tout à fait ça
- Je veux me donner une identité visuelle tenablePasser d’un « ça devrait être plus bleu » à un système : des jetons nommés, mesurés, et une relecture qui dit quand on en sort.
- Je veux savoir si mon interface tient deboutLa direction artistique relue par quelqu’un qui n’a pas la main dessus, et la page en ligne comparée à ce qu’elle prétend être.
- Je veux voir ce qui a changé à l’écran sans le chercherDeux captures, une comparaison. Ce qui a bougé apparaît, y compris ce qu’on n’avait pas prévu de changer.
Tirage écrit à la main dans data/parcours.json, tenu par scripts/parcours/check-parcours.sh : chaque carte citée existe dans le registre du framework.