Quick demo: Penpot MCP server in action

Enjoy this showcase of a designer working with the Penpot MCP server and going through the following tasks Introduction A quick tutorial on how to set up your own Penpot MCP server. Starting from a relatively final but unstructured UI design, distilling design system data into code documentation Using that documentation to synchronize colours and typography back into Penpot styles Converting a Penpot design into semantic, modular HTML and CSS that follows the design system documentation Building a completely new design (a login screen) based on the existing design system Applying an advanced colour palette change to the Penpot design Building a complete Storybook project for the design system components Explaining why this workflow works so well Since the Plugins API is still awaiting support for Penpot Variants (currently being tested) and Design Tokens (actively under development), this internal video does not demonstrate them. However, it’s easy to extrapolate how they would fit into the workflow. Want to learn more about MCP? We discuss this and much more in the Penpot Community. Join the conversation! https://community.penpot.app/t/penpot... 0:00 Introduction 0:07 Setting up Penpot MCP Server 0:33 Design System to Code documentation 1:01 Synching colours and tipography 1:23 Design to semantic and modular HTML and CSS 2:02 Designing a login screen 2:24 Advanced color palette update 2:54 Storybook project 3:34 Conclusion App: https://design.penpot.app​​ Help: https://help.penpot.app​ Contribute: https://github.com/penpot Penpot Fest: https://penpotfest.org Follow us: *Mastodon: https://fosstodon.org/@penpot/​ *Bluesky: https://bsky.app/profile/penpot.app *X: https://x.com/penpotapp *LinkedIn:   / penpotdesign   *Instagram:   / penpot.app   *Github: https://github.com/penpot Penpot: Design as code.