Penpot is experimenting with MCP servers for AI-powered design workflows – Smashing Magazine

Imagine that your Penpot file contains a complete set of icons in addition to the design itself, which uses some of those icons, but not all. If you asked an AI like Claude or Gemini to export only the icons that are being used, it wouldn’t be able to do it. It cannot interact with Penpot files.

However, a Penpot MCP Server can. You can perform a carefully selected number of operations under set rules and permissions, especially since Penpot has an extensive API and even more so because it is open source.

The AI’s job is simply to understand your intent, choose the correct operation the MCP server will perform (an export in this case), and pass along any parameters (i.e. icons being used). The MCP server then translates this into a structured API request and executes it.

It might be helpful to think of the AI ​​as a server at a restaurant taking your order, the MCP server as the menu and chef, and the API request as (hopefully) a hot pizza on a hot plate.

Why exactly MCP servers? Well, Penpot cannot understand your intention because it is not an LLM, nor does it allow third-party LLM to interact with your Penpot files for the security and privacy of your Penpot data. Although Penpot MCP servers act as safe bridgetranslating AI intent into API requests using your files and Penpot data as context.

What’s even better is that because Penpot takes a design approach expressed as codeDesigns can be created, edited and analyzed programmatically at a granular level. It is more contextual, more particular, and therefore more powerful compared to what other MCP servers offer, and far more thoughtful than the subpar ‘Describe → Generate’ AI workflow that I don’t think anyone really wants. Penpot AI Whitepaper describes this as the wrong approach and the ‘Convert to Code’ approach as the ugly approach, while MCP servers are more refined and adaptable.

Features and technical details

Before moving on to the use cases, here are some features and technical details that explain in more detail how Penpot MCP servers work:

• Meets MCP standards;
• Integrates with Penpot API for real-time design data;
• Includes a Python SDK, REST API, plugin system, and CLI tools;
• Works with any MCP-enabled AI assistant (Claude in VS Code, Claude in Cursor, Claude Desktop, etc.);
• Supports sharing design context with AI models and allowing them to see and understand components;
• Facilitate communication with Penpot using natural language.

So what could MCP servers in Penpot allow us to do, and what have existing experiments already achieved? Let’s take a look.

Penpot MCP Server Use Cases

If you just want to move on to what Penpot MCP servers can do, Penpot has some MCP demos hidden in Google Drive that are worth seeing. The general director of Penpot, Pablo Ruiz-Múzquiz, mentioned that videos 03, 04, 06, 08 and 12 are his favorites.

An even quicker way to summarize MCP servers is watch the opening of Penpot Fest 2025.

Otherwise, let’s take a look at some of the more refined examples that Penpot demonstrated in his public showcase.

Design to code and vice versa (and more)

Continuing with what I said before about how Penpot designs are expressed as code, this means that MCP servers can be used to convert design to code using AI, but also code to design, design to documentation, documentation to design system elements, design to code again. based on said design system, and then completely new components based on said design system.

It sounds surreal, but the following demo shows this. transmutabilityand it is not due to vague instructions but to previous design choices, regardless of how they were expressed (design, code or documentation). No surprises: these are simply decisions you would have made anyway based on previous decisions, executed quickly.

In the demo, Penpot designer Juan de la Cruz García seamlessly transmutes some simple components into documentation, design system elements, code, new components, and even an entire Storybook project as a piece of Play-Doh:

Design to code, design/code validation and simple operations

In a similar demo below, Dominik Jain, co-founder of Oraios AI, creates a Node.js web application based on the layout before updating interface styles, saving names and identifiers in memory to ensure smooth translation from layout to code before checking for consistency, adding a comment next to the selected shape in Penpot, and then replacing a scribble in Penpot with an adapted component. There’s a lot going on here, but you can see exactly what Dominik is typing in Claude Desktop, as well as Claude’s responses, and it’s very robust:

By the way, the demo above used Claude in VS Code, so I should note that Penpot MCP servers are independent of LLM. Your technology stack depends entirely on you. IvanTheGeek managed configure your MCP server with JetBrains Rider IDE and Junie AI.

More use cases

Translate a Penpot dashboard to production-ready semantic HTML and modular CSS while leveraging any Penpot layout tokens (remember that Penpot layouts are already expressed as code, so this is not a blind chance):

Generate an interactive web prototype without changing the existing HTML:

As shown above, convert a doodle into a component, leveraging existing design and/or design system elements:

Create design system documentation from a Penpot file:

And here are some more use cases from Penpot and the community:

• Advanced exports,
• Search for design elements using natural language,
• Extract data from external APIs using natural language,
• Easily connect Penpot to other external tools,
• Save repetitive tasks in memory and execute them,
• Visual regression testing,
• Design consistency and redundancy check.
• Analysis and comments on accessibility and usability.
• Checking compliance with the design system,
• Checking compliance with guidelines (brand, content, etc.),
• Monitor adoption and usage with design analytics,
• Automatically keep documentation in sync with design,
• Design file organization (e.g., labeling/categorization).

Basically, Penpot MCP servers pave the way to a infinite number of workflows thanks to the efficiency and ease of the chosen LLM/LLM client, but without exposing your data to it.

What would you use MCP servers for?

The Penpot MCP servers are not even in the beta stage, but it is a active experiment that you can be part of. Penpot users have already started exploring use cases for MCP servers, but Penpot wants to see more. To ensure that the next generation of design tools meets the needs of designers, developers, and product teams in general, they must be created collectively and collaborativelyespecially when it comes to AI.

Note: Penpot is looking for beta testers eager to explore, experiment and help refine Penpot’s MCP server. To join, write to support@penpot.app with the subject line “MCP Beta Test Volunteer.”

Is there anything you think Penpot MCP servers could do that current tools can’t do well enough, fast enough, or at all?

you can learn how to set up a Penpot MCP server right here and start playing today, or if your brain is already full of ideas, Penpot wants you to do it. join the discussionShare your feedback and talk about your use cases. Alternatively, the comments section just below isn’t a bad place to start either.

(gg, yk)