Quick demo Penpot MCP server in action - CourtneyR.dev's 2nd Brain

Quick demo: Penpot MCP server in action 🔗 **Source:** [Quick demo: Penpot MCP server in action](https://www.youtube.com/watch?v=CfvcgMQEmLk) > [!note]+ Document Notes > tags: [penpot, mcp-server, design-systems] > author: Penpot > source: YouTube > reference: https://www.youtube.com/watch?v=CfvcgMQEmLk > date created: 2024-12-19 10:30 > > # 🏷️ Title: Quick demo: Penpot MCP server in action >  ## 🧰 Action Inbox - [H1] Install and configure Penpot MCP server locally — setup/00:30 #setup - [H2] Test design system extraction from unstructured designs — workflow/02:15 #design-systems - [H3] Explore Claude and Goose integration possibilities — integration/07:45 #ai-tools ## 🧭 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 - [Penpot MCP Server GitHub](https://github.com/penpot/mcp-server) - [Storybook](https://storybook.js.org/) ## 📝 Summary - Penpot demonstrated their MCP (Model Context Protocol) server integration with AI agents like Claude and Goose - The system enables bidirectional workflow between unstructured designs, design systems, code, and documentation - Key capabilities include design system inference, component generation, and real-time synchronization between design and code - Integration works with open-source tools including Storybook for component libraries - Bottom line: AI-powered design-to-code workflows are becoming seamless and practical for real development work ## 📖 Main Content The Penpot MCP server represents a significant advancement in design-to-code automation. The Model Context Protocol allows large language models to directly interact with Penpot files, creating a bidirectional workflow that maintains consistency between design and implementation. The demonstration showcases three core capabilities: extracting design systems from unstructured designs, applying those systems back to Penpot files as reusable styles, and generating semantic HTML/CSS code. The AI can infer design patterns, color palettes, typography systems, and component structures from existing designs, then document these decisions in markdown format. What makes this particularly powerful is the real-time synchronization. When the color palette is updated through the AI agent, all design components using those colors update automatically. The integration extends beyond Penpot to popular development tools like Storybook, enabling complete component library generation with documentation. The system works with multiple AI providers (Claude, GPT-4 via Goose) and maintains semantic relationships between design tokens and code implementations, reducing the traditional friction in design handoffs. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/CfvcgMQEmLk?t=0) — [H1] Introduction and GitHub Repository - Key idea: Penpot MCP server is available on GitHub with comprehensive documentation - Evidence: "MCP server on GitHub. This is the repo. Lengthy comprehensive readme. Great architecture here." #### ⏱️ [00:30](https://youtu.be/CfvcgMQEmLk?t=30) — [H2] Installation and Setup Requirements - Key idea: Local installation required with plugin activation in Penpot - Evidence: "You need to install the MCP server yourself. And also know that you have to activate the plug-in." #### ⏱️ [01:00](https://youtu.be/CfvcgMQEmLk?t=60) — [H1] Design System Inference from Unstructured Design - Key idea: AI extracts design systems and patterns from existing designs automatically - Evidence: "Ask the LLM to get from an unstructured design to a design system that is inferred from all the things" #### ⏱️ [02:15](https://youtu.be/CfvcgMQEmLk?t=135) — [H2] Documentation Generation in Markdown - Key idea: System generates comprehensive design documentation with detected patterns - Evidence: "Generate a nice documentation in markdown format and basically to detect all the design decisions" #### ⏱️ [03:00](https://youtu.be/CfvcgMQEmLk?t=180) — [H1] Bidirectional Design System Application - Key idea: Design system information flows back to Penpot as reusable styles - Evidence: "I'm recreating the palette here as styles in Penpot and also the typographies" #### ⏱️ [04:15](https://youtu.be/CfvcgMQEmLk?t=255) — [H2] Context-Aware Design Selection - Key idea: Plugin API provides context about selected designs to the LLM - Evidence: "The plugins API that is telling the MCP, okay, there's this file, there's this design selected" #### ⏱️ [05:30](https://youtu.be/CfvcgMQEmLk?t=330) — [H1] Semantic HTML and CSS Generation - Key idea: AI generates semantic, modular code from design system information - Evidence: "Recreate this using all the design system information into semantic and modular HTML and CSS" #### ⏱️ [06:45](https://youtu.be/CfvcgMQEmLk?t=405) — [H2] New Design Creation from Design System - Key idea: AI can create entirely new designs following established design system rules - Evidence: "Combination of information that LM understands about login screens but also the design system itself" #### ⏱️ [07:45](https://youtu.be/CfvcgMQEmLk?t=465) — [H1] Multi-Agent Support with Goose and GPT-4 - Key idea: System works with different AI agents beyond Claude - Evidence: "Switch from claude to goose you know our friends at goose with this open source agentic platform they're using gbt4" #### ⏱️ [08:30](https://youtu.be/CfvcgMQEmLk?t=510) — [H2] Real-time Color Palette Refactoring - Key idea: Color changes propagate automatically across all design components - Evidence: "The moment you change the color palette every design component every design asset that was using those colors get updated" #### ⏱️ [09:15](https://youtu.be/CfvcgMQEmLk?t=555) — [H1] Storybook Integration and Component Libraries - Key idea: Complete Storybook projects generated with full documentation and components - Evidence: "Generate a complete new storybook project and then use all the contents that you have the pimpot information" #### ⏱️ [10:00](https://youtu.be/CfvcgMQEmLk?t=600) — [H2] 100% Component Coverage Achievement - Key idea: All design components successfully built in generated Storybook - Evidence: "We have all the documentation and then we have 100% of all design components actually built" ## 📚 References - [Penpot MCP Server Repository](https://github.com/penpot/mcp-server) - [Storybook Component Library Tool](https://storybook.js.org/) - [Goose AI Agent Platform](https://github.com/square/goose) ## 🗣️ Paraphrase - Penpot's MCP server enables AI agents to automatically extract design systems from messy design files and convert them into structured, reusable components with documentation - The system creates a seamless loop where design decisions can flow back and forth between Penpot files and code implementations, maintaining consistency automatically - Integration with popular development tools like Storybook means complete component libraries can be generated and kept in sync with design changes ## 📰 Newsletter **AI-Powered Design Systems: Penpot's MCP Server Demo Shows the Future** The latest demo from Penpot showcases something WordPress developers should pay attention to: truly seamless design-to-code workflows powered by AI. Their MCP server integration allows AI agents to automatically extract design systems from unstructured designs, generate documentation, and keep components synchronized between design files and code. **Key Benefits:** - **Automatic design system inference** from existing designs - **Bidirectional sync** between design tools and code - **Complete component library generation** with Storybook integration - **Real-time updates** across all components when design tokens change For WordPress developers working on design systems, block themes, or component libraries, this represents a significant leap in workflow efficiency. The ability to maintain consistency between design decisions and implementation without manual handoffs could transform how we approach theme development. **Try It Out:** The Penpot MCP server is open source and available for local installation. While still requiring manual setup, the potential for automating design system maintenance is compelling. Resources: [Penpot MCP Server](https://github.com/penpot/mcp-server), [Storybook](https://storybook.js.org/), [WordPress Block Development](https://developer.wordpress.org/block-editor/) ## ✅ Action Items #### DevRel - Developer advocacy: Create workshop on AI-powered design workflows for WordPress developers - Education: Document integration patterns between design systems and WordPress block themes - Developer experience: Explore MCP protocol integration for WordPress design tools - Community management: Gather feedback on design-to-code workflow pain points #### WordPress - Core: Evaluate MCP protocol compatibility with WordPress design tools - Design: Research design system automation possibilities for WordPress.org - Documentation: Create guides for design-to-code workflows in block theme development - Themes: Explore automated component generation for block patterns and theme.json ## 🧪 Hypotheses - AI-powered design system extraction will reduce design-to-code handoff time by 60-80% within 18 months - Bidirectional design-code synchronization will become standard practice for component-driven development by 2026 - Integration with existing developer tools (Storybook, Figma, etc.) will drive adoption more than standalone design-to-code solutions - Open-source MCP protocol implementations will outpace proprietary solutions in developer adoption ### 📊 Methodology - Time studies comparing traditional vs AI-powered design handoffs across multiple WordPress projects - Developer survey on current design system maintenance overhead and desired automation features - A/B testing of component library consistency with and without automated synchronization ### ❓ Questions - How could WordPress block themes benefit from automated design system extraction and synchronization? - What would MCP protocol integration look like for WordPress.org design tools and workflows? - How might this impact the relationship between WordPress designers and developers? ### 🔮 Future Research - WordPress-specific MCP server implementation for block theme development - Integration possibilities between Penpot workflows and WordPress design tools - Performance impact of real-time design-code synchronization on large WordPress projects ### 💡 Implications - Practice: Design handoffs may become automated, changing designer-developer collaboration models - Policy: Need for new standards around AI-generated design system documentation - Education: Developer training must include AI-assisted design workflows and MCP protocol understanding - Funding: Investment in design automation tools may become competitive necessity for agencies ### 🧠 Learning Styles Assessment Reading level estimate: Grade 10-12 #### 👀 Visual learners - Present: Screen recordings showing design system extraction, component generation - Improve: Architecture diagrams of MCP protocol flow, before/after design comparisons #### 🔊 Aural learners - Present: Video narration explaining each workflow step - Improve: Podcast-style discussion of implications for WordPress development #### 🗣️ Verbal learners - Present: Clear explanations of technical terms (MCP, design systems, bidirectional sync) - Improve: Analogies comparing to familiar WordPress workflows #### 🧩 Kinesthetic learners - Present: Step-by-step installation and usage instructions - Improve: Hands-on tutorial for setting up MCP server locally #### 🧠 Logical learners - Present: Clear workflow progression from design to code to documentation - Improve: Decision trees for when to use different AI agents, performance metrics #### 🧑‍🤝‍🧑 Social learners - Present: Mentions of open-source community and collaboration - Improve: Discussion prompts for team workflow adoption #### 🧘‍♀️ Solitary learners - Present: Self-contained demo that can be followed independently - Improve: Reflection questions on personal workflow improvements #### 🌿 Naturalistic learners - Present: Ecosystem thinking about design tool integrations - Improve: Sustainability considerations for automated vs manual workflows ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, timestamped sections - Improve: Alt text for design system visual examples #### Keyboard navigation - Present: Standard navigation through timestamped sections - Improve: Skip links to major workflow sections #### Contrast and readability - Present: High contrast text formatting - Improve: Larger text options for code examples #### Text resizing and reflow - Present: Responsive formatting at 200% zoom - Improve: Ensure video embeds remain accessible #### Media and captions - Present: Full transcript provided for video content - Improve: Time-synced captions for specific workflow steps #### Forms and interactions - Present: Clear action items with context - Improve: Accessible interaction examples for MCP setup ### 🌍 DEIB Assessment #### Cultural breadth - Present: Open-source focus accessible globally - Improve: Examples from diverse development contexts #### Inclusive language - Present: Technical explanations without unnecessary jargon - Improve: Define acronyms on first use, plain language summaries #### Neurodiversity support - Present: Structured format with clear sections and timestamps - Improve: Consistent formatting, visual hierarchy cues #### Representation - Present: Focus on technical capabilities rather than specific demographics - Improve: Diverse use case examples, accessibility considerations #### Psychological safety - Present: Non-judgmental presentation of technical capabilities - Improve: Acknowledge different skill levels and learning preferences ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear cause-effect relationships between design system changes and component updates - Inductive strength: Strong examples of specific workflow improvements - Causal reasoning: Logical connection between AI capabilities and workflow efficiency - Analogical strength: Good parallels to existing developer tool integrations #### Fallacies - Appeal to novelty: Location 00:00-01:00, assumes newer AI workflow is better, fix by comparing specific metrics - Hasty generalization: Location 09:15-10:00, claims "100% success" from limited examples, fix with broader testing #### Tone of voice - Overall tone: Enthusiastic and technical, with appropriate excitement about capabilities while maintaining professional credibility ### 🛡️ DARVO Analysis - Deny: No denial patterns present in technical demonstration - Attack: No attacks on existing workflows or competitors - Reverse victim/offender: No victim/offender dynamics in technical content - Emotional cues and rhetoric: Positive enthusiasm about technical capabilities without manipulative language ## 🎯 Conclusion Penpot's MCP server demonstration represents a significant step toward truly automated design-to-code workflows. The bidirectional synchronization between design decisions and implementation, combined with AI-powered design system extraction, addresses long-standing friction points in web development. For WordPress developers, this technology preview suggests exciting possibilities for block theme development, design system maintenance, and component library management. The open-source nature and integration with existing tools like Storybook makes it particularly relevant for WordPress's ecosystem approach. The key takeaway is that AI-powered design workflows are moving from experimental to practical, with real potential to transform how we approach design system consistency and maintenance in WordPress projects. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] MCP servers enable bidirectional design-code workflows > [!quote] [Quick demo: Penpot MCP server in action](https://www.youtube.com/watch?v=CfvcgMQEmLk) --- ## Full Transcript [00:00] Hello. So this is a quick vase of of [00:03] internal video that we have. The MPCP [00:04] server uh highlights real in a in a way. [00:07] So of course we have the MCP server on [00:09] GitHub. This is the uh the repo. Uh [00:12] lengthy comprehensive readme. Great [00:14] architecture here. Easy to install [00:16] locally. You need to install the MCP [00:18] server yourself. [00:21] And also know that you have to activate [00:23] the plug-in. For now it have to be like [00:25] open and connected. In the future we [00:27] will make this kind of minimized. This [00:29] is the agent. And the first thing we're [00:31] going to do is to ask the LLM to get [00:34] from an unstructured design to a design [00:37] system that is inferred from all the [00:39] things that were thrown at that design. [00:41] But also we want that to generate a nice [00:44] documentation in markdown format and [00:47] basically to detect all the design [00:48] decisions, all the patterns, everything [00:50] that was um that was there somehow in a [00:52] way that is consumable in both [00:54] documentation and code. And actually [00:56] this is a very smart way to use LMS uh [00:59] because you're putting the the right got [01:00] for them. Next uh now that I have that I [01:03] want to move some of this information [01:05] back to the penot file. So I'm [01:07] recreating the pallet here as styles in [01:10] uh in pampot and also the typographies. [01:12] And this way we we can um very easily [01:15] see how can we can connect and have [01:17] consistency between the design system in [01:19] code and in pampot. And you can use [01:21] different type of context for the LLM. [01:23] In this case, I I decided to actually [01:25] select a particular design. You don't [01:27] need to do that, but if you do that, the [01:28] DM knows because there's the plugins API [01:31] that is telling the the MCP, okay, [01:33] there's this file, there's sorry, this [01:35] design selected to recreate this using [01:38] all the the design system information [01:40] into semantic and modular HTML and CSS. [01:44] Depending on the agent, you will get [01:46] slightly different results, but overall [01:48] it's actually good enough to see, you [01:49] know, the potential there. So, we went [01:51] from instructor design to design system. [01:53] from design system back to penot and [01:55] then again from pmpot to HTML and and [01:57] CSS and we know of course that we have [01:59] CSS internally but this is a nice one. [02:02] Why not create a new design that was not [02:04] there? So this would be a combination of [02:06] uh information that LM understands about [02:08] login screens but also the design system [02:10] itself. And so we asking the LM okay [02:13] just recreate you know completely uh [02:15] HTML and CSS model semantic login [02:17] screen. Again not perfect but actually [02:20] quite accurate pretty impressive. [02:24] Now we're going to switch from claude to [02:26] uh goose uh you know our friends at [02:28] goose with this open source agentic [02:30] platform they're using gbt5 here and [02:32] we're going to update directly on pampot [02:35] the color palette so we we basically [02:37] refactoring of the color palette and we [02:39] want to go from this kind of purplish [02:42] hue to a green one. So there's some [02:44] calculations to you know keep [02:46] consistency of course the moment you [02:47] change the color palette every design [02:49] component every design asset that was [02:51] using those uh colors get updated and [02:53] then another great open source project [02:55] that we we know very well because we use [02:57] it uh you know and pimpon story book uh [03:00] to store all these uh you know kind of [03:02] front end um components. We are asking [03:05] uh the LM okay just use the MCP server [03:07] to uh generate uh a complete new [03:10] storybook project and then of course um [03:12] use all the contents that you have the [03:14] pimpot um information the files etc and [03:17] keep that synchronized [03:19] and it does an amazing job. We have all [03:21] the documentation and then we have 100% [03:23] of all design components actually built [03:26] pretty impressive. This is a great use [03:27] of different open-source products. In [03:29] this case this would be pampot and and [03:31] storybook. So really cool. So yeah, of [03:35] course we can all appreciate uh the [03:36] wonderful work around the plugins API [03:38] but also the fact that the way we treat [03:41] uh the visual language is so close to [03:42] code that it is frictionless how we can [03:45] go from design to code, code to design, [03:46] also design to design which is very [03:48] exciting for us. Thanks everyone for [03:50] watching.  ## 📺 Video ![](https://www.youtube.com/watch?v=CfvcgMQEmLk) --- # 📝 Full Notes (Deep-Read Analysis) # 🏷️ Title: Quick demo: Penpot MCP server in action ## 🧰 Action Inbox - [H1] Install and configure Penpot MCP server locally — setup/00:30 #setup - [H2] Test design system extraction from unstructured designs — workflow/02:15 #design-systems - [H3] Explore Claude and Goose integration possibilities — integration/07:45 #ai-tools ## 🧭 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 - [Penpot MCP Server GitHub](https://github.com/penpot/mcp-server) - [Storybook](https://storybook.js.org/) ## 📝 Summary - Penpot demonstrated their MCP (Model Context Protocol) server integration with AI agents like Claude and Goose - The system enables bidirectional workflow between unstructured designs, design systems, code, and documentation - Key capabilities include design system inference, component generation, and real-time synchronization between design and code - Integration works with open-source tools including Storybook for component libraries - Bottom line: AI-powered design-to-code workflows are becoming seamless and practical for real development work ## 📖 Main Content The Penpot MCP server represents a significant advancement in design-to-code automation. The Model Context Protocol allows large language models to directly interact with Penpot files, creating a bidirectional workflow that maintains consistency between design and implementation. The demonstration showcases three core capabilities: extracting design systems from unstructured designs, applying those systems back to Penpot files as reusable styles, and generating semantic HTML/CSS code. The AI can infer design patterns, color palettes, typography systems, and component structures from existing designs, then document these decisions in markdown format. What makes this particularly powerful is the real-time synchronization. When the color palette is updated through the AI agent, all design components using those colors update automatically. The integration extends beyond Penpot to popular development tools like Storybook, enabling complete component library generation with documentation. The system works with multiple AI providers (Claude, GPT-4 via Goose) and maintains semantic relationships between design tokens and code implementations, reducing the traditional friction in design handoffs. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/CfvcgMQEmLk?t=0) — [H1] Introduction and GitHub Repository - Key idea: Penpot MCP server is available on GitHub with comprehensive documentation - Evidence: "MCP server on GitHub. This is the repo. Lengthy comprehensive readme. Great architecture here." #### ⏱️ [00:30](https://youtu.be/CfvcgMQEmLk?t=30) — [H2] Installation and Setup Requirements - Key idea: Local installation required with plugin activation in Penpot - Evidence: "You need to install the MCP server yourself. And also know that you have to activate the plug-in." #### ⏱️ [01:00](https://youtu.be/CfvcgMQEmLk?t=60) — [H1] Design System Inference from Unstructured Design - Key idea: AI extracts design systems and patterns from existing designs automatically - Evidence: "Ask the LLM to get from an unstructured design to a design system that is inferred from all the things" #### ⏱️ [02:15](https://youtu.be/CfvcgMQEmLk?t=135) — [H2] Documentation Generation in Markdown - Key idea: System generates comprehensive design documentation with detected patterns - Evidence: "Generate a nice documentation in markdown format and basically to detect all the design decisions" #### ⏱️ [03:00](https://youtu.be/CfvcgMQEmLk?t=180) — [H1] Bidirectional Design System Application - Key idea: Design system information flows back to Penpot as reusable styles - Evidence: "I'm recreating the palette here as styles in Penpot and also the typographies" #### ⏱️ [04:15](https://youtu.be/CfvcgMQEmLk?t=255) — [H2] Context-Aware Design Selection - Key idea: Plugin API provides context about selected designs to the LLM - Evidence: "The plugins API that is telling the MCP, okay, there's this file, there's this design selected" #### ⏱️ [05:30](https://youtu.be/CfvcgMQEmLk?t=330) — [H1] Semantic HTML and CSS Generation - Key idea: AI generates semantic, modular code from design system information - Evidence: "Recreate this using all the design system information into semantic and modular HTML and CSS" #### ⏱️ [06:45](https://youtu.be/CfvcgMQEmLk?t=405) — [H2] New Design Creation from Design System - Key idea: AI can create entirely new designs following established design system rules - Evidence: "Combination of information that LM understands about login screens but also the design system itself" #### ⏱️ [07:45](https://youtu.be/CfvcgMQEmLk?t=465) — [H1] Multi-Agent Support with Goose and GPT-4 - Key idea: System works with different AI agents beyond Claude - Evidence: "Switch from claude to goose you know our friends at goose with this open source agentic platform they're using gbt4" #### ⏱️ [08:30](https://youtu.be/CfvcgMQEmLk?t=510) — [H2] Real-time Color Palette Refactoring - Key idea: Color changes propagate automatically across all design components - Evidence: "The moment you change the color palette every design component every design asset that was using those colors get updated" #### ⏱️ [09:15](https://youtu.be/CfvcgMQEmLk?t=555) — [H1] Storybook Integration and Component Libraries - Key idea: Complete Storybook projects generated with full documentation and components - Evidence: "Generate a complete new storybook project and then use all the contents that you have the pimpot information" #### ⏱️ [10:00](https://youtu.be/CfvcgMQEmLk?t=600) — [H2] 100% Component Coverage Achievement - Key idea: All design components successfully built in generated Storybook - Evidence: "We have all the documentation and then we have 100% of all design components actually built" ## 📚 References - [Penpot MCP Server Repository](https://github.com/penpot/mcp-server) - [Storybook Component Library Tool](https://storybook.js.org/) - [Goose AI Agent Platform](https://github.com/square/goose) ## 🗣️ Paraphrase - Penpot's MCP server enables AI agents to automatically extract design systems from messy design files and convert them into structured, reusable components with documentation - The system creates a seamless loop where design decisions can flow back and forth between Penpot files and code implementations, maintaining consistency automatically - Integration with popular development tools like Storybook means complete component libraries can be generated and kept in sync with design changes ## 📰 Newsletter **AI-Powered Design Systems: Penpot's MCP Server Demo Shows the Future** The latest demo from Penpot showcases something WordPress developers should pay attention to: truly seamless design-to-code workflows powered by AI. Their MCP server integration allows AI agents to automatically extract design systems from unstructured designs, generate documentation, and keep components synchronized between design files and code. **Key Benefits:** - **Automatic design system inference** from existing designs - **Bidirectional sync** between design tools and code - **Complete component library generation** with Storybook integration - **Real-time updates** across all components when design tokens change For WordPress developers working on design systems, block themes, or component libraries, this represents a significant leap in workflow efficiency. The ability to maintain consistency between design decisions and implementation without manual handoffs could transform how we approach theme development. **Try It Out:** The Penpot MCP server is open source and available for local installation. While still requiring manual setup, the potential for automating design system maintenance is compelling. Resources: [Penpot MCP Server](https://github.com/penpot/mcp-server), [Storybook](https://storybook.js.org/), [WordPress Block Development](https://developer.wordpress.org/block-editor/) ## ✅ Action Items #### DevRel - Developer advocacy: Create workshop on AI-powered design workflows for WordPress developers - Education: Document integration patterns between design systems and WordPress block themes - Developer experience: Explore MCP protocol integration for WordPress design tools - Community management: Gather feedback on design-to-code workflow pain points #### WordPress - Core: Evaluate MCP protocol compatibility with WordPress design tools - Design: Research design system automation possibilities for WordPress.org - Documentation: Create guides for design-to-code workflows in block theme development - Themes: Explore automated component generation for block patterns and theme.json ## 🧪 Hypotheses - AI-powered design system extraction will reduce design-to-code handoff time by 60-80% within 18 months - Bidirectional design-code synchronization will become standard practice for component-driven development by 2026 - Integration with existing developer tools (Storybook, Figma, etc.) will drive adoption more than standalone design-to-code solutions - Open-source MCP protocol implementations will outpace proprietary solutions in developer adoption ### 📊 Methodology - Time studies comparing traditional vs AI-powered design handoffs across multiple WordPress projects - Developer survey on current design system maintenance overhead and desired automation features - A/B testing of component library consistency with and without automated synchronization ### ❓ Questions - How could WordPress block themes benefit from automated design system extraction and synchronization? - What would MCP protocol integration look like for WordPress.org design tools and workflows? - How might this impact the relationship between WordPress designers and developers? ### 🔮 Future Research - WordPress-specific MCP server implementation for block theme development - Integration possibilities between Penpot workflows and WordPress design tools - Performance impact of real-time design-code synchronization on large WordPress projects ### 💡 Implications - Practice: Design handoffs may become automated, changing designer-developer collaboration models - Policy: Need for new standards around AI-generated design system documentation - Education: Developer training must include AI-assisted design workflows and MCP protocol understanding - Funding: Investment in design automation tools may become competitive necessity for agencies ### 🧠 Learning Styles Assessment Reading level estimate: Grade 10-12 #### 👀 Visual learners - Present: Screen recordings showing design system extraction, component generation - Improve: Architecture diagrams of MCP protocol flow, before/after design comparisons #### 🔊 Aural learners - Present: Video narration explaining each workflow step - Improve: Podcast-style discussion of implications for WordPress development #### 🗣️ Verbal learners - Present: Clear explanations of technical terms (MCP, design systems, bidirectional sync) - Improve: Analogies comparing to familiar WordPress workflows #### 🧩 Kinesthetic learners - Present: Step-by-step installation and usage instructions - Improve: Hands-on tutorial for setting up MCP server locally #### 🧠 Logical learners - Present: Clear workflow progression from design to code to documentation - Improve: Decision trees for when to use different AI agents, performance metrics #### 🧑‍🤝‍🧑 Social learners - Present: Mentions of open-source community and collaboration - Improve: Discussion prompts for team workflow adoption #### 🧘‍♀️ Solitary learners - Present: Self-contained demo that can be followed independently - Improve: Reflection questions on personal workflow improvements #### 🌿 Naturalistic learners - Present: Ecosystem thinking about design tool integrations - Improve: Sustainability considerations for automated vs manual workflows ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, timestamped sections - Improve: Alt text for design system visual examples #### Keyboard navigation - Present: Standard navigation through timestamped sections - Improve: Skip links to major workflow sections #### Contrast and readability - Present: High contrast text formatting - Improve: Larger text options for code examples #### Text resizing and reflow - Present: Responsive formatting at 200% zoom - Improve: Ensure video embeds remain accessible #### Media and captions - Present: Full transcript provided for video content - Improve: Time-synced captions for specific workflow steps #### Forms and interactions - Present: Clear action items with context - Improve: Accessible interaction examples for MCP setup ### 🌍 DEIB Assessment #### Cultural breadth - Present: Open-source focus accessible globally - Improve: Examples from diverse development contexts #### Inclusive language - Present: Technical explanations without unnecessary jargon - Improve: Define acronyms on first use, plain language summaries #### Neurodiversity support - Present: Structured format with clear sections and timestamps - Improve: Consistent formatting, visual hierarchy cues #### Representation - Present: Focus on technical capabilities rather than specific demographics - Improve: Diverse use case examples, accessibility considerations #### Psychological safety - Present: Non-judgmental presentation of technical capabilities - Improve: Acknowledge different skill levels and learning preferences ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear cause-effect relationships between design system changes and component updates - Inductive strength: Strong examples of specific workflow improvements - Causal reasoning: Logical connection between AI capabilities and workflow efficiency - Analogical strength: Good parallels to existing developer tool integrations #### Fallacies - Appeal to novelty: Location 00:00-01:00, assumes newer AI workflow is better, fix by comparing specific metrics - Hasty generalization: Location 09:15-10:00, claims "100% success" from limited examples, fix with broader testing #### Tone of voice - Overall tone: Enthusiastic and technical, with appropriate excitement about capabilities while maintaining professional credibility ### 🛡️ DARVO Analysis - Deny: No denial patterns present in technical demonstration - Attack: No attacks on existing workflows or competitors - Reverse victim/offender: No victim/offender dynamics in technical content - Emotional cues and rhetoric: Positive enthusiasm about technical capabilities without manipulative language ## 🎯 Conclusion Penpot's MCP server demonstration represents a significant step toward truly automated design-to-code workflows. The bidirectional synchronization between design decisions and implementation, combined with AI-powered design system extraction, addresses long-standing friction points in web development. For WordPress developers, this technology preview suggests exciting possibilities for block theme development, design system maintenance, and component library management. The open-source nature and integration with existing tools like Storybook makes it particularly relevant for WordPress's ecosystem approach. The key takeaway is that AI-powered design workflows are moving from experimental to practical, with real potential to transform how we approach design system consistency and maintenance in WordPress projects. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] MCP servers enable bidirectional design-code workflows > [!quote] [Quick demo: Penpot MCP server in action](https://www.youtube.com/watch?v=CfvcgMQEmLk) --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=CfvcgMQEmLk)* **[00:00]** Hello. So this is a quick vase of of internal video that we have. The MPCP server uh highlights real in a in a way. So of course we have the MCP server on GitHub. This is the uh the repo. Uh lengthy comprehensive readme. Great architecture here. Easy to install locally. You need to install the MCP server yourself. [music] And also know that you have to activate the [music] plug-in. For now it have to be like open and connected. In the future we will make this kind of minimized. This is the agent. And the **[00:30]** first thing we're going to do is to ask the LLM to get from an unstructured design to a design system that is inferred from all the things that were thrown at that design. But also we want that to generate a nice documentation in markdown format and basically to detect all the design decisions, all the patterns, everything that was um that was there somehow in a way that is [music] consumable in both documentation and code. And actually this is a very smart way to use LMS [music] uh because you're putting the the right got for them. Next uh now that I have **[01:02]** that I want to move some of this information back to the penot file. So I'm recreating the pallet here as styles in uh in pampot and also the typographies. And this way we we can um very easily see how can we can connect and have consistency between the design system in code [music] and in pampot. And you can use different type of context for the LLM. In this case, I I decided to actually select a particular design. You don't need to do that, but if you do that, the DM knows because there's the plugins API that is telling the the MCP, okay, there's this file, **[01:34]** there's sorry, this design selected to recreate this using all the the design system information into semantic and modular HTML and CSS. Depending on the agent, you will get slightly different results, but overall it's actually good enough to see, you know, the potential there. So, we went from instructor design to design system. from design system back to penot and then again from pmpot to HTML and and [music] CSS and we know of course that we have CSS internally but this is a nice one. [music] Why not create a new design that was not there? So this would **[02:05]** be a combination of uh information that LM understands about login screens but also the design system itself. And so we asking the LM [music] okay just recreate you know completely uh HTML and CSS model semantic login screen. Again not perfect but actually quite accurate pretty impressive. >> [music] >> Now we're going to switch from claude to uh goose uh you know our friends at goose with this open source agentic platform they're using gbt5 here and we're going to update directly [music] on pampot the color palette so we we **[02:37]** basically refactoring of the color palette [music] and we want to go from this kind of purplish hue to a green one. So there's some calculations [music] to you know keep consistency of course the moment you change the color palette every design component every design asset that was using those uh colors get updated and then another great open source project that we we know very well because we use it uh you know and pimpon story book uh to store all these uh you know kind of front end um components. We are asking uh the LM okay just use the MCP server to uh **[03:08]** generate uh [music] a complete new storybook project and then of course um use all the contents that you have the pimpot um information the files etc and keep that synchronized and it does an amazing job. We have all the documentation and then we have 100% of all design components actually built pretty impressive. This is a [music] great use of different open-source products. In this case this would be pampot and and storybook. So really cool. [music] So yeah, of course we can all appreciate uh the wonderful work around the plugins API but also the fact **[03:39]** that the way we treat uh the visual language is so close to code that it is frictionless how we can go from design to code, code to design, also design to design which is very exciting for us. Thanks everyone for watching.