# Self-Hosted, Open-Source Design System

**URL:** <https://community.penpot.app/t/self-hosted-open-source-design-system/10168>\
**Category:** Contribution\
**Tags:** design\
**Created:** [December 16, 2025, 6:02pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168 "2025-12-16T18:02:35Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sulcalibur](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/sulcalibur/32/3205_2.png) [@Sulcalibur](https://community.penpot.app/u/Sulcalibur)\
**Post date:** [December 16, 2025, 6:02pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/1 "2025-12-16T18:02:35Z")

</div>

## 🛠 Building a Self-Hosted, Open-Source Design System for Penpot

I’m embarking on an ambitious project: creating a **self-hosted Design System** solution, conceptually similar to ZeroHeight, but with a firm focus on the open-source ecosystem, particularly **Penpot** along with Figma (meh).

My core objective is to create a seamless, non-technical experience for designers to contribute to and use the system, along with documentation and alignment with Storybook. Showcasing the component and pattern designs along with rules and tokens.

### The Integration Challenge

I’m currently trying to figure out the **most straightforward integration path with Penpot**. This is where I’ve hit a conceptual roadblock regarding the API access:

- The existing **API token** mechanism doesn’t appear to map to a standard **REST API** endpoint for content retrieval.

- Integrating via the **MCP** seems like a deep, specialised path that would likely be beyond the technical comfort zone of the average product designer.

### Seeking Guidance

I’m seeking advice or pointers on how to best approach the synchronization or content extraction from Penpot into a documentation tool.

- **Has anyone successfully built a public-facing utility on top of Penpot’s data?**

- **Are there more user-friendly/designer-friendly ways to leverage the existing Penpot API or the MCP for automated documentation?**

Any insights into the ideal method for creating this solution would be genuinely superb.

More details will follow as I make progress!

---

<div class="post-metadata">

**Author:** ![Sulcalibur](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/sulcalibur/32/3205_2.png) [@Sulcalibur](https://community.penpot.app/u/Sulcalibur)\
**Post date:** [December 16, 2025, 9:35pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/2 "2025-12-16T21:35:04Z")

</div>

Looking into this further and similar to how ZeroHeight handles Sketch app, I can create a plugin for Penpot that assists with the syncing process.

---

<div class="post-metadata">

**Author:** ![diacritica](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/diacritica/32/5604_2.png) [@diacritica](https://community.penpot.app/u/diacritica)\
**Post date:** [December 16, 2025, 9:43pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/3 "2025-12-16T21:43:48Z")

</div>

A plugin could always work. I would recommend against using the REST API (or backend API). The MCP server is also an option and we’re working on making an MCP server available for the general public under design.penpot.app. It’s becoming more and more simple to deploy your own MCP server but it’s true that it requires a bit of tech work.

@juan.delacruz I think we can perhaps do a simple screen recording on how to set-up the Penpot MCP server for oneself. This can help people like @Sulcalibur while we are still WIP with the SaaS version of the MCP Server.

@Sulcalibur I think the MCP Server might be the best approach for your goal. Our internal tests show incredible results with code to design, design to design and design to code workflows (including syncing).

---

<div class="post-metadata">

**Author:** ![Sulcalibur](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/sulcalibur/32/3205_2.png) [@Sulcalibur](https://community.penpot.app/u/Sulcalibur)\
**Post date:** [December 16, 2025, 9:49pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/4 "2025-12-16T21:49:37Z")

</div>

I think the MCP is best, I just know many many designers that would be scared off so I was looking at a simpler solution that they could easily dive into.

I’ll try the plugin and see of that syncs the right information across, if not MCP it will have to be, at least for the early stages.

Appreciate your comments and feedback buddy @diacritica

---

<div class="post-metadata">

**Author:** ![carolina.portugal](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/carolina.portugal/32/36_2.png) [@carolina.portugal](https://community.penpot.app/u/carolina.portugal)\
**Post date:** [December 17, 2025, 9:22am UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/5 "2025-12-17T09:22:12Z")

</div>

> [@Sulcalibur](#):
>
> **API token**

The **API token** it’s coming soon!

---

<div class="post-metadata">

**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\
**Post date:** [December 17, 2025, 11:21am UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/6 "2025-12-17T11:21:52Z")

</div>

This sounds so cool. It reminds me of this talk from Converge a couple of months ago. Watching it in the room, I instantly thought “it would be so cool to have this design system documentation integration inside of Penpot!”

> **[Converge 2025: Unlocking zeroheight within Figma: Supercharge your workflow...](https://webinars.zeroheight.com/videos/47df7f79-a5ed-473a-9e32-f26302ebcd8a)**

---

<div class="post-metadata">

**Author:** ![Sulcalibur](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/sulcalibur/32/3205_2.png) [@Sulcalibur](https://community.penpot.app/u/Sulcalibur)\
**Post date:** [December 17, 2025, 2:10pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/7 "2025-12-17T14:10:04Z")

</div>

Thanks @LauraKalbag This is great!

I was at the Converge at Brighton last year and it was very inspirational. 🙂

---

<div class="post-metadata">

**Author:** ![juan.delacruz](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/juan.delacruz/32/12_2.png) [@juan.delacruz](https://community.penpot.app/u/juan.delacruz)\
**Post date:** [December 17, 2025, 7:53pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/8 "2025-12-17T19:53:52Z")

</div>

Hi @Sulcalibur 🙂

I definitely recommend trying out the Penpot MCP locally. It’s a game changer.  
I’ve been doing a lot of testing over the last few days and, while it’s not in its most optimized version yet, the amount of things you can do with it in Penpot is incredible. It’s not just ‘design to code,’ but ‘design to design’ as well.

Here is a quick local installation guide and a video where you can see more of what the MCP can do. I hope you find it helpful!!!

1. **Clone the repo:** [https://github.com/penpot/penpot-mcp](https://github.com/penpot/penpot-mcp)

2. **Install the server** from the cloned “penpot-mcp” folder (`npm-install` + `npm-run-bootstrap`).

3. **Install the plugin in Penpot** with the server running—Firefox is recommended ([http://localhost:4400/manifest.json](https://www.google.com/search?q=http://localhost:4400/manifest.json)).

4. **Install your favorite IDE** (like VSCode, Cursor, …)

5. **In your IDE** , navigate to: `Preferences` → `IDE Settings` → `Tools & MCP`. (or similar)

6. **Install the Penpot custom server** in your IDE using the following configuration:

JSON

```auto
{
  "mcpServers": {
    "penpot-mcp": {
      "url": "http://localhost:4401/mcp",
      "type": "http"
    }
  },
  "inputs": []
}

```

1. **Verify** that your IDE has enabled the `penpot-mcp` server and recognized the 5 tools (check under “Tools & MCP” in your IDE).

2. **Test the connection:** Ask the IDE agent to tell you the name of the selected board in Penpot using the MCP (for example).

* * *

**Recap:**

1. **MCP Server** running in your local terminal (`npm-run-bootstrap`).

2. **Plugin** running in Penpot and connected to the server (Firefox recommended).

3. **MCP Server enabled** in your chosen IDE.

**Check this video:**

[![](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/765672451f8accfaa4d1dabedfc60643e8115450.jpeg "Quick demo: Penpot MCP server in action") ](https://www.youtube.com/watch?v=CfvcgMQEmLk)

---

<div class="post-metadata">

**Author:** ![Sulcalibur](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/sulcalibur/32/3205_2.png) [@Sulcalibur](https://community.penpot.app/u/Sulcalibur)\
**Post date:** [December 17, 2025, 10:29pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/9 "2025-12-17T22:29:22Z")

</div>

Hi @juan.delacruz - Thanks for that detailed breakdown. I have used the MCP and it is superb, I agree. I just feel that a tool such as a Design System documentation the MCP will be ‘too much’ for many designers, especially in a work team environment.

I have it in the back of my mind as a additional solution, but the more simple for the average user, the better from my experience. Most people don’t want to have to learn something new. Not us though, we clearly love it but for the general UX designer at work. That’s a different story.

---

<div class="post-metadata">

**Author:** ![brunobezerra](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/brunobezerra/32/7472_2.png) [@brunobezerra](https://community.penpot.app/u/brunobezerra)\
**Post date:** [December 20, 2025, 6:42pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/10 "2025-12-20T18:42:51Z")

</div>

Hi @juan.delacruz is this error message supposed to appear? I’m using Google Antigravity

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/f/f8a833f372ba33b57eabb4764ad1e7c4fda4f832.png)

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/e/e186ee0a47d10780a690b7b0bd80ea5def2e59f8.png)

---

<div class="post-metadata">

**Author:** ![brunobezerra](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/brunobezerra/32/7472_2.png) [@brunobezerra](https://community.penpot.app/u/brunobezerra)\
**Post date:** [December 20, 2025, 7:43pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/11 "2025-12-20T19:43:20Z")

</div>

> [@juan.delacruz](#):
>
> ```auto
> {
> "mcpServers": {
> "penpot-mcp": {
> "url": "http://localhost:4401/mcp",
> "type": "http"
> }
> },
> "inputs": []
> }
> 
> ```

Guess the “url” was wrong? Changed to “serverURL” and it worked.

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/768c26597fbd509bb09e88d9e67508be798fa71f.png)

---

<div class="post-metadata">

**Author:** ![Sulcalibur](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/sulcalibur/32/3205_2.png) [@Sulcalibur](https://community.penpot.app/u/Sulcalibur)\
**Post date:** [January 5, 2026, 10:29am UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/12 "2026-01-05T10:29:34Z")

</div>

**Still working through this**. First time making something open source that others will be able to download and self host has brought up many new challenges. Ooooft!

One thing the tokens in Penpot are proving to be a lifesaver ❤

More updates later 🙂

---

<div class="post-metadata">

**Author:** ![Sulcalibur](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/sulcalibur/32/3205_2.png) [@Sulcalibur](https://community.penpot.app/u/Sulcalibur)\
**Post date:** [June 23, 2026, 5:22pm UTC](https://community.penpot.app/t/self-hosted-open-source-design-system/10168/13 "2026-06-23T17:22:35Z")

</div>

Hello, it’s me, the ghost of projects past 👻 bringing back something from the dead.

Still working on this when I can as a side-side-side project as it whines about how I don’t give it enough attention.

Thought I’d through a wee lil screenshot of how it’s going. Still broken in so many places and still working out some dents but yeah, getting there(ish).

 ![opends-button-example](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/c/c81cb0a23ae2069a3ff9f46f77a5e4e98f4bf005.png)