Un classement des serveurs MCP qui donnent aux agents d’IA un accès réel aux outils de design. Comparez le serveur officiel de Figma, Framelink, Canva, Penpot, Blender, Storybook, shadcn/ui et Playwright, puis configurez la génération d’images et de vidéos directement depuis votre agent.
Votre assistant d’IA sait déjà écrire une page d’accueil correcte. Ce qu’il ne peut pas faire seul, c’est ouvrir votre fichier Figma, vérifier votre kit de marque Canva ou regarder le bouton que vous venez de livrer pour vous dire que le padding est décalé. Les serveurs Model Context Protocol (MCP) comblent cet écart. Chacun est un petit connecteur qui donne à un agent d’IA une capacité précise : lire ce cadre, modifier cette diapositive, construire cette scène 3D, cliquer dans cette page.
Ce classement retient les serveurs MCP qui méritent leur place dans l’environnement d’un designer. Il commence par les options Figma, s’étend aux outils qui les entourent et se termine par l’élément que la plupart des listes oublient : les images et les vidéos qui remplissent les mises en page. Chaque entrée indique ce que fait le serveur, où il atteint ses limites et à qui il convient.
MCP est un protocole ouvert qui permet à un client d’IA (Claude, Cursor, VS Code, ChatGPT et d’autres) de dialoguer avec des outils externes via une interface standard unique. Un serveur publie une liste d’outils, comme « lire ce cadre Figma » ou « générer une image », et le client décide quand les appeler. Vous installez un serveur une seule fois, et chaque client compatible MCP peut l’utiliser.
Les serveurs existent en deux variantes :
npx ou uvx, et dialoguent avec une application ouverte, comme Blender.mcp.figma.com/mcp, et vous vous connectez via votre navigateur la première fois.
💡 Astuce : Nettoyez un fichier avant de connecter quoi que ce soit. Nommez vos calques, transformez les formes répétées en composants et placez les couleurs dans des variables. Les agents lisent la structure, et une page pleine de calques « Frame 1042 » ne leur donne rien à exploiter.
Figma héberge l’essentiel du design de produit, c’est donc là que MCP a le plus progressé. Deux serveurs méritent attention, et ils résolvent des problèmes différents.
Figma exploite son propre serveur MCP distant à https://mcp.figma.com/mcp. Vous le connectez depuis un client comme Claude Code, Cursor, VS Code ou Windsurf, vous vous connectez avec votre compte Figma, et l’agent peut extraire le contexte de design en direct de vos fichiers : mise en page, composants, variables et styles. Figma cite aussi Android Studio, Replit et Warp parmi ses partenaires.
Il va au-delà de la lecture. Le serveur peut créer et modifier du contenu natif dans Figma Design et FigJam, notamment des cadres, des composants, des variables, de l’auto layout, des notes adhésives, des connecteurs et des formes. Il lit aussi les fichiers Figma Make, si bien qu’un agent peut voir le code derrière un prototype au lieu d’une image rendue. Il fonctionne aussi avec Code Connect, la fonctionnalité qui associe les composants Figma aux vrais composants de votre base de code, afin que le code généré réutilise ce que votre équipe livre déjà.
Idéal pour : les product designers qui transmettent aux développeurs et veulent un code généré qui utilise les composants réels de l’équipe.
Points de vigilance : Figma a signalé ces fonctionnalités comme bêta lors de l’annonce du serveur distant, donc le comportement des outils peut changer. Vérifiez votre offre et votre type de siège dans le centre d’aide de Figma avant de déployer à toute une équipe.
Le serveur de Framelink (le projet Figma-Context-MCP sur GitHub) prend une autre voie. Il tourne en local et appelle l’API Figma avec un jeton d’accès personnel que vous créez dans les paramètres de votre compte Figma. Avant que l’agent ne voie quoi que ce soit, le serveur simplifie la réponse de l’API afin que seules les informations les plus pertinentes sur la mise en page et le style atteignent le modèle. Moins de bruit dans le contexte signifie des réponses plus précises et moins de tokens gaspillés.
Idéal pour : les développeurs qui veulent transformer un cadre en code front-end avec les bons espacements et styles, dans Cursor ou un autre agent de code.
Points de vigilance : il se concentre sur la lecture des designs et la récupération des ressources, donc n’attendez pas qu’il modifie votre canevas. Traitez le jeton comme un mot de passe.
Choisissez le serveur officiel si votre équipe travaille dans Figma et veut un accès en écriture, Code Connect et la prise en charge de Make. Choisissez Framelink si vous préférez une configuration légère, fondée sur un jeton, qui reste dans vos propres outils. Installez-en un d’abord. Faire tourner les deux donne à l’agent deux outils qui se chevauchent pour la même tâche et rend ses choix plus difficiles à prévoir.
Canva propose un serveur MCP qui permet aux assistants d’IA d’accéder à votre espace de travail : vos designs, vos ressources de marque et vos modèles. Canva l’a lancé avec un connecteur ChatGPT, avec l’idée que vous pouvez demander un design, l’obtenir et continuer à le modifier dans la même conversation. Les actions signalées incluent la création et la modification de designs, la recherche dans la bibliothèque de modèles, la gestion des ressources de marque et l’export dans plusieurs formats. Consultez la page du connecteur IA de Canva pour la liste à jour des assistants et des actions pris en charge.
Idéal pour : les spécialistes du marketing et les petites équipes qui travaillent déjà dans Canva et veulent qu’un agent rédige dix variantes d’une publication sur les réseaux sociaux à partir d’un seul brief.
Points de vigilance : l’agent travaille avec les briques propres à Canva. Une illustration sur mesure poussée ou un travail photographique complexe nécessite toujours un outil dédié.
Penpot est l’outil de design open source, et son équipe expérimente un serveur MCP. L’approche est inhabituelle. Au lieu d’une longue liste d’outils étroits, l’agent en reçoit quelques-uns, et l’outil principal exécute du JavaScript dans l’environnement de plugins de Penpot, avec accès à l’API Plugin complète. Des serveurs communautaires existent aussi pour les instances auto-hébergées, permettant à un agent de lire, créer, modifier et exporter des éléments de design.
Idéal pour : les équipes qui ont besoin d’un auto-hébergement et de la pleine maîtrise de leurs données de design.
Points de vigilance : le statut expérimental. Testez d’abord sur un fichier jetable, car un agent capable d’exécuter du code peut aussi casser une mise en page.
Le projet communautaire blender-mcp de ahujasid associe un module complémentaire Blender à un serveur MCP en Python. Claude ou un autre client peut créer, modifier et supprimer des objets, définir des matériaux, prendre des captures de la fenêtre de visualisation et exécuter du Python dans Blender. Il peut aussi récupérer des ressources depuis Poly Haven, Sketchfab, Hyper3D et Hunyuan3D. Il nécessite Blender 3.0 ou une version plus récente, ainsi que Python 3.10 ou une version plus récente.
Idéal pour : la visualisation de produits et le blocage rapide de scènes, où l’agent installe un sol, des lumières et une caméra pendant que vous dirigez artistiquement.
Points de vigilance : l’outil d’exécution de code lance du Python arbitraire dans votre scène. Enregistrez d’abord votre fichier et travaillez sur une copie.
Le design dérive dès qu’il atteint le code. Ces trois serveurs ramènent l’interface livrée vers le design.
Storybook MCP donne à un agent un contexte propre à votre projet sur vos composants : ce qui existe, quelles props ils acceptent et comment ils sont documentés. Il expose aussi les outils de test de Storybook, si bien que l’agent peut vérifier et corriger sa propre production. Le résultat concret est une interface générée qui réutilise votre Button existant au lieu d’en inventer un nouveau.
Idéal pour : les équipes disposant d’une bibliothèque de composants mature.
Points de vigilance : une documentation maigre. Si vos stories sont vides, le contexte l’est aussi.
Le serveur MCP officiel de shadcn permet à un assistant de parcourir, rechercher et installer des composants depuis des registres, y compris le registre public, des bibliothèques privées d’entreprise et des sources tierces. Exécutez npx shadcn@latest mcp init --client claude dans votre projet, redémarrez votre client et demandez « un tableau de tarifs utilisant les composants card et badge ». Pour les designers qui prototypent en code, c’est la façon la plus rapide d’afficher de vrais composants accessibles à l’écran.
Idéal pour : les équipes React et Next.js qui s’appuient sur les composants shadcn.
Le Playwright MCP de Microsoft donne à un agent un vrai navigateur. Il travaille à partir d’instantanés structurés d’accessibilité plutôt que de pixels bruts, donc les clics et la saisie sont rapides et prévisibles, et il peut prendre des captures d’écran lorsque vous voulez une preuve visuelle. Demandez-lui d’ouvrir votre page de préproduction, de passer à une largeur de téléphone et de signaler tout débordement ou toute étiquette manquante.
Idéal pour : vérifier le comportement adaptatif et les étiquettes d’accessibilité avant la revue de design.
Points de vigilance : un instantané montre la structure, pas le goût. Un humain doit toujours juger l’espacement, la couleur et le rythme.
Tout ce qui précède traite de la mise en page, des composants et du code. Rien de cela ne produit la photographie qui se trouve dans la section héros ni le court clip derrière le titre. C’est le rôle du connecteur MCP de PicassoIA, et c’est le seul serveur de cette liste conçu pour créer des ressources plutôt que pour les déplacer.
Le connecteur donne à un agent des outils pour générer des images, modifier des images et générer des vidéos, ainsi que des outils pour vérifier l’état d’une tâche, lister vos générations passées, lister les modèles disponibles et lire les informations de votre compte. Les tâches sont asynchrones : l’agent soumet une requête, reçoit un identifiant de prédiction, puis revient vérifier jusqu’à ce que le statut indique succeeded ou failed.
Quatre modèles se cachent derrière le connecteur :
Tenez compte des limites : cinq prédictions simultanées par compte, partagées entre l’accès API et les connexions MCP, et des prompts pouvant aller jusqu’à 4 000 caractères. Si vous préférez écrire du code, l’API REST à api.picassoia.com/v1 utilise des jetons Bearer et le même flux de création, d’interrogation et de récupération.
Sur la plateforme elle-même, d’autres modèles conviennent à des tâches plus précises :
| Tâche de design | Modèle à essayer |
|---|---|
| Logos et icônes en vecteurs propres | Recraft V4.1 SVG |
| Affiches avec un texte lisible | Ideogram V4 Quality |
| Images héros photographiques | GPT Image 2 |
| Rédaction de briefs et de textes alternatifs | Claude Sonnet 5 |
picassoia.com/en/mcp/accounts) et créez une nouvelle connexion.💡 Modèle de prompt : « Photo photoréaliste d’un atelier de céramique à 7 h du matin, lumière douce venant de la fenêtre à gauche, objectif 35 mm, faible profondeur de champ, 16:9. » Sujet, décor, lumière, objectif. Quatre détails valent mieux qu’un paragraphe d’adjectifs.
| Serveur | Type | Fonction principale | Idéal pour | Effort d’installation |
|---|---|---|---|---|
| Figma (officiel) | Distant | Lire et écrire des fichiers Figma | Équipes produit | Faible |
| Framelink Figma Context | Local | Cadres sous forme de données simplifiées | Développeurs front-end | Faible |
| Canva | Distant | Créer et modifier des designs Canva | Équipes marketing | Faible |
| Penpot | Auto-hébergé | Scripter Penpot via des plugins | Équipes open source | Moyen |
| Blender MCP | Module complémentaire local | Piloter des scènes Blender | Visuels 3D et produits | Moyen |
| Storybook | Projet | Documentation et tests des composants | Équipes de systèmes de design | Moyen |
| shadcn/ui | Local | Parcourir et installer des composants | Équipes React | Faible |
| Playwright | Local | Vérifications dans un vrai navigateur | QA et travail adaptatif | Faible |
| PicassoIA | Distant | Générer des images et des vidéos | Toute personne ayant besoin de ressources | Faible |
Combinaisons qui fonctionnent bien ensemble :
Un serveur MCP est soit du code qui s’exécute avec vos droits, soit une connexion de compte donnant accès à vos fichiers. Traitez-le en conséquence.
Lire sur les connecteurs aide, mais le moyen le plus rapide de voir l’idée fonctionner, c’est de créer quelque chose. Ouvrez Picasso IA, choisissez PicassoIA Image et rédigez un prompt pour la photo héros dont votre projet actuel a besoin : sujet, décor, lumière, objectif. Puis passez le résultat dans PicassoIA Image Editor Pro pour ajuster un détail à la fois.
Une fois que cela vous paraît naturel, connectez le connecteur MCP à votre agent et laissez-le gérer la partie répétitive. Demandez cinq variantes de héros dans un seul brief, puis choisissez la meilleure et transformez-la en court clip avec PicassoIA Video. Vos mises en page restent dans Figma ou Canva, vos composants dans Storybook, et vos images arrivent d’un seul prompt. Commencez aujourd’hui par une image et voyez quelle part de votre flux de design un agent peut prendre en charge.
Choisissez votre langue
