Penpot expérimente des serveurs MCP pour des flux de travail de conception basés sur l’IA —

Imaginez que votre fichier Penpot contient un jeu d’icônes complet en plus de la conception elle-même, qui utilise certaines de ces icônes, mais pas toutes. Si vous deviez demander à une IA telle que Claude ou Gemini d’exporter uniquement les icônes utilisées, elle ne pourrait pas le faire. Il n’est pas capable d’interagir avec les fichiers Penpot.

Cependant, un Serveur Penpot MCP peut. Il peut effectuer un certain nombre d’opérations triées sur le volet selon des règles et des autorisations définies, d’autant plus que Penpot dispose d’une API étendue et encore plus parce qu’il est source ouverte.

Le travail de l’IA consiste simplement à comprendre votre intention, à choisir la bonne opération à effectuer par le serveur MCP (une exportation dans ce cas) et à transmettre tous les paramètres (c’est-à-dire les icônes utilisées). Le serveur MCP traduit ensuite cela en une requête API structurée et l’exécute.

Il peut être utile de considérer l’IA comme un serveur dans un restaurant qui prend votre commande, le serveur MCP comme à la fois le menu et le chef, et la requête API comme (espérons-le) une pizza chaude sur une assiette chaude.

Pourquoi des serveurs MCP, exactement ? Eh bien, Penpot n’est pas en mesure de comprendre votre intention car ce n’est pas un LLM et il ne permet pas non plus aux LLM tiers d’interagir avec vos fichiers Penpot pour la sécurité et la confidentialité de vos données Penpot. Bien que les serveurs Penpot MCP agissent comme un pont sécurisétraduisant l’intention de l’IA en requêtes API en utilisant vos fichiers et données Penpot comme contexte.

Ce qui est encore mieux, c’est que parce que Penpot prend un approche de conception exprimée sous forme de codeles conceptions peuvent être créées, modifiées et analysées par programmation à un niveau granulaire. C’est plus contextuel, plus particulier, et donc plus puissant par rapport à ce que proposent les autres serveurs MCP, et loin plus réfléchi que le workflow d’IA médiocre « Décrire → Générer » dont je pense que personne ne veut vraiment. Livre blanc sur l’IA de Penpot décrit cela comme une mauvaise approche et l’approche « Convertir en code » comme une approche laide, alors que les serveurs MCP sont plus raffinés et adaptables.

Caractéristiques et détails techniques

Avant de passer aux cas d’utilisation, voici quelques fonctionnalités et détails techniques qui expliquent plus en détail le fonctionnement des serveurs Penpot MCP :

• Conforme aux normes MCP ;
• S’intègre à l’API Penpot pour les données de conception en temps réel ;
• Comprend un SDK Python, une API REST, un système de plugins et des outils CLI ;
• Fonctionne avec n’importe quel assistant IA compatible MCP (Claude dans VS Code, Claude dans Cursor, Claude Desktop, etc.) ;
• Prend en charge le partage du contexte de conception avec les modèles d’IA et leur permet de voir et de comprendre les composants ;
• Facilite la communication avec Penpot en utilisant le langage naturel.

Que pourraient alors nous permettre les serveurs MCP dans Penpot, et qu’ont déjà réalisé les expériences existantes ? Jetons un coup d’oeil.

Cas d’utilisation du serveur Penpot MCP

Si vous souhaitez simplement passer à ce que les serveurs Penpot MCP peuvent faire, Penpot en propose quelques-uns. Démonstrations MCP cachés dans un Google Drive qui valent largement la peine d’être regardés. Le PDG de Penpot, Pablo Ruiz-Múzquiz, a mentionné que les vidéos 03, 04, 06, 08 et 12 sont leurs préférées.

Un moyen encore plus rapide de résumer les serveurs MCP consiste à regardez le dévoilement du Penpot Fest 2025.

Sinon, jetons un coup d’œil à quelques-uns des exemples les plus raffinés démontrés par Penpot dans leur vitrine publique.

Design-to-Code et vice-versa (et plus encore)

Dans la continuité de ce que je disais plus tôt sur la façon dont les conceptions Penpot sont exprimées sous forme de code, cela signifie que les serveurs MCP peuvent être utilisés pour convertir la conception en code à l’aide de l’IA, mais aussi du code en conception, de la conception en documentation, de la documentation pour concevoir des éléments du système, de la conception en code à nouveau. basé sur ledit système de conception, puis des composants entièrement nouveaux basés sur ledit système de conception.

Cela semble surréaliste, mais la démo ci-dessous le montre transmutabilitéet il ne s’agit pas d’instructions vagues mais plutôt de choix de conception antérieurs, quelle que soit la manière dont ils ont été exprimés (conception, code ou documentation). Il n’y a pas de surprises : ce sont simplement les décisions que vous auriez prises de toute façon sur la base de décisions précédentes, exécutées rapidement.

Dans la démo, Juan de la Cruz García, concepteur chez Penpot, transmue sans friction certains composants simples en documentation, en éléments de système de conception, en code, en nouveaux composants et même en un projet de livre d’histoires complet comme un morceau de Play-Doh :

Conception vers code, validation de conception/code et opérations simples

Dans une démo similaire ci-dessous, Dominik Jain, co-fondateur d’Oraios AI, crée une application Web Node.js basée sur la conception avant de mettre à jour les styles du frontend, enregistre les noms et les identifiants en mémoire pour garantir une traduction fluide de la conception en code avant de vérifier sa cohérence, ajoute un commentaire à côté de la forme sélectionnée dans Penpot, puis remplace un gribouillage dans Penpot par un composant adapté. Il se passe beaucoup de choses ici, mais vous pouvez voir exactement ce que Dominik tape dans Claude Desktop ainsi que les réponses de Claude, et c’est très robuste:

Au fait, la démo précédente utilisait Claude dans VS Code, je dois donc noter que Les serveurs Penpot MCP sont indépendants de LLM. Votre pile technologique dépend entièrement de vous. IvanTheGeek a réussi à configurer leur serveur MCP avec l’IDE JetBrains Rider et Junie AI.

Plus de cas d’utilisation

Traduisez un tableau Penpot en HTML sémantique et CSS modulaire prêts pour la production tout en exploitant tous les jetons de conception Penpot (rappelez-vous que les conceptions Penpot sont déjà exprimées sous forme de code, il ne s’agit donc pas d’un tir dans le noir) :

Générez un prototype Web interactif sans modifier le code HTML existant :

Comme indiqué précédemment, convertissez un gribouillage en composant, en tirant parti des éléments de conception et/ou du système de conception existants :

Créez la documentation du système de conception à partir d’un fichier Penpot :

Et voici quelques autres cas d’utilisation de Penpot et de la communauté :

• Exportations avancées,
• Rechercher des éléments de conception en langage naturel,
• Extraire des données d’API externes en utilisant le langage naturel,
• Connectez facilement Penpot à d’autres outils externes,
• Sauvegarder en mémoire les tâches répétitives et les exécuter,
• Tests de régression visuelle,
• Vérification de la cohérence et de la redondance de la conception,
• Analyse et feedback d’accessibilité et d’utilisabilité,
• Vérification de la conformité du système de conception,
• Vérification du respect des référentiels (marque, contenu…),
• Surveillez l’adoption et l’utilisation grâce à l’analyse de la conception,
• Synchronisez automatiquement la documentation avec la conception,
• Concevoir l’organisation des fichiers (par exemple, marquage/catégorisation).

Essentiellement, les serveurs Penpot MCP ouvrent la voie à un nombre infini de flux de travail grâce à l’efficacité et à la simplicité du client LLM/LLM de votre choix, mais sans y exposer vos données.

À quoi serviriez-vous les serveurs MCP ?

Les serveurs Penpot MCP ne sont même pas au stade bêta, mais c’est un expérience active dont vous pouvez faire partie. Les utilisateurs de Penpot ont déjà commencé à explorer les cas d’utilisation des serveurs MCP, mais Penpot souhaite en voir davantage. Pour garantir que la prochaine génération d’outils de conception répond aux besoins des concepteurs, des développeurs et des équipes produit en général, ils doivent être construits collectivement et en collaborationsurtout en ce qui concerne l’IA.

Note: Penpot recherche des bêta-testeurs désireux d’explorer, d’expérimenter et d’aider à affiner le serveur MCP de Penpot. Pour adhérer, écrivez à support@penpot.app avec la ligne d’objet « Bénévole du test bêta MCP ».

Selon vous, y a-t-il quelque chose que les serveurs Penpot MCP pourraient faire et que les outils actuels ne sont pas capables de faire assez bien, assez rapidement, ou ne sont pas capables de faire du tout ?

Vous pouvez apprendre comment configurer un serveur Penpot MCP ici et commencez à bricoler aujourd’hui, ou si votre cerveau regorge déjà d’idées, Penpot veut que vous le fassiez rejoignez la discussionpartagez vos commentaires et parlez de vos cas d’utilisation. Alternativement, la section des commentaires juste en dessous n’est pas non plus un mauvais point de départ !

(gg, ouais)