Penpot MCP Server showcase + ask for help

[diacritica]

Only three weeks ago, during Penpot Fest 2025, we unveiled the official MCP Server for Penpot (Github repo and 6-min presentation). Unlike other community efforts (kudos to them!), we decided to expose the Plugins API as a privileged way to interact with a Penpot design.

Today we want to share some promising uses cases and comment on what’s coming next, but also ask the tinkerers out there to stress test these uses cases or come up with new ones.

We already knew, thanks to your beta testing and feedback, that our Plugins API delivered a wonderful developer experience. This polished “open by default” approach makes it relatively easy for an LLM to write arbitrary javascript code that, in turn, makes use of the plugins API.

Also, since our visual data model relies heavily on a “design as code” mindset (declarative and semantic via CSS and design tokens), a back and forth design/code workflow is almost friction-less.

Before you watch these two videos, please note that they are, in fact, internal tech demo material, so they were meant to be consumed by the Penpot team, which already enjoys a lot of context (plus they cannot say no to watching them ) If you need some clarification, feel free to ask!

Our MCP server is LLM agnostic, in these videos VSCode/Claude Sonnet 4.5 and goose/GPT5 are used.

Designer-centric workflow (Juan’s recording, edited by Almudena)

This is a relatively short video showcasing a designer going through these tasks:

1. Quick tutorial on how to setup your own Penpot MCP server.
2. Given a relatively final yet unstructured UI design, distill design system data into code documentation.
3. Using that code documentation, synchronise back colours and typographies into Penpot styles.
4. We convert a Penpot design into semantic and modular HTML and CSS that follows the design system documentation.
5. We build a completely new design (login screen) based on our existing design system.
6. We apply an advanced colour palette change to the Penpot design.
7. We build a complete Storybook project for our design system components.
8. We comment on why this actually works so nicely.

Since the Plugins API is still waiting for Penpot Variants support (already being tested) and Design Tokens support (being actively developed), this internal video doesn’t demo them but I don’t think you will have a tough time extrapolating where needed.

Quick demo: Penpot MCP server in action - Penpot Peertube

Developer-centric workflow (Dominik’s recording and editing)

This is a longer video (no audio) discussing the following use cases (there’s some overlap):

• Creating a node.js web application from the design.
• Updating styles in the frontend project from the design.
• Ensuring a well-defined design-to-code translation (by creating a memory and using names/identifiers from the design in the code).
• Analysing the shape naming scheme on a page and checking it for consistency
• Adding a comment to a design file in Penpot.
• Replacing a scribble in Penpot with a corresponding component and adapting it to fit the scribble (my personal favourite).

Please note that the whole point of this video is to follow Dominik’s conversation with the LLM so I highly recommend that you watch it full screen and pause it when needed.

Penpot MCP Server: Developer Workflow. Applications - Penpot Peertube

What’s next? In terms of the MCP Server, we know what we need to build as a foundational piece but we want to know which uses cases excite you the most, because there’s a point where the MCP server goes from “generic” to “use-case driven development” and we feel we’re almost there now.

We hope you enjoy this material and the fact that we continue to build in the open ensuring that you remain in full control.

[dfelinto]

Very nice.

The scribble to component is what I see myself using it if it would work well enough (and fast-ish enough). More realistically I dream of taking a screenshot of parts of my project and replace it with pre-built components of my design system.

This would help to speed up tweaking and designing of new features integrated with existing ones. At the moment I do a collage of screenshots + components, which although also works, it does require cropping, moving, overlaying, cheating, …

Thanks for sharing the progress!

[IvanTheGeek]

I was able to get the official Penpot MCP server running locally and connected up to JetBrains Rider IDE with the Junie AI. I had issues with Junie reporting a repeated timeout when using the http://localhost:4401/mcp however dropping to http://localhost:4401/sse allowed Junie to use it and not time out.

In Rider (which I will assume the other IDEs using Junie will be similar)

Open Settings and find the Junie > MCP Settings

Edit the servers file:

{
  "mcpServers": {
    "penpot": {
      "type": "http",
      "url": "http://localhost:4401/sse"
    }
  }
}

[IvanTheGeek]

In case it helps anyone else, I had Junie create some docs for the official Penpot MCP server by actually using it. You may find them here:

penpot-mcp_API_documentation/docs/penpot-api at master ·...

bit rough, but might be helpful to someone. Note there is also the full docs at:

Penpot plugins API

[juan.delacruz]

Hi all!

I wanted to add four additional use-cases (via the videos below) which I believe are worth sharing with the community, as they open up new interesting possibilities:

Use case: Design to code.

Penpot MCP Server | Design to code

Use case: Prototype interactions.

Penpot MCP Server | Prototype

Use case: Scribble to design.

Penpot MCP Server | Scribble to Design

Use case: Design System documentation + Design tokens.

Penpot MCP Server | Tokens JSON

Why I think these are interesting:

• They expand the “design ↔ code” workflow beyond simple export: we’re seeing automation, system governance and cross-team collaboration facilitated by the MCP Server.

• In my experience working with design systems, one of the biggest friction points is keeping design changes, code, style guides and component libraries in sync. The MCP server may help reduce that friction.

• They highlight avenues that the community (plugins, integrations, dev environments) could pursue. For example: automated checks on design-system compliance, automated versioning of design styles, developers and designers working off the same metadata.

Looking forward to seeing how the MCP Server evolves and how we can all build on it

[daniviva]

Hi, Penpot community,

I fail to install the MCP in the Plugin Manager. it returns the following:

Can someone help resolving this issue pls? Thanks!

Best,

Dani

[juan.delacruz]

Hi @daniviva

The error, “The plugin doesn’t exist or the URL is not correct,” means your Penpot instance cannot connect to the local server to fetch the required manifest.json.

Please try this:

1. Run the Server: You must ensure the penpot-mcp server is actively running in your terminal (npm run boostrap).

2. Verify Port: Confirm that the server output shows it is listening on http://localhost:4400.

The installation will work instantly once the server is actively running

[IvanTheGeek]

Looks like we are working towards some similar goals of a source of truth and sync and using the ai, mcp, and code gen.

[Paula]

We’ve brought together all the workflow videos the team has worked on into a single playlist. Enjoy!

[Andy_B]

I think I am missing some parts for standing up this mcp server.

• Is the server supposed to run with a on-prem version of PenPot?
• If so, what are the steps to get it running? The video shows a plugin installation that I can’t seem to find where it came from. The git page for this shows steps that don’t mention the plugin.
• There are also comments about using docker, what are the steps for getting this method running?

Please take the perspective of designers that don’t know technical steps like this and start at a very basic understanding. This would really help me.

Error mitigation would also help for most commonly seen errors.

[juan.delacruz]

Hi! @Andy_B

The current setup can be confusing at some point. I’ll keep this practical and high-level.

Short answer first

• You do not need an on-prem Penpot installation. This works with design.penpot.app.

• The “plugin” you saw in the video is not something you install from a marketplace. It’s a local dev plugin that lives inside this same repo and is served from your machine.

• The repo includes both the MCP server and the Penpot plugin. That’s why the plugin isn’t mentioned as a separate download.

What actually needs to be running

There are three moving parts, all local:

1. MCP server – this is what the LLM connects to.

2. Plugin server – this serves the Penpot MCP plugin UI.

3. The plugin inside Penpot – loaded via a local URL while you have a Penpot file open.

You start (1) and (2) together with a single command from the repo. After that, you manually load the plugin in Penpot using the provided local URL and click “Connect”.

About Docker

Docker is optional. It’s mentioned for people who already use it or want a more isolated setup. If you’re a designer, ignore Docker for now. The Node-based setup is the intended starting point.

Common “gotchas” (very common)

• Nothing connects: your browser may be blocking local network access. Chrome usually asks; Brave often blocks it silently. Firefox is the least problematic.

• Plugin says “Not connected”: the plugin UI must stay open, and the server must still be running in your terminal.

• LLM can’t see Penpot: the MCP server might be running, but the plugin is not connected. Both are required.

Think of the plugin as a bridge inside Penpot. If the bridge isn’t loaded and connected, the MCP server has nothing to act on, even if it’s running perfectly.

This is still early-stage tooling (we are working on it), so some friction is real. Your feedback here is valid and useful especially around making this more approachable for designers.