Penpot - an open-source design and code collaboration platform for real-time collaboration among multiple users.

What is Penpot?

Penpot is an open-source design and code collaboration platform built on open standards such as SVG, CSS, and HTML, enabling UI design and interactive prototyping within a browser. The platform supports real-time multi-user collaboration, W3C Design Token management, and integration with MCP Server, allowing AI to directly read the actual components, tokens, and layer structures of design files rather than just screenshots. The Inspect mode allows for one-click copying of native code, realizing the concept of "design as code."

Penpot's main functions

• UI Design and PrototypingComplete interface design, interactive prototypes, and visual editing in a browser, supporting multi-page management.
• Real-time collaborationMultiple users can edit the same design file simultaneously, supporting comments, annotations, and version synchronization.
• Inspect modeSelecting any element allows you to directly view and copy the corresponding SVG, CSS, and HTML code, eliminating the need for developers to manually recreate it.
• Native CSS Grid and Flex LayoutThe design draft is rendered according to real web layout rules, what you see is what you get, and the output code is completely consistent with the visuals.
• Design Tokens ManagementThe industry's first design tool to fully support the W3C Design Tokens standard, providing unified control over variables such as color, font size, and spacing.
• Components and variant systemsIt supports the creation of reusable components and multi-state variants, enabling the construction of scalable design systems.
• MCP Server IntegrationBuilt-in MCP service: AI Agent can directly read the structure, components and tokens of design files to realize a two-way design-code workflow.

Follow us on WeChat and reply with "open source",join inAI open source project discussion group

How to use Penpot

• Method 1: SaaS Online Use
  • Register an account:access design.penpot.appRegister a free account using your email address.
  • Create a projectAfter logging in, create a new team or project and enter the design canvas to start creating.
  • Design InterfaceUse the left toolbar to draw shapes, text, and components, and the right panel to adjust properties and layout.
  • Managing TokensDefine design variables such as color, font, and spacing in the Tokens panel and bind them to the elements.
  • Start CollaborationInvite team members to join the project, allowing multiple people to edit the same file in real time.
  • Export codeSelect an element to open the Inspect panel and copy the SVG, CSS, or HTML code with one click for development use.
• Method 2: Docker self-hosting
  • Download configurationExecute on the server curl Get official docker-compose.yaml document.
  • Start service:run docker compose up -d Deploy the Penpot service.
  • Access ConfigurationAccess port 9001 of the server IP address through a browser and follow the wizard to complete the initial setup.
  • Registered AdministratorUpon first access, create an administrator account to independently use all functions within the intranet environment.

Penpot's core advantages

• Design is codeFrom the very beginning, the design is expressed using Web standards, and Inspect directly outputs usable code, eliminating translation losses between design and development.
• Fully open source and self-hostedThe MPL-2.0 protocol supports private deployment and meets the compliance and data sovereignty requirements of sensitive industries such as finance, government, and healthcare.
• AI-natively readableThrough the MCP Server, the AI Agent directly reads the design structure instead of screenshots, achieving accurate generation, automatic adjustment, and two-way synchronization.
• No vendor lock-inBased on open standards such as SVG/CSS/HTML/JSON, the file format is universal and can be easily migrated to other tools.
• Design Tokens Industry StandardIt natively supports W3C standards, and changes to design variables in one place have a global impact, enabling the construction of a scalable and maintainable design system.

Penpot's project address

• Project official websitehttps://penpot.app/
• GitHub repositoryhttps://github.com/penpot/penpot

Penpot's Competitive Product Comparison

Penpot application scenarios

• Enterprise-level design system construction: Build consistent design specifications across products and platforms through Design Tokens and component libraries.
• Financial and Government UI DevelopmentPrivate deployment meets data security compliance requirements, and design drafts do not leave the internal network.
• AI-driven front-end developmentBy combining MCP, AI can read design drafts and generate code directly, shortening the cycle from design to deployment.
• Open source communities and educational institutionsZero-cost access to full-featured design tools, supporting teaching, open-source project collaboration, and skills development.
• Seamless collaboration between design and developmentDesigners create in Penpot, and developers can directly obtain usable code through Inspect, reducing communication costs.