Tu veux les meilleurs outils IA avant les autres ?
On teste et on décrypte les nouveaux outils IA chaque soir, en 5 min. Gratuit.
Inclus dès l'inscription : notre sélection des meilleurs guides & comparatifs IA.
Choisis ton rythme
Gratuit · Pas de spam · Désabonnement en 1 clic
Claude Code, l'outil d'intelligence artificielle, peut désormais générer des interfaces directement sur le canevas Figma grâce à Figma MCP. Vous décrivez une interface en langage naturel, et il la construit. Visuellement, le résultat peut être parfait au pixel près. Cependant, en examinant chaque couche, vous trouverez #5C6AC4 là où devrait se trouver color/brand/primary, 14 là où text/body-sm est défini, et un composant unique fraîchement créé là où une instance de bouton existe déjà dans la bibliothèque. Il est impossible de faire des itérations sur cette base. Le système de design intègre déjà ces éléments, mais Claude Code ne les utilise pas.
Le problème n'est pas une question de capacité. Claude Code sait comment appeler l'API Figma, interroger une bibliothèque, et lier une variable. Le souci est qu'il ne sait pas qu'il doit appliquer ces connaissances dans votre projet spécifique. Personne ne lui a indiqué les règles, donc il a inventé les siennes. Chaque couleur est isolée, chaque composant improvisé, et chaque modification nécessite de tout relocaliser depuis le début. Il réussit le contrôle qualité visuel, mais échoue au niveau structurel.
Comprendre le concept de Harness
Dans l'ingénierie de l'IA, le terme Harness désigne un cadre de contraintes qui guide le comportement d'un modèle. Ce cadre définit ce que le modèle peut ou ne peut pas faire, et comment vérifier la sortie. Le modèle est le moteur, et le harness est tout ce qui fait fonctionner le moteur selon vos règles. Dans le cas de Claude Code, un ensemble de règles a été créé pour encadrer son fonctionnement dans Figma. Cependant, ce n'est pas un harness au sens strict, mais plutôt une couche d'application des flux de travail.
Les défis de la gouvernance dans Figma
Figma possède son propre système de gouvernance, incluant des variables, des styles et des bibliothèques de composants. Cependant, Claude Code opère souvent en dehors de ce cadre, ce qui entraîne des incohérences structurelles malgré un contrôle qualité visuel réussi. Chaque valeur de couleur est isolée, chaque composant est improvisé, et chaque modification nécessite de tout relocaliser depuis le début. La question cruciale est donc de savoir comment intégrer Claude Code dans le système de design de Figma.
Quatre compétences essentielles pour Claude Code
Pour résoudre ce problème, quatre compétences ont été développées pour Claude Code, chacune répondant à une tâche spécifique dans le processus de design.
01 | Preflight : Vérification initiale
Avant toute session de design, trois vérifications sont effectuées : la connexion à Figma MCP, les permissions de lecture/écriture, et le chargement complet des styles et composants. Cela génère une Token Map et un Component Registry pour garantir une base solide. Tant que le Preflight n'est pas validé, aucun nœud n'est créé. La valeur est simple : vous ne découvrez pas trente minutes plus tard que vos tokens de bibliothèque n'ont jamais été chargés.
02 | Reference Interpreter : Planification préalable
Lorsqu'une capture d'écran ou une description de design est partagée, cette compétence analyse l'entrée pour produire un Design Brief structuré. Cela permet de confirmer la direction avant de commencer la construction.
03 | Component Rules : Utilisation des composants existants
Chaque tâche de construction d'interface suit une règle : recherchez d'abord dans la bibliothèque connectée. Si un composant correspondant existe, utilisez son instance. Ce n'est que si rien n'est trouvé que vous construisez à partir de zéro, et même dans ce cas, la mise en page automatique et la nomination sémantique sont obligatoires. Cette compétence modifie le comportement par défaut de l'IA. Sans elle, l'instinct est d'inventer. Avec elle, le premier mouvement devient la recherche. Pour toute équipe qui maintient un système de design, cette séquence fait la différence entre utilisable et inutilisable.
04 | Style Binding : Liaison des styles
Pour chaque tâche impliquant des propriétés visuelles, cette compétence assure que chaque propriété est liée à sa variable ou style correspondant. Aucune valeur brute n'est acceptée. Après avoir écrit dans Figma, elle effectue un passage de contrôle qualité, confirmant les liaisons élément par élément. Elle fait exactement une chose : transformer #5C6AC4 en color/brand/primary.
Adaptation du rôle de l'outil selon le contexte
Ces compétences ne résolvent pas seulement un problème de liaison de tokens. Elles encodent un jugement plus fondamental : le même outil d'IA devrait jouer différents rôles dans différents contextes et produire différents types de sortie en conséquence. Lorsque le designer doit rester impliqué, Claude Code agit comme un assistant de design. Sa sortie doit être quelque chose qu'un humain peut prendre, modifier et itérer. Cela signifie conformité à chaque couche : tokens, composants, structure de mise en page. Les quatre compétences sont actives. La chaîne de gouvernance complète est en vigueur.
Lorsque l'objectif est un prototype rapide, il passe en mode codage. La vitesse prend le pas sur la conformité. La couche d'application des règles se retire. Les valeurs brutes sont attendues, pas des exceptions. L'IA est suffisamment puissante pour écrire Figma. Elle est suffisamment puissante pour écrire React. Mais l'écart entre un outil puissant et un outil utilisable est souvent juste un ensemble de règles que personne n'a écrites.
