Liste d'attente de la bêta
Un skill qui compare ta conception au code de ton Design System
Tu donnes au skill un composant Figma ou un prototype généré par IA, avec le code de ton Design System.
Il te rend la liste des écarts, classés par sévérité.
Tu relis, puis tu décides de ce que l'équipe corrige.
Bêta de 10 places · Date et prix annoncés d'abord aux inscrits
Rejoindre la liste d'attente
Je choisis les 10 testeurs parmi les inscrits, après un court échange avec chacun.
La bêta sera payante, à prix réduit, en échange de tes retours.
Le point de départ
La recette manuelle prend du temps, sans être infaillible
Comparer un composant au code, élément par élément, demande une attention que personne ne garde sur toute une bibliothèque.
Et les prototypes générés par IA arrivent plus vite que les relectures.
Dans un composant Figma
- Un nom différent dans Figma et dans le code
- Une propriété qui n'existe que d'un côté
- Une valeur en dur à la place d'un token
- Un état prévu dans le code, absent de la maquette
- Un calque resté au nom par défaut
Dans un prototype généré par IA
- Un composant inventé, absent du Design System
- Un contraste trop faible ou un focus invisible
- Un libellé vague ou du jargon
- Les états d'erreur, de chargement ou vides oubliés
Le skill repère, tu décides
Comparer au code
- Le skill s'en charge
- Lit le composant ou le prototype, puis le code de ton Design System, et liste chaque écart avec l'endroit exact.
- Tu gardes la main
- Écarter ce qui est voulu, comme une évolution que le code n'a pas encore.
Classer les écarts
- Le skill s'en charge
- Donne une sévérité à chaque écart et sépare ce qui se corrige dans la maquette de ce qui se discute avec les développeurs.
- Tu gardes la main
- Choisir ce qui se corrige maintenant, plus tard, ou pas du tout.
Proposer une correction
- Le skill s'en charge
- Décrit la correction de chaque écart, sans rien modifier sans ton accord.
- Tu gardes la main
- Valider chaque correction, ou la confier à l'équipe.
Accessibilité
- Le skill s'en charge
- Repère ce qui se mesure dans les fichiers : contrastes, focus visible, information portée par la couleur seule.
- Tu gardes la main
- Tester au clavier, au lecteur d'écran, et avec des personnes concernées.
Pour toi si
- Ton Design System existe en code, et tu veux que Figma ou les prototypes le suivent à la lettre
- Ton Design System n'existe que dans Figma, et tu veux y repérer les instances mortes et les propriétés incohérentes
- Tu recettes des composants et tu y passes trop de temps
- Des prototypes générés par IA arrivent dans ton équipe, et personne ne les compare au Design System
Pas pour toi si
- Tu n'utilises pas Claude : le skill est conçu et testé pour lui
- Tu cherches un outil qui génère tes maquettes ou ton code : le skill compare, il ne produit pas
- Tu cherches un outil qui corrige seul, sans relecture
- Tu attends une conformité RGAA : le skill ne remplace pas un audit
Le déroulé de la bêta
- Tu t'inscris sur la liste d'attente.
- Je t'écris pour un échange de 15 minutes, pour voir si ton Design System s'y prête.
- 10 personnes testent le skill sur leurs propres composants, à prix réduit.
- Après chaque recette, tu me dis par écrit ce qui a marché et ce qui a coincé.
- Je corrige le skill avec les retours des testeurs, avant de l'ouvrir à tous.
Certifiée RGAA par Access42
L'autrice
Ma méthode de recette, mise en instructions
Je suis Linh-Dan Tran, Designer spécialisée en Design System et en accessibilité, certifiée par Access42 pour auditer avec le RGAA.
Vérifier chaque élément d'un composant un par un m'a lassée.
J'ai donc écrit un skill qui applique ma méthode de recette : le code fait référence, et chaque écart remonte avec sa sévérité.
Je relis, puis je décide de ce qu'on corrige. Le skill est pensé pour que tu gardes la même place.
Mon parcoursLes questions fréquentes
Qu'est-ce qu'un skill ?
Un dossier d'instructions que Claude suit pour une tâche précise. Celui-ci lui apprend à recetter un composant ou un prototype face au code d'un Design System, toujours de la même façon.
De quoi faut-il disposer pour s'en servir ?
Un compte Claude qui accepte les skills, et un accès au code de ton Design System (dépôt, paquet ou Storybook). Pour les composants Figma, il faut aussi une place Full ou Dev sur une offre Figma payante : avec l'offre gratuite ou une place View ou Collab, le connecteur de Figma est limité à 6 appels par mois, trop peu pour une recette.
Mon Design System n'existe que dans Figma, le skill me sert-il ?
Oui. Il repère les instances mortes, les propriétés incohérentes d'un composant à l'autre, les valeurs en dur et les écarts d'accessibilité mesurables. Sans code, il ne compare pas à une implémentation : la recette reste dans Figma.
Mes fichiers sont-ils envoyés quelque part ?
Non. Le skill tourne dans ton propre compte Claude, avec tes propres connecteurs. Je ne vois ni tes fichiers Figma, ni ton code.
Le skill rend-il mes composants conformes au RGAA ?
Non. Il repère ce qui se mesure dans les fichiers, comme les contrastes ou le focus visible. La conformité se vérifie par un audit, avec des tests au clavier, au lecteur d'écran et avec des personnes concernées.
Mon code n'est ni en React ni en Angular, je peux m'inscrire ?
Oui, indique-le dans le formulaire. La bêta me sert aussi à savoir quels frameworks couvrir en premier.
Quand commence la bêta, et à quel prix ?
La date et le prix ne sont pas encore fixés. Les inscrits les connaissent en premier, avant toute annonce publique.