Quick Demo: Penpot MCP Server in Action  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. And also know that you have to activate the 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 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 consumable in both documentation and code. And actually this is a very smart way to use LMS uh because you're putting the the right got for them. Next uh now that I have 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 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, 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 CSS and we know of course that we have CSS internally but this is a nice one. Why not create a new design that was not there? So this would be a combination of uh information that LM understands about login screens but also the design system itself. And so we asking the LM okay just recreate you know completely uh HTML and CSS model semantic login screen. Again not perfect but actually quite accurate pretty impressive. 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 on pampot the color palette so we we basically refactoring of the color palette and we want to go from this kind of purplish hue to a green one. So there's some calculations 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 generate uh 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 great use of different open-source products. In this case this would be pampot and and storybook. So really cool. So yeah, of course we can all appreciate uh the wonderful work around the plugins API but also the fact 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., Quick Demo: Penpot MCP Server in Action, YouTube, 01kc9bhha59tna28zhan4ccakn.