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.