Penpot MCP Server Demo: Quick Setup & Features

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-mcp-server-showcase-ask-for-help/10040

Official Penpot MCP server - set up your server locally: https://github.com/penpot/penpot/tree/develop/mcp

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: https://www.linkedin.com/company/penpotdesign
*Instagram: https://www.instagram.com/penpot.app/
*Github: https://github.com/penpot

Penpot: Design as code.