Penpot MCP Server showcase + ask for help

Events and Announcements
, , , ,
1

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 :stuck_out_tongue:) 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.

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 :star_struck: so I highly recommend that you watch it full screen :laptop: and pause it when needed.

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.

10 Likes
2

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!

4 Likes
3

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"
    }
  }
}
1 Like
4

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:

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

1 Like