Les meilleurs serveurs MCP de design pour Claude Code et Cursor

Un serveur MCP de design permet à un agent de code de lire des designs, de rechercher des références UI ou de générer des écrans via le Model Context Protocol. Pour un design Figma existant, commencez par Figma. Pour rechercher des références, utilisez Mobbin. Pour créer de nouveaux écrans d'application mobile dans un projet éditable, Sleek est une option conçue pour cette tâche.

Ce comparatif couvre les fonctionnalités documentées et les parcours de configuration de huit éditeurs pour Claude Code et Cursor, vérifiés le 28 septembre 2026. Nous éditons Sleek. Les recommandations ci-dessous s'appuient sur les possibilités de chaque intégration, et non sur un classement de qualité fondé sur des essais directs.

Qu'est-ce qu'un serveur MCP de design ?

Un serveur MCP de design expose les outils d'un logiciel de design à un client IA. L'agent peut appeler ces outils et recevoir des données ou des images sans vous demander de copier-coller chaque détail dans le chat. Le protocole assure la connexion ; le serveur détermine si l'agent peut lire un fichier, chercher dans un catalogue ou modifier un design.

Un serveur hébergé se connecte via une URL. Une intégration locale se connecte à un logiciel installé sur votre ordinateur. Aucun de ces deux modes ne garantit la capacité à générer des écrans. Vérifiez les opérations disponibles avant de choisir un serveur.

Comment se comparent les serveurs MCP de design ?

Figma est utile lorsque vous souhaitez travailler sur votre design dans Figma. Mobbin fournit des références issues de produits existants. Stitch et Sleek proposent des workflows hébergés de génération d'écrans, tandis que Pencil et Paper connectent un agent à un canvas local. Certaines fonctionnalités se recoupent : choisissez le type de résultat et le workflow dont vous avez besoin plutôt que la plus longue liste d'outils.

Tous les détails d'accès ci-dessous sont à jour au mois de septembre 2026. Les sources des éditeurs et les instructions pour les clients figurent après le tableau.

Le tableau distingue la génération de la recherche de références. Un résultat de recherche peut aider un agent à comprendre un parcours de paiement, mais ce n'est pas un nouvel écran de paiement pour votre application.

Que fait le serveur MCP de Figma ?

Le serveur MCP de Figma fournit le contexte de design nécessaire à l'intégration, notamment la mise en page, les variables et les composants. Le serveur distant permet également aux clients compatibles de créer et de modifier du contenu natif Figma. Utilisez-le lorsque le fichier Figma est le support depuis lequel vous travaillez ou dans lequel vous souhaitez écrire. Le serveur desktop reste disponible pour lire le contexte de design local.

Le centre d'aide de Figma indique un accès distant disponible pour tous les plans et types de licence, un accès desktop réservé aux licences Dev ou Full payantes, et l'écriture gratuite sur le canvas pendant la bêta. L'accès n'est pas illimité : la page sur les limites d'utilisation de Figma accorde jusqu'à 20 appels d'outils de lecture par mois avec le plan Starter, et des quotas plus élevés pour les licences Dev et Full payantes.

Commandes vérifiées le 2026-09-28.

Le guide d'installation distante recommande ce plugin Claude Code :

claude plugin install figma@claude-plugins-official

Ou ajoutez simplement le serveur :

claude mcp add --transport http figma https://mcp.figma.com/mcp

Ouvrez /mcp dans Claude Code et authentifiez-vous. Pour Cursor, le même guide documente cette commande dans le chat de l'agent :

/add-plugin figma

Pour l'accès desktop, activez le serveur MCP dans le panneau d'inspection du Mode Dev de Figma. Le guide desktop fournit cette commande Claude Code :

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

La configuration desktop pour Cursor est la suivante :

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Collez le lien d'une frame et demandez à l'agent de la coder. C'est le point de départ le plus clair lorsque la mise en page est déjà définie. Les outils d'écriture du serveur distant en font également une option pertinente si vous devez créer du contenu directement dans Figma.

Que fait le serveur MCP de Google Stitch ?

Google Stitch fournit une connexion MCP hébergée pour travailler sur des projets Stitch et générer des écrans à partir de texte. Le design obtenu reste hébergé dans un projet Stitch. Cela convient aux développeurs qui souhaitent utiliser le générateur de design de Google depuis leur agent de code et récupérer les données des écrans dans le même workflow.

Le guide de configuration de Stitch MCP documente l'authentification par clé API et par OAuth. La méthode par clé API utilise une clé générée dans les paramètres de Stitch. Le SDK officiel de Stitch documente également l'endpoint distant, la génération ainsi que la récupération du HTML et des images d'écrans.

Pour Claude Code, en utilisant la configuration par clé API du guide d'installation :

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Pour Cursor, dans .cursor/mcp.json :

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Remplacez le texte générique par votre clé et veillez à ne pas inclure ce fichier dans le contrôle de version. Vérifiez les limites actuelles de votre compte Stitch avant de planifier un traitement par lots. La page de configuration est un guide de connexion.

Que fait le serveur MCP de Mobbin ?

Le MCP de Mobbin permet à l'agent de rechercher parmi de vraies interfaces produit et de recevoir des images d'écrans. C'est utile avant de concevoir un parcours ou d'intégrer un pattern sur lequel vous ne vous êtes pas encore arrêté. Les outils documentés cherchent dans du contenu existant ; ils ne génèrent pas le design d'une nouvelle application. Le résultat fourni sert de matériel de référence pour vos choix à venir.

L'introduction de Mobbin confirme l'authentification OAuth et l'accès sur les plans Pro, Team et Enterprise. Sa liste d'outils couvre les écrans, les parcours et les sections de sites web. Les URL des images à haute résolution expirent au bout de 30 jours.

Le guide Claude Code de Mobbin recommande de configurer d'abord le connecteur vérifié dans Claude Desktop ou sur le web. Il documente également cette alternative uniquement en ligne de commande :

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Ouvrez ensuite /mcp, sélectionnez Mobbin et authentifiez-vous.

Pour Cursor, la procédure de configuration de l'éditeur s'appuie sur son plugin du Marketplace plutôt que sur un extrait JSON :

1. Ouvrez le plugin Mobbin dans le Marketplace de Cursor et sélectionnez Add to Cursor.
2. Sélectionnez Add Plugin.
3. Dans Cursor, ouvrez Customize, puis Installed, puis Mobbin.
4. Sélectionnez Authenticate et connectez-vous.

Demandez une référence concrète, par exemple des écrans d'onboarding d'applications bancaires. Choisissez les patterns pertinents avant de demander à un générateur ou à un agent de code d'implémenter votre propre parcours.

Que fait le serveur MCP de Sleek ?

Le MCP de Sleek permet à un agent de générer des écrans d'application iOS et Android éditables au sein d'un projet Sleek. L'agent peut récupérer le HTML des écrans, produire le rendu des écrans et renvoyer un lien vers le projet pour que vous l'examiniez. Utilisez-le lorsque le design de l'application mobile est l'étape manquante entre votre brief et le code que vous souhaitez faire rédiger par l'agent.

Le README du MCP Sleek documente un serveur hébergé, la connexion OAuth ainsi que les exportations vers Figma et vers le code. Transmettez à l'agent l'intégralité du brief de l'application en un seul message afin que Sleek puisse planifier l'ensemble des écrans en une fois. La génération consomme des crédits d'espace de travail ; la lecture et le rendu d'images n'en consomment pas.

Claude Code :

claude mcp add --transport http sleek https://sleek.design/api/mcp

Ouvrez /mcp, sélectionnez Sleek et effectuez l'authentification dans le navigateur. Pour Cursor, ajoutez les lignes suivantes dans .cursor/mcp.json pour un projet spécifique ou dans ~/.cursor/mcp.json pour tous vos projets :

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

Activez le serveur et connectez-vous. Le README recommande l'authentification OAuth ; les clés API constituent une solution de repli pour les clients ne la prenant pas en charge.

Les comptes gratuits peuvent tester l'API avec 60 crédits accordés une seule fois. Parmi les abonnements publics, l'accès continu à l'API et à l'agent nécessite un plan Pro ou Team, le plan Starter en étant exclu. Le plan Pro s'élève à 69 $ par mois ou 360 $ par an avec 20 000 crédits mensuels au mois de septembre 2026. Les exportations vers Figma et vers le code sont incluses dans toutes les offres, les exportations de l'offre gratuite étant limitées aux écrans déverrouillés.

Le README du MCP estime la consommation à environ 30 crédits par nouvel écran et de 5 à 30 crédits par modification. Une seule exécution de design peut être active par projet. L'appel design attend jusqu'à 270 secondes, puis renvoie un statut en cours d'exécution si nécessaire ; l'agent doit interroger régulièrement get_design_run plutôt que de soumettre à nouveau le brief.

Sleek génère des designs et du code UI exportable. Votre agent de code doit toujours relier les données et la logique de l'application, et adapter le code de l'écran si vous développez avec React Native ou SwiftUI. Si vous préférez un workflow via une API REST, le guide des skills de design UI pour Claude Code explique l'installation du skill Sleek dédié.

Que fait le serveur MCP ScreensDesign ?

ScreensDesign MCP combine la recherche d'applications iOS et la génération d'écrans. Sa page MCP répertorie une bibliothèque de plus de 2 715 applications aux chiffres d'affaires les plus élevés, des parcours UX complets, des signaux de revenus et des outils permettant de générer des écrans à partir de ces références (données de septembre 2026). Il convient à un cahier des charges qui commence par l'examen des patterns mobiles existants.

L'accès au MCP nécessite ScreensDesign Pro. Le serveur hébergé prend en charge OAuth ou des clés API restreintes. Pour Claude Code, ajoutez le point de terminaison HTTP et authentifiez-vous via /mcp :

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

Pour Cursor, ajoutez ceci à .cursor/mcp.json, puis connectez le serveur :

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

Utilisez le guide de configuration du fournisseur pour la configuration spécifique à votre compte. Les signaux de revenus décrivent les applications de référence ; ils ne prouvent pas que le fait de copier un écran améliorera le taux de conversion de votre application.

Que fait le serveur MCP AIDesigner ?

AIDesigner MCP génère et affine des designs HTML/CSS avec Tailwind pour des viewports mobiles ou desktop. Il peut utiliser le contexte de votre dépôt et partager les résultats avec son canvas. Choisissez-le lorsque vous souhaitez obtenir un code d'interface généré en tenant compte de votre projet existant, puis inspectez le résultat avant de le considérer comme une intégration finale.

Le guide de configuration officiel fournit une CLI qui configure le serveur et les instructions pour l'agent. Exécutez ceci à la racine de votre projet pour Claude Code :

npx -y @aidesigner/agent-skills init

Pour Cursor, sélectionnez l'hôte explicitement :

npx -y @aidesigner/agent-skills init cursor

Les deux se connectent à https://api.aidesigner.ai/api/v1/mcp. Terminez la connexion OAuth depuis le panneau MCP du client. La génération consomme des crédits de compte ; vérifiez votre solde avant de lancer des variations répétées. Le résultat documenté est du code HTML d'interface, pas une application mobile native complète.

Que fait le serveur MCP de Pencil ?

Pencil, désormais pen.dev, connecte un agent au document .pen ouvert dans son application desktop ou son extension IDE. L'agent peut inspecter et modifier ce canvas pendant que vous travaillez sur le même fichier. Cela convient aux développeurs qui souhaitent conserver un document de design aux côtés de leur dépôt de code et bénéficier d'un workflow d'édition local interactif.

La documentation d'intégration IA décrit une connexion stdio locale à l'application. Le guide d'installation fournit ces étapes pour Claude Code au lieu d'une URL utilisable sur n'importe quelle machine :

1. Ouvrez un document .pen dans pen.dev.
2. Activez le CLI Claude Code dans Settings, puis MCP.
3. Démarrez ou redémarrez Claude Code.
4. Exécutez /mcp et confirmez que pencil est connecté.

Pour Cursor, suivez la procédure documentée pour l'extension IDE :

1. Ouvrez Extensions et recherchez pen.dev.
2. Installez l'extension.
3. Créez ou ouvrez un fichier .pen.

La page de tarification indique que pen.dev est actuellement gratuit au mois de septembre 2026. Cela ne comprend pas l'abonnement séparé à votre agent de code. Conservez le document ouvert pour ce workflow MCP ; ne tentez pas de deviner un endpoint hébergé et n'utilisez pas un chemin vers l'exécutable copié depuis la machine d'une autre personne.

Que fait le serveur MCP de Paper ?

Le MCP de Paper permet à un agent de lire et de modifier un document de design Paper conçu en HTML et CSS. Il prend en charge un workflow de canvas partagé : l'agent modifie le design, vous l'inspectez, et l'agent peut réutiliser le résultat pendant l'intégration. Paper Desktop doit être en cours d'exécution avec un fichier ouvert pour réaliser ces opérations sur le document.

Le guide de Paper MCP documente l'installation de ces plugins. Installez et ouvrez d'abord Paper Desktop. Pour Claude Code, exécutez :

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

Ouvrez ensuite Claude Code et vérifiez /mcp. Pour Cursor, exécutez cette commande dans le panneau de l'agent :

/add-plugin paper-desktop

Rechargez Cursor si le serveur n'apparaît pas. L'ancienne configuration HTTP via localhost de Paper fonctionne toujours, mais les plugins actuels utilisent le CLI de Paper. Le CLI peut exposer les outils lorsque l'application Desktop est fermée ; la lecture et l'écriture de documents nécessitent néanmoins toujours l'application.

La page de tarification de Paper indique 100 appels MCP par semaine pour la version gratuite et 1 million par semaine pour la version Pro au mois de septembre 2026. Le plan Pro coûte 20 $ par éditeur par mois, ou 16 $ par éditeur par mois avec une facturation annuelle. Un quota d'appels d'outils ne correspond pas à un nombre d'écrans : une seule tâche de design peut nécessiter plusieurs appels.

Quel serveur MCP de design devriez-vous utiliser ?

Utilisez Figma pour intégrer un design Figma existant, Mobbin pour chercher des références, et Sleek pour générer des écrans mobiles au sein d'un projet que vous pouvez réviser et exporter. Stitch est une autre option de génération hébergée. Choisissez Pencil ou Paper si vous souhaitez qu'un agent et un canvas local travaillent sur le même document de design.

Commencez par votre besoin immédiat. Si un coéquipier vous a déjà transmis une frame Figma, ajouter un second générateur introduit un choix de design dont vous n'avez peut-être pas besoin. Si vous n'avez pas encore de mise en page, les références peuvent vous aider à décider ce qui doit figurer sur l'écran avant la génération. Pour le brief d'une nouvelle application mobile, connectez votre agent à Sleek et inspectez les écrans générés avant de les intégrer. L'essai gratuit couvre environ une exécution de design ; le plan Pro permet un usage continu.

Transmettez à l'agent toutes les règles de marque existantes dans le cadre du brief. La bibliothèque DESIGN.md propose des directives de design écrites que vous pouvez utiliser en parallèle de ces outils ; il s'agit d'un élément d'entrée indépendant de la connexion MCP.

Pour découvrir d'autres solutions au-delà des intégrations pour agents, consultez le classement des outils de design d'applications mobiles par IA et les alternatives à Claude Design.

Foire aux questions