Penpot

Map design structures naturally to SVG, CSS, and HTML

Penpot is intentionally aligned with web standards, and its Inspect mode exposes SVG, CSS, and HTML for implementation work. Layouts can use concepts such as CSS Grid and Flex Layout, allowing responsive structures to be described in terms that frontend developers already understand. The goal is to reduce the reinterpretation step between a visual mockup and production code by keeping more of the design structure compatible with how the browser actually lays out interfaces.

Sources: [1]

Use Design Tokens, Components, and Variants as a shared source of truth

Penpot treats Design Tokens as a native capability and combines them with Components and Variants for reusable design systems. Decisions such as color, spacing, and typography can be managed as reusable tokens rather than isolated visual styles, making them easier to align with implementation. APIs, webhooks, and a plugin system extend that model into existing development and internal-tool workflows.

Sources: [1]

Connect AI agents through MCP for bidirectional design-code workflows

Penpot ships an MCP server and companion MCP plugin that connect an AI agent to a Penpot design project. The MCP server instructions explicitly assume tool-based interaction with the connected project, while implementation code includes operations for generating CSS and manipulating layout. This enables workflows where agents can inspect design state and also participate in editing or transforming it, moving beyond a read-only design API toward bidirectional design-code automation.

Sources: [1][2]

For collaborative design teams that also need data ownership and self-hosting

Penpot fits design and engineering teams that want a shared design-system workflow while reducing friction between visual design and frontend implementation. It is also relevant for organizations with governance or data-location requirements that do not want all design assets to live exclusively in a third-party SaaS. Because the same product is available as a hosted service and for self-hosting, teams can evaluate it quickly and later move to infrastructure they control.

Sources: [1][3]

Self-hosting is multi-service, with enterprise controls in a separate layer

The official Docker Compose example runs separate frontend, backend, exporter, MCP, PostgreSQL, and Valkey services. Asset storage can use the filesystem or an S3-compatible backend, and production deployments also need deliberate SMTP, TLS, secure-session, email-verification, and secret-key configuration. The example includes permissive defaults intended for local use, so it should not be exposed to the internet unchanged.

Penpot's source code is licensed under Mozilla Public License 2.0. The README positions the core product as open source while Penpot Enterprise adds organization-scale controls such as an Admin Console, SSO, and advanced permissions. MPL-2.0 is file-level copyleft rather than application-wide copyleft, but modified covered files distributed to others must remain available under MPL-2.0, so redistribution and embedding scenarios still require license review.

Sources: [3][1][4]