Penpot MCP Server | Tree grid layout

In this example, Penpot's MCP Server recreates a "List View" component extracted from the Wordpress Design System Figma file. The result is a perfectly structured design file in Penpot, including components, variants and CSS Flex Layouts that make the design completely responsive. -- Penpot is the free open-source design tool for Design & Code collaboration. https://design.penpot.app​​ Penpot is ideal for product design: UI designs, prototypes, wireframes, mockups, webs, apps, and much more. Penpot allows a true collaboration and no handoff drama between designers and developers thanks to features like CSS Grid Layout, Flex Layout and Code Inspect. Designers get a professional, intuitive, powerful design tool with ground-breaking responsive layouts, design systems at scale. While developers get a design tool that expresses as code and provides ready-to-use code to develop faster. Penpot is the only one that can be web-based or self-hosted. The app works with open standards (SVG and CSS) avoiding vendor lock-in. Also, it enables teams the flexibility and control in their designs, thanks to the API and webhooks available. Penpot Community: https://community.penpot.app 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.