#
The open-source design tool Penpot released version 2.16.0 in June 2026, and has garnered 53.3k stars on GitHub. Unlike mainstream design tools that use proprietary file formats, Penpot’s core philosophy is that its design files are built directly on open web standards like SVG, CSS, and HTML, aiming to bridge the long-standing gap between design and development.
Underlying Architecture Based on Open Standards
In traditional design workflows, developers need to “translate” visual mockups created by designers in tools like Figma into code. This process often increases communication costs due to incomplete information or incompatible formats. Penpot attempts to fundamentally change this situation, as its design files are themselves a form of coded expression.
When a designer creates a component in Penpot, its properties like border radius, margin, and color directly correspond to CSS properties. This architecture allows design element properties to be understood and used directly by front-end code without translation, significantly reducing information loss from design to implementation. What developers get from the Inspect panel are not just reference values, but code snippets that can be directly integrated.
Native Design Tokens and Advanced Layouts
Penpot is the industry’s first design tool to natively support the W3C Design Tokens specification draft. This means that core elements of a design system, such as colors, spacing, fonts, and shadows, can be defined as reusable “Tokens,” sharing the same set of variables between the design mockups and the codebase.
Key features include:
- Native Integration: Manage and apply Design Tokens without relying on third-party plugins, ensuring data consistency and stability.
- Theming Capabilities: Built-in support for one-click switching between multiple themes, such as light and dark modes.
- Mathematical Operations: Supports using the
calc() function for mathematical expressions within Tokens, such as base-spacing * 2, facilitating the creation of responsive and scalable spacing systems.
Additionally, Penpot natively supports CSS Grid and Flex Layout. Designers can directly manipulate grid and flexbox layouts on the canvas, with behavior consistent with browsers. The related properties (e.g., gap, flex-direction) directly generate corresponding CSS code, ensuring high fidelity between the layout in the design phase and the final web implementation.
MCP Server: Exploring AI-Driven Design Collaboration
As a cutting-edge experimental feature, Penpot has introduced the MCP (Machine Co-pilot Protocol) Server, an interface that allows AI models to programmatically read, understand, and manipulate Penpot design files. This technology opens up possibilities for more deeply automated design workflows.
Potential use cases include:
- Code Generation: Convert completed designs into semantic HTML and modular CSS with a single click.
- Design System Automation: Automatically generate and update design system documentation from design files, and even create Storybook projects directly.
- Smart Conversion: Intelligently transform hand-drawn sketches or low-fidelity wireframes into high-fidelity designs using existing design system components.
- Natural Language Interaction: Allow users to search and manipulate elements in design files using natural language commands, such as “find all primary blue buttons.”
According to a report by the tech publication Smashing Magazine, there are already cases demonstrating the use of the MCP Server to fully automate the synchronization of components, documentation, design system elements, and the codebase, significantly boosting productivity.
Data Sovereignty and Enterprise-Grade Deployment
Penpot is licensed under the MPL-2.0 open-source license and offers self-hosting options, allowing it to be deployed on private servers using technologies like Docker, Kubernetes, or Elestio. For organizations in sectors like finance, healthcare, and government with strict data security and compliance requirements, this feature provides a level of data sovereignty that cloud services like Figma cannot match, ensuring all design assets remain within the organization’s internal infrastructure.
Current Status and Limitations
Although Penpot offers an innovative workflow, users should also consider its current limitations when adopting it.
- Performance: According to reviews from outlets like XDA Developers, when handling large projects with numerous layers and complex elements, Penpot’s canvas zoom and scroll performance still lags behind Figma.
- Ecosystem: The size of its plugin ecosystem (Penpot Hub) is much smaller than Figma’s, which may pose a risk of missing features for users who heavily rely on specific plugins.
- File Compatibility: It does not currently support direct import of
.figma files. Users must rely on community-maintained conversion tools, whose conversion quality can be unstable.
