Unfolding the official Penpot MCP - CourtneyR.dev's 2nd Brain

Unfolding the official Penpot MCP 🔗 **Source:** [Unfolding the official Penpot MCP](https://www.youtube.com/watch?v=KNsvFc4Elfs) > [!note]+ Document Notes > tags: [Penpot, MCP, Design-AI] > author: [MISSING] > source: [YouTube] > reference: [https://www.youtube.com/watch?v=KNsvFc4Elfs] > date created: > > # 🏷️ Title: Unfolding the official Penpot MCP > > 🧰 **Action Inbox** > - [H5] Pilot MCP ↔️ Penpot demo with a small file — https://github.com/montevive/penpot-mcp #articleseed > - [H6] Write a JS snippet to export styles via Penpot Plugin API — https://help.penpot.app/contribute/plugins/ #xref > - [H2] Diagram Penpot’s entity/relationship model for onboarding slides — https://help.penpot.app/learn/data/data-guides/entity-relationships/ #articleseed > - [H7] Prototype “design-to-design” automation workflow — https://help.penpot.app/contribute/plugins/ #articleseed > - [H5] Evaluate MCP support in GoDaddy tooling and guardrails — https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/use-the-github-mcp-server #xref > - [H4] Draft OSPO memo on semantic document graphs for AI — https://help.penpot.app/learn/data/data-guides/ #articleseed > - [H5] Share MCP context explainer with The WPOCC fellows — https://www.theverge.com/2024/11/25/24305774/anthropic-model-context-protocol-data-sources #share > - [H6] Build a reproducible “login form from design” workshop — https://github.com/montevive/penpot-mcp #articleseed > - [H3] Map component-instance sync risks in large files — https://help.penpot.app/learn/data/data-guides/component-synchronization/ #xref > - [H5] FAIR.pm note: permissioning, audit, and MCP server boundaries — https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/use-the-github-mcp-server #addendum >  ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - YouTube video (tool access may be throttled; link should load in browser). - Penpot Plugin API docs. [oai_citation:0‡Penpot](https://penpot.app/integrations-api) - Penpot Data Guide and entity relationships. [oai_citation:1‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) - Montevive `penpot-mcp` GitHub repository and demo. [oai_citation:2‡GitHub](https://github.com/montevive/penpot-mcp) - GitHub Docs: Using an MCP server with Copilot. [oai_citation:3‡GitHub Docs](https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/use-the-github-mcp-server?utm_source=chatgpt.com) - The Verge: Anthropic introduces MCP overview. [oai_citation:4‡The Verge](https://www.theverge.com/2024/11/25/24305774/anthropic-model-context-protocol-data-sources?utm_source=chatgpt.com) ## 📝 Summary - Penpot positions design as structured graphs, not only pixels. This supports AI tasks. [oai_citation:5‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) - A Penpot MCP server lets LLM clients inspect designs through MCP. It shows design-to-code workflows. [oai_citation:6‡GitHub](https://github.com/montevive/penpot-mcp) - MCP standardizes tool access for AI systems across apps. This reduces bespoke integrations. [oai_citation:7‡The Verge](https://www.theverge.com/2024/11/25/24305774/anthropic-model-context-protocol-data-sources?utm_source=chatgpt.com) - The Plugin API enables JavaScript execution inside Penpot. This extracts structure and styles. [oai_citation:8‡Penpot](https://penpot.app/integrations-api) - Bottom line: Agencies can wire designs to code reliably using MCP and Penpot’s graph. [oai_citation:9‡GitHub](https://github.com/montevive/penpot-mcp) ## 📖 Main Content - Penpot’s model uses entities and relationships across files, pages, frames, and components. Graph thinking fits AI. [oai_citation:10‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) - Components and instances synchronize properties through defined links. Teams need predictable overrides. [oai_citation:11‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) - MCP allows an LLM client to connect to external “servers” that expose tools and resources. [oai_citation:12‡GitHub Docs](https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/use-the-github-mcp-server?utm_source=chatgpt.com) - The `penpot-mcp` server demos querying a design and exporting styles to build a login UI. [oai_citation:13‡GitHub](https://github.com/montevive/penpot-mcp) - Plugin API scripts run in the Penpot web app. They can enumerate nodes, read styles, and perform edits. [oai_citation:14‡Penpot](https://penpot.app/integrations-api) - Industry coverage frames MCP as a common protocol for AI-tool context. This improves maintainability. [oai_citation:15‡The Verge](https://www.theverge.com/2024/11/25/24305774/anthropic-model-context-protocol-data-sources?utm_source=chatgpt.com) - Uncertainties: “official” status of third-party servers, long-term API stability, and permissioning norms. [oai_citation:16‡GitHub](https://github.com/montevive/penpot-mcp) ### 🗒️ Notes #### ⏱️ [00:13](https://www.youtube.com/watch?v=KNsvFc4Elfs&t=13) Framing design for AI ### [H1] Penpot frames design as graphs for AI > “pimpot takes a very complex representation … and it funnels it into pixels” - Pixels show output. Graphs encode structure and meaning. [oai_citation:17‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) - AI benefits from structure, not only raster surfaces. [oai_citation:18‡The Verge](https://www.theverge.com/2024/11/25/24305774/anthropic-model-context-protocol-data-sources?utm_source=chatgpt.com) #### ⏱️ [02:42](https://www.youtube.com/watch?v=KNsvFc4Elfs&t=162) Modeling paradigm ### [H2] Graph model represents entities and relations > “Disks are entities. Arrows are relationships.” - Penpot documentation mirrors this entity/relationship framing. [oai_citation:19‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) #### ⏱️ [03:41](https://www.youtube.com/watch?v=KNsvFc4Elfs&t=221) Components and instances ### [H3] Components and instances link across frames > “the frames that contain them are both pointing to the same component object” - Synchronization and overrides need careful planning. [oai_citation:20‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) #### ⏱️ [04:38](https://www.youtube.com/watch?v=KNsvFc4Elfs&t=278) Semantic operations ### [H4] Enriched graph enables semantic AI operations > “so they can operate on the document at a semantic level” - Graph views can guide traditional and ML pipelines. [oai_citation:21‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) #### ⏱️ [05:34](https://www.youtube.com/watch?v=KNsvFc4Elfs&t=334) MCP server intro ### [H5] MCP server connects LLMs to Penpot > “We present the penpot mcp server using the model context protocol MCP.” - MCP standardizes tool access for AI clients. [oai_citation:22‡GitHub Docs](https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/use-the-github-mcp-server?utm_source=chatgpt.com) #### ⏱️ [06:35](https://www.youtube.com/watch?v=KNsvFc4Elfs&t=395) In-app scripting ### [H6] Server executes JS in Penpot to extract styles > “the execution of JavaScript code directly in the Penpot web app” - Plugin API enables reading styles and structure. [oai_citation:23‡Penpot](https://penpot.app/integrations-api) #### ⏱️ [07:39](https://www.youtube.com/watch?v=KNsvFc4Elfs&t=459) Design-to-design ### [H7] Plugin API enables design-to-design automation > “the same penmpot API plugins have access to … allows you to actually do design to design” - Automation can transform, not only export, designs. [oai_citation:24‡Penpot](https://penpot.app/integrations-api) ## 📚 References - Penpot Plugin API — official docs. [oai_citation:25‡Penpot](https://penpot.app/integrations-api) - Penpot Data Guide: entities, relationships, synchronization. [oai_citation:26‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) - `montevive/penpot-mcp` — MCP server and demo video. [oai_citation:27‡GitHub](https://github.com/montevive/penpot-mcp) - GitHub Docs: Using MCP servers with Copilot. [oai_citation:28‡GitHub Docs](https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/use-the-github-mcp-server?utm_source=chatgpt.com) - Verge explainer on Anthropic’s MCP. [oai_citation:29‡The Verge](https://www.theverge.com/2024/11/25/24305774/anthropic-model-context-protocol-data-sources?utm_source=chatgpt.com) ## 🗣️ Paraphrase - The talk redefines design artifacts as graphs that AI can reason over. It then shows an MCP server that lets LLMs pull structure and styles from Penpot. - The demo uses Plugin API scripts to read a design and emit code. The approach promises “design-to-design” automation, not just export pipelines. ## 📰 Newsletter - Penpot’s new MCP path lets AI read real design structure, not only pixels. Agencies can script style exports and even transform designs. Start with the `penpot-mcp` demo, then harden permissions and audits before production. See Penpot’s Plugin API and MCP overviews for deeper dives. [oai_citation:30‡GitHub](https://github.com/montevive/penpot-mcp) ## ✅ Action Items #### DevRel - Publish a “Design → Login Form” walkthrough using `penpot-mcp`. - Record a five-minute demo with code links and diffs. - Add examples to a public repo with CI checks. - Collect partner feedback via an issue template. #### OSPO - Draft an MCP server review checklist and data-flow diagram. - Define permission scopes, logging, and rotation policies. - Add MCP to third-party tool registry with owners and SLAs. #### Community - Run a Penpot+MCP office hour for contributors. - Collect patterns for component/instance hygiene at scale. #### WordPress - Playground lab: Penpot styles → block theme CSS. - Core AI: evaluation set for design-to-code transformations. - Docs: author a “design graph” glossary page. - Hosting: rate-limit MCP requests; log audit events. #### The WPOCC - Share a micro-grant brief for MCP plugin prototypes. - Convene a governance clinic on MCP permissions and audits. ### FAIR - Write covenant for MCP server transparency and sunset clauses. - Add provenance and signature checks to exported assets. ## 🧪 Hypotheses - MCP reduces integration time for design-to-code tasks by 50%. [oai_citation:31‡The Verge](https://www.theverge.com/2024/11/25/24305774/anthropic-model-context-protocol-data-sources?utm_source=chatgpt.com) - Graph-based design access improves LLM output fidelity over pixel-only prompts. [oai_citation:32‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) - Plugin API scripts are sufficient for most export and transform cases. [oai_citation:33‡Penpot](https://penpot.app/integrations-api) ### 📊 Methodology - Run A/B projects: MCP pipeline vs. manual export; measure time and defects. - Evaluate output fidelity with rubric across components, spacing, and styles. - Security tabletop: simulate misuse and validate logging and rollback. ### ❓ Questions - What permission model should gate MCP access in multi-tenant teams? - How stable are Penpot node schemas across versions for automation? - Which IDEs and agents support MCP best today? ### 🔮 Future Research - Learn embeddings over design graphs for robust retrieval. - Explore design-to-design refactors with constraints and tests. - Study human-in-the-loop review UIs for MCP actions. ### 💡 Implications - Practice: stronger automation patterns and fewer brittle exports. - Policy: clear scopes, audits, and incident response for MCP servers. - Education: graph-first mental models in design curricula. ### 🧠 Learning Styles Assessment - Reading level estimate: Flesch-Kincaid ≈ Grade 12–13. #### 👀 Visual learners - Present: graphs and component diagrams. - Improve: architecture diagrams for MCP and Plugin API flow. #### 🔊 Aural learners - Present: talk recording. - Improve: 3-minute audio summary with key terms. #### 🗣️ Verbal learners - Present: definitions in docs. - Improve: glossary for nodes, links, and MCP terms. #### 🧩 Kinesthetic learners - Present: runnable demo repo. - Improve: step-by-step labs with checkpoints. #### 🧠 Logical learners - Present: protocol abstractions. - Improve: decision trees for tool choice and scope. #### 🧑‍🤝‍🧑 Social learners - Present: office hours and issues. - Improve: cohort sprints with code reviews. #### 🧘‍♀️ Solitary learners - Present: docs and demos. - Improve: worksheets and self-paced modules. #### 🌿 Naturalistic learners - Present: N/A. - Improve: lifecycle and sustainability framing for compute use. ### 📊 Accessibility Assessment #### Screen reader semantics - Present: headings and structure. - Improve: alt text for diagrams and code captions. #### Keyboard navigation - Present: standard site navigation. - Improve: visible focus and skip links in demos. #### Contrast and readability - Present: acceptable docs styling. - Improve: larger line height and code block labeling. #### Text resizing and reflow - Present: responsive layouts. - Improve: prefers-reduced-motion support in demos. #### Media and captions - Present: video with captions. - Improve: downloadable transcript and audio description. #### Forms and interactions - Present: simple forms in demos. - Improve: inline validation and accessible toasts. #### Standards reference - Map improvements to WCAG 2.2 AA criteria. ### 🌍 DEIB Assessment #### Cultural breadth - Present: open tooling, global audience. - Improve: multilingual docs and examples. #### Inclusive language - Present: neutral terms. - Improve: plain-language summaries at section starts. #### Neurodiversity support - Present: consistent structure. - Improve: icon+text labels and predictable patterns. #### Representation - Present: community-driven repos. - Improve: showcase diverse contributor stories. #### Psychological safety - Present: respectful framing. - Improve: clear code of conduct and escalation paths. ### ✅ Logical Validity #### Strong reasoning - [H2] uses a concrete model (entities/relationships). It grounds claims in docs. [oai_citation:34‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) - [H5] cites a standard (MCP). It enables repeatable integrations. [oai_citation:35‡GitHub Docs](https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/use-the-github-mcp-server?utm_source=chatgpt.com) - [H6] references a specific mechanism (JS in app). It is verifiable. [oai_citation:36‡Penpot](https://penpot.app/integrations-api) #### Fallacies - “Official” status may overstate third-party server endorsement. Safer: “community MCP server.” [oai_citation:37‡GitHub](https://github.com/montevive/penpot-mcp) - “Design-to-design” may not handle all edits. Safer: “selected transforms via Plugin API.” [oai_citation:38‡Penpot](https://penpot.app/integrations-api) #### Tone of voice - Informative, technical, and aspirational. Demos show capability without hype. ### 🛡️ DARVO Analysis - No denial, attack, or role reversal patterns observed. Content remains technical and descriptive. ## 🎯 Conclusion - Treat designs as graphs to support AI workflows. Use MCP to wire tools predictably. Start small with exports, then progress to design-to-design transforms. Document scopes, audits, and fallback plans. [oai_citation:39‡GitHub](https://github.com/montevive/penpot-mcp) ## 🧱 Refactor Appendix (append after 🎯 Conclusion) ### 📚 Literature Split Pad - Purpose: Stage Konik CEE units that become per-source Literature notes. - Split level: **H3**. - Include verbatim quotes under 25 words and a [view highlight] link. ### [H1] Penpot frames design as graphs for AI > [!quote] [Unfolding the official Penpot MCP](https://www.youtube.com/watch?v=KNsvFc4Elfs) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “pimpot takes a very complex representation … and it funnels it into pixels” Two lines: contrast pixels vs. graph structure; AI needs structure. [view highlight](https://www.youtube.com/watch?v=KNsvFc4Elfs&t=13) #xref #articleseed ID:rw_[MISSING] ### [H2] Graph model represents entities and relations > [!quote] [Unfolding the official Penpot MCP](https://www.youtube.com/watch?v=KNsvFc4Elfs) > “Disks are entities. Arrows are relationships.” Two lines: aligns with Penpot data guide. [view highlight](https://www.youtube.com/watch?v=KNsvFc4Elfs&t=162) #xref ID:rw_[MISSING] --- ### 🔖 Atomic Split Pad (Zettel Candidates) - Purpose: Promote reusable claims into Atomic notes. - Split level: **H4**. - Each item: one idea, present tense, specific, testable. #### [Z1] MCP standardizes AI tool access - Holds when clients support MCP. - Pointer: GitHub Docs MCP. [oai_citation:40‡GitHub Docs](https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/use-the-github-mcp-server?utm_source=chatgpt.com) - Links: [[AI-Tooling]] [[Protocol-Design]] #### [Z2] Penpot graphs support semantic operations - Holds for components, frames, pages. - Pointer: Penpot Data Guide. [oai_citation:41‡help.penpot.app](https://help.penpot.app/technical-guide/developer/data-guide/) - Links: [[Design-Graphs]] [[LLM-Context]] --- ### ✏️ Fleeting Queue (Extract by Selection) - [F1] Try `penpot-mcp` on a button kit — context/https://github.com/montevive/penpot-mcp #fleeting #inbox - [F2] Sketch permission scopes for MCP servers — context/https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/use-the-github-mcp-server #fleeting #inbox - [F3] Build glossary for Penpot graph terms — context/https://help.penpot.app/learn/data/data-guides/entity-relationships/ #fleeting #inbox ---  ## 📺 Video ![](https://www.youtube.com/watch?v=KNsvFc4Elfs) --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=KNsvFc4Elfs)* **[00:08]** Thank you, Elena. That was an amazing piece of work and it took the major part of a year of very talented uh colleagues in the team and so I hope that they are now free to help us in AI. So I am Albero. I'm working uh on AI for pimpot and I want to share with you how we see AI in these times of so much hype and sometimes so many disappointments right **[00:39]** so design is many things to many people right and it's it's also different things to different programs um pimpot takes a very complex representation code that you can download and an uh explorer as JSON and it funnels it into pixels which is what bystanders may think design is about. But you designers and developers working with designers **[01:11]** know that there's much more depth to design. The design looks like pixels but emerges in the mind as emotions and understanding after being processed by the neurobiology of the brain by the cultural frameworks sometimes shared sometimes not by your personal history and by the context of the moment. So the question is what **[01:41]** image of design is are we going to deliver to AI because AI is at the end of the day nothing else than one more program is actually a machinelearned program a program that we learn from data. So can we see beyond the code representation that we have and the pixels that apparently at the surface represent design? Let's look at what a component is for penot **[02:11]** um you see this box with the line harmless as it is um it looks to pimpot um if we represent it in this graph form as a square and a line which are linked to a container it's actually a frame by an is child of relationship. So that's what the disks mean. Disks are entities. Arrows are relationships. This is a very powerful modeling paradigm. **[02:42]** And in fact, in fact, it's already exposing to you that there's something invisible already to you in the canvas about this representation. That's the component object uh top right. And by the way, this is something we can produce and store in a graph database. So we can invoke uh summon these representations with incantations such as you see below which is nothing else than a query on a graph similar to what you know people do with relational **[03:13]** databases when they use SQL. Right? Let's do something more complicated. Let's look at a component green and a copy of a component in purple. What do we see that is new? Well, um the frames that contain them are both pointing to the same component object that lives in the same page or in another page. But what's most remarkable is that they are now linked by arrows. The horizontal arrows which represent **[03:43]** refers to. So the line the diagonal line is l linked to the diagonal line. The square is linked to the square even though the color is overridden. And the frames are also linked between themselves. All right, seems easy enough. Now, let's look at the entire file for this example. Two new objects appear. The file, the document at the top in green, um, and the page. And well, it looks just a little bit more complicated except we've added a new type of link. So, that's the blue link **[04:16]** there. And what it actually represents is something that Tempot does not explicitly record, but your brain computes. Everybody here is actually computing many things understanding many things out of a design like that that are not explicitly written down in the code and that is our approach that's what we want to bring to machine learning to AI programs the a similar understanding similar enough understanding to what you have so they **[04:46]** can operate on the document at a semantic level in this case what we've uh calculated here is how hats of the green square covers the purple square. And that's now something we can use both in traditional programs and in machine learning programs. Right? If you now look at a realistic design, that's a plethora of entities and relationships. I mean, that's where it really gets exciting, right? A lot of data makes us machine learning people very happy. **[05:16]** So there is this enriched representation we have uh shown to you as a graph and that's something that actually we like enough to say we'd like to give it to you through the pimp API. That's what Pablo said there's no secondass citizen you will be able to use this when and if we're are done. uh but also programs can benefit from it and notably LLMs. LLMs are limited in many ways, but we can help them understand the structure **[05:47]** of things. And in this particular case, um we are doing that by presenting to you today the new uh pimpot mcp server. Uh and I'm going to um play to you a video by Dominic. You'll find him um if you like. He's sitting there. Very nice guy and very talented. The kind you want to work with. um which shows to you uh what will be available on GitHub in a few uh minutes. **[06:18]** We present the penpot mcp server using the model context protocol MCP. It enables a client using a large language model to connect directly to a penpot design. Let's say we have a design like this in penpot and want to apply it in a front-end project. As you can see, it contains various styles for buttons as well as input fields. We need only to establish a connection to the MCP server in order to allow the AI to work with the project's contents. Now, let's ask Claude to create a login form for us, **[06:49]** extracting the styles directly from the penpot design. It will achieve this by primarily applying a single mechanism, the execution of JavaScript code directly in the Penpot web app. In this example, it will write code to gather information about the structure of the design and to export style information. And here is the finished product, the login form that we asked for built with HTML and CSS. [Applause] **[07:27]** You'll find it at that URL. You're welcome to play. We wanted to share it with you as soon as possible so you can poke holes on it and also tell you tell us how you'd like to use it. I'd like to stress and that's something you'll seen on the video which is also uh up there in on GitHub uh that this is using actually the same penmpot API plugins have access to which gives it a lot of granular control over pimpot and in particular allows you to actually do design to design not just design to code **[08:00]** and that's where we would like to head to. So we'll have this powerful representation. We'll have machine learning programs which are not LLMs working on it. But we will also have the power of LLMs in so far as they're helpful operating on this representation and we would like to give all of that to you designers, developers to make better designs with with less effort. Thank you. **[08:32]** [Music]