Design System & Intelligence Artificielle : créer son MCP maison
Rendez-vous le 10 septembre à 19h00, pour un meetup consacré à un sujet qui commence tout juste à sortir des labs R&D : brancher le Model Context Protocol (MCP) directement sur un Design System, pour donner à vos agents IA une seule source de vérité à jour plutôt que des suppositions.
Chez Carrefour, Marcel MCP part d'un problème très concret : sans ce contexte, un LLM invente ses propres valeurs de radius, ignore le glossaire maison, et il faut tout corriger à la main à chaque session.
Antoine Deshoux a construit un serveur MCP qui connecte Marcel (composants, tokens, UX writing) directement au LLM de Figma Make, pour que chaque prompt soit résolu avec les vraies specs du Design System plutôt qu'improvisé. Le serveur couvre 69 composants, 205 variantes, 500 icônes et 80 termes de glossaire, et va jusqu'à générer des jeux de données Carrefour réalistes (magasins, commandes, produits) pour ne plus designer avec des "John Smith" et des "Acme Corp".
Chez Canal+, la mission d'Antoine Fornas (PM IA chez Thiga, actuellement en mission dans les équipes Canal+) partait d'un autre problème très concret : une charge de travail produit qui grossissait plus vite que les équipes, dans un contexte de forte croissance de l'entreprise. Plutôt que de recruter davantage, le pari a été de mettre l'IA au service de la vélocité : des plugins Figma pour automatiser les tâches répétitives et remplir les maquettes avec de vraies données du catalogue Canal+, puis un serveur MCP pour rendre le Design System directement accessible à l'IA.
Résultat, des prototypes interactifs et fidèles à la réalité opérationnelle, centralisés sur un "Hub Canal+" qui permet de les déployer (via GitHub et Cloudflare) et de recueillir des retours sans compétences techniques poussées.
⚠️ Places limitées et sur acceptation réservées aux Product Designer, Design System Leads, Staff/Principal Engineers Front, PM IA et responsables Produit, intéressés par les agents IA.
Key takeaways :
✅ Un LLM livré à lui-même invente des tokens, ignore le glossaire, génère des valeurs de radius qui n'existent nulle part dans le Design System. Le rôle du MCP, c'est d'agréger tout ce contexte (specs, tokens résolus, wording validé) au même endroit, pour que chaque prompt parte des bonnes informations plutôt que d'une supposition.
✅ Chez Carrefour, le MCP génère des écrans complets, corrige un élément ciblé sans toucher au reste de l'interface, et suggère les prochaines étapes logiques d'un écran. Le réflexe change : consulter une documentation à côté devient interroger un partenaire actif.
✅ Chez Canal+, l'IA n'a pas servi à remplacer des recrutements : elle a permis de prototyper plus vite et de construire des outils internes pour absorber une charge de travail produit qui grandissait plus vite que les équipes.
✅ Un hub interne de déploiement (GitHub, Cloudflare, gestion du versioning) permet à des profils non techniques de partager et tester des prototypes, et change la façon dont design, produit et tech collaborent au quotidien.