Un design system et des agents pour une équipe d’un designer

Un kit React aligné sur Figma, un pack de skills pour Claude Code et un index Notion qu’un agent sait lire : la gouvernance par l’outil plutôt que par le document.

Rôle: Design system et product management
Période: Avril à juillet 2026
Équipe: Seul designer, avec la direction produit et technique
Périmètre: Design system, skills, pilotage produit

Synthèse

Contexte: Angular en production, React pour le neuf, un seul designer : une règle écrite ne tient pas. Le système devait se lire par les outils que l’équipe utilise déjà, dont Claude Code.
Mon rôle: Conception du design system dans Figma et en React, écriture des skills, refonte du modèle de pilotage produit et de son index pour agents.
Design systemtokens, composants, démos
Skillsrègles lues par Claude Code
Figma et codeaudit et alignement
Pilotage produitchaîne unique, index pour agents
Réalisations et livrables: Kit de composants React
89 fichiers, tokens Tailwind v4
Design system Figma
13 styles de texte, près de 1 300 variantes
Pack de skills
4 publiques, 5 internes
Index Notion pour agents
garde-fous écrits

89
fichiers de composants dans le kit React: 13 styles
typographiques, du display 64 px à la légende 11 px: 15 scénarios
au crash-test du pilotage produit

Le design system

Un seul designer, Angular en production, React pour le neuf : le partage porte sur les tokens. Dans Figma, 13 styles typographiques et près de 1 300 variantes de composants, nommés comme dans le kit React, son alter ego.

Tessan-UI : parcourir le catalogue

Tessan-UI : tokens, couleurs, typographie, mouvement

Tessan-UI : une boîte de dialogue

Tessan-UI : composants mobile et cabine

01 / 04

Les rampes de couleur du design system, dans Figma

Des skills pour que chaque génération respecte le système

Seul designer face à trois stacks, j’ai écrit les règles du design system sous une forme que Claude Code lit à chaque session : tokens, composants, doctrine de mouvement, vocabulaire patient. Le pack compte quatre skills dans le dépôt public et cinq dans la version interne de juin, avec une préséance écrite entre le kit React et le SDK Angular. Les équipes génèrent ainsi des interfaces déjà alignées, sans dépendance de plus. Aucune mesure d’adoption n’a été instrumentée.

Le pack de skills : les cinq skills de la version interne

Une règle du pack de skills, et le kit rendu à partir de ces tokens

La skill du kit React, et le catalogue rendu

La skill de mouvement, et une boîte de dialogue du kit

Figma et code, dans les deux sens

L’audit du système Smile a croisé le code et les variables Figma, et il a nommé le mécanisme de la dérive. Côté app, cinq sous-agents ont parcouru les écrans en lecture seule le 25 juin : cinq hauteurs de barre, une cible de retour à 24 px au lieu de 44 sur 15 écrans sur 23, une seule cause, l’absence d’un composant Header. Il a été construit le jour même, puis déployé sur 24 écrans.

La palette dans Figma et les tokens dans le code

Les boutons dans Figma et le composant du kit React

Audit des composants de l’app patient, 25 juin : cinq sous-agents, une cause racine

Piloter et produire avec des agents

Une page Notion écrite pour les agents décrit les bases, les statuts et les recettes de lecture. L’agent répond à « où en est l’application mobile ? », propose un tri signé et ne change jamais une priorité sans validation humaine ; le crash-test de 15 scénarios en a fait ressortir 7 correctifs. Côté livraison, les développeurs reçoivent sept epics, 25 user stories, 40 écrans et un gabarit de CLAUDE.md qui porte les interdits réglementaires, et ils implémentent avec Claude Code.