Retour au Blog
22 juillet 20266 min

DS Bridge : quand un design system devient lisible par une IA

ProductUX & DesignInnovation
DS Bridge : quand un design system devient lisible par une IA

Le problème

Depuis un an, je travaille avec des agents IA tous les jours. Et tous les jours, je bute sur le même mur : l'IA ne connaît pas mon design system. Je peux lui coller des tokens dans un prompt, lui décrire mes composants, lui expliquer que non, le bouton secondaire n'a pas ce rayon-là. Elle comprend, sur le moment. Puis la session se ferme et tout est à refaire.

Le problème n'est pas la qualité du modèle. Il est structurel : le design system vit dans Figma, et les agents IA n'y ont pas accès. Entre les deux, il y a moi, qui recopie, reformule et perds le contexte à chaque itération. J'ai fini par me dire que ce travail de traduction n'était pas mon métier, mais celui d'un logiciel.

DS Bridge est né de là. C'est une app native Mac et iPhone qui fait le pont entre les deux mondes, en s'appuyant sur MCP, le protocole qui permet à un agent de se connecter à des sources externes. L'objectif n'est pas de générer des écrans à ma place. Il est plus modeste et plus utile : faire en sorte que l'IA parle ma langue avant même que je lui demande quoi que ce soit.

Un design system n'est pas une bibliothèque d'objets. C'est une grammaire. Tant qu'une IA n'a pas la grammaire, elle écrit dans une autre langue.

Comment ça marche

Tout commence sur le Mac. On y ingère un design system Figma : les tokens, les composants, les styles, la structure. DS Bridge en fait un contexte propre, exploitable, qu'un agent peut interroger via MCP plutôt que de le deviner.

Ensuite, le téléphone prend le relais, et c'est là que le projet devient intéressant au quotidien. Une idée d'écran arrive rarement devant Figma. Elle arrive dans le métro, en réunion, devant l'interface d'un concurrent. Depuis l'iPhone, je photographie ou je décris, et l'app produit un brief structuré, déjà écrit dans le vocabulaire de mon design system, prêt à être posé dans Figma.

Generate · fonctionne de bout en bout

À partir d'une photo ou d'une description, l'app génère un brief structuré qui respecte les tokens et composants du système ingéré. Le résultat n'est pas un écran magique, c'est une base propre et cohérente sur laquelle démarrer.

Audit · en cours

Le chemin inverse : soumettre un écran existant et vérifier ce qui s'écarte du système. Valeurs codées en dur, composants détournés, écarts d'espacement. La partie qui demande le plus de finesse, et celle sur laquelle je travaille.

L'architecture, en clair

DS Bridge architecture
Les blocs en pointillés sont ceux qui ne sont pas terminés. L'écriture directe dans Figma via le plugin est la dernière pièce du puzzle.

Le choix du natif n'est pas cosmétique. Une app SwiftUI multiplateforme me donne le même code sur Mac et iPhone, l'accès à l'appareil photo, et surtout le Keychain pour stocker les clés API sans jamais les faire transiter ailleurs. La synchronisation passe par un backend léger, pour que le design system ingéré sur le Mac soit disponible sur le téléphone.

  • App · SwiftUI multiplateforme, une base de code pour Mac et iPhone
  • Sync · Supabase, pour retrouver le même design system d'un appareil à l'autre
  • Sécurité · Clés API dans le Keychain, jamais dans un fichier de config
  • Liaison IA · Serveur MCP, pour exposer le design system comme une source interrogeable
  • Retour Figma · Plugin bridge, pour poser le brief directement dans le fichier

Ce que j'ai appris en le construisant

Un design system résiste à la traduction. Ce qui semble propre dans Figma se révèle souvent implicite : des conventions que l'équipe connaît sans les avoir écrites, des exceptions tolérées, des composants dont le nom ne dit pas l'usage. Rendre un système lisible par une machine, c'est d'abord découvrir tout ce qu'il ne dit pas. J'ai déjà vécu ça sur un produit de mesure optique, où deux modèles 3D visuellement identiques cachaient deux niveaux de précision opposés. Le problème n'était pas technique, il était de nommage.

L'IA n'a pas besoin de créativité, elle a besoin de contexte. La différence entre une proposition inutilisable et une base de travail solide ne vient presque jamais du prompt. Elle vient de ce que le modèle sait du système dans lequel il travaille.

Le mobile change la nature de l'outil. Tant que c'était une app Mac, c'était un utilitaire de plus. Le jour où j'ai pu photographier un écran en réunion et récupérer un brief structuré, l'outil est entré dans mon vrai quotidien, celui où les idées arrivent loin du bureau.

Où j'en suis

Le flux Generate fonctionne de bout en bout. L'audit et l'écriture directe dans Figma sont en chantier. Je construis ce projet comme je construis tout depuis dix ans : je pose les fondations, je vérifie que ça tient, puis j'élargis. Et je le fais avec l'IA comme partenaire de code, ce qui me permet, en tant que designer, d'aller jusqu'au produit qui tourne au lieu de m'arrêter à la maquette.

Si tu travailles sur des design systems ou sur MCP, ces sujets m'intéressent beaucoup et j'aime en discuter. Le projet avance en public, avec ses parties inachevées assumées.