penpot / penpot

Penpot / Penpot

Penpot is the open-source design platform for teams that build digital products at scale. Penpot’s key strength lies in giving you full ownership of your design infrastructure. Built on open source and designed for self-hosting, it puts teams in complete control of their design environment supporting strict compliance and governance requirements. Penpot 是一个专为大规模构建数字产品的团队打造的开源设计平台。其核心优势在于让用户能够完全掌控自己的设计基础设施。它基于开源构建并支持自托管，使团队能够完全掌控设计环境，从而满足严格的合规性和治理要求。

Whether used in the browser or deployed on your own servers, Penpot works with open standards like SVG, CSS, HTML, and JSON. Real-time collaboration strengthens this foundation, helping teams scale and bring design closer to the product through top-tier capabilities. 无论是在浏览器中使用还是部署在自己的服务器上，Penpot 都支持 SVG、CSS、HTML 和 JSON 等开放标准。实时协作功能巩固了这一基础，通过顶尖的能力帮助团队实现规模化，并拉近设计与产品之间的距离。

Additionally, developers feel at home using Penpot, because design is expressed as code, enabling a direct translation and shipping products faster. Best-in-class native Design Tokens provide a single source of truth between design and development. They ensure consistency, improve collaboration, and make it easier to manage complex design systems. 此外，开发者在使用 Penpot 时会感到非常亲切，因为设计是以代码形式呈现的，这实现了设计到代码的直接转换，从而加快了产品交付速度。一流的原生设计令牌（Design Tokens）在设计与开发之间提供了单一事实来源。它们确保了设计的一致性，改善了协作，并使管理复杂的设计系统变得更加容易。

The MCP server takes it further by enabling multi-directional workflows between design and code. A powerful open API and plugin system makes the workspace programmable, enabling automation, AI-driven workflows, and integrations with the tools and systems you already use. MCP 服务器通过实现设计与代码之间的多向工作流，将这一能力进一步提升。强大的开放 API 和插件系统使工作空间具备了可编程性，支持自动化、AI 驱动的工作流，并能与你现有的工具和系统进行集成。

With CSS Grid and Flex Layout, teams can design responsive interfaces that behave like real code from the start. Combined, these features turn Penpot into a full-stack design platform for building scalable design systems and fully integrated product development processes. 借助 CSS Grid 和 Flex Layout，团队可以从一开始就设计出表现得如同真实代码一样的响应式界面。这些功能共同将 Penpot 打造成了一个全栈设计平台，用于构建可扩展的设计系统和完全集成的产品开发流程。

Why Penpot

为什么选择 Penpot

Penpot connects design, code, and AI workflows through a code-based approach, making designs readable by developers and AI via the MCP server. This approach helps teams ship what’s actually designed and manage design systems at scale with powerful design tokens. As a self-hosted, open-source and real-time collaboration platform, Penpot offers full flexibility, security, and ownership without vendor lock-in. Penpot 通过基于代码的方法连接设计、代码和 AI 工作流，并通过 MCP 服务器使设计对开发者和 AI 可读。这种方法帮助团队交付真正设计出的产品，并利用强大的设计令牌大规模管理设计系统。作为一个自托管、开源且支持实时协作的平台，Penpot 提供了完全的灵活性、安全性和所有权，且不存在供应商锁定。

Plugin system

插件系统

Penpot plugins let you expand the platform’s capabilities, give you the flexibility to integrate it with other apps, and design custom solutions. Penpot 插件允许你扩展平台功能，为你提供与其他应用程序集成以及设计自定义解决方案的灵活性。

Designed for developers

专为开发者设计

Penpot was built to serve both designers and developers and create a fluid design-code process. You have the choice to enjoy real-time collaboration or play “solo”. Penpot 旨在同时服务于设计师和开发者，创造流畅的设计-代码流程。你可以选择享受实时协作，也可以选择“单打独斗”。

Inspect mode

检查模式 (Inspect mode)

Work with ready-to-use code and make your workflow easy and fast. The inspect tab gives instant access to SVG, CSS and HTML code. 使用现成的代码，让你的工作流程变得简单快捷。检查选项卡可即时获取 SVG、CSS 和 HTML 代码。

Integrations

集成

Penpot offers integration into the development toolchain, thanks to its support for webhooks and an API accessible through access tokens. 得益于对 Webhook 的支持以及可通过访问令牌调用的 API，Penpot 提供了与开发工具链的集成。

Building Design Systems: design tokens, components and variants

构建设计系统：设计令牌、组件和变体

Penpot brings design systems to code-minded teams: a single source of truth with native Design Tokens, Components, and Variants for scalable, reusable, and consistent UI across projects and platforms. Penpot 为注重代码的团队带来了设计系统：通过原生的设计令牌、组件和变体提供单一事实来源，从而在不同项目和平台间实现可扩展、可复用且一致的 UI。

Getting started

入门指南

Penpot is the only design & prototype platform that is deployment agnostic. You can use it in our SAAS or deploy it anywhere. Learn how to install it with Docker, Kubernetes, Elestio or other options on our website. Penpot 是唯一一个不限部署方式的设计与原型平台。你既可以使用我们的 SaaS 服务，也可以将其部署在任何地方。请访问我们的网站，了解如何通过 Docker、Kubernetes、Elestio 或其他方式进行安装。

Community

社区

We love the Open Source software community. Contributing is our passion and if it’s yours too, participate and improve Penpot. All your designs, code and ideas are welcome! 我们热爱开源软件社区。贡献是我们的热情所在，如果这也是你的热情，欢迎参与并改进 Penpot。我们欢迎你所有的设计、代码和想法！

Want to go a step further? Become a Penpot Ambassador and help grow the Penpot community in your region while contributing to a global, open design ecosystem. 想要更进一步？成为 Penpot 大使，帮助发展你所在地区的 Penpot 社区，同时为全球开放的设计生态系统做出贡献。

If you need help or have any questions; if you’d like to share your experience using Penpot or get inspired; if you’d rather meet our community of developers and designers, join our Community! 如果你需要帮助或有任何疑问；如果你想分享使用 Penpot 的经验或获取灵感；如果你想结识我们的开发者和设计师社区，请加入我们的社区！

Code of Conduct

行为准则

Anyone who contributes to Penpot, whether through code, in the community, or at an event, must adhere to the code of conduct and foster a positive and safe environment. 任何为 Penpot 做出贡献的人，无论是通过代码、在社区中还是在活动中，都必须遵守行为准则，并营造一个积极、安全的环境。

Contributing

贡献

Any contribution will make a difference to improve Penpot. How can you get involved? Choose your way: 任何贡献都能为改进 Penpot 带来改变。如何参与？选择你的方式：

Create and share Libraries & Templates that will be helpful for the community. 创建并分享对社区有帮助的库和模板。
Invite your team to join. 邀请你的团队加入。
Give this repo a star and follow us on Social Media: Mastodon, Youtube, Instagram, Linkedin, Peertube, X and BlueSky. 给此仓库点赞，并在社交媒体上关注我们：Mastodon, Youtube, Instagram, Linkedin, Peertube, X 和 BlueSky。
Participate in the Community space by asking and answering questions; reacting to others’ articles; opening your own conversations and following along on decisions affecting the project. 参与社区空间，提问并回答问题；对他人文章做出反应；开启你自己的对话，并关注影响项目的决策。
Report bugs with our easy guide for bugs hunting or GitHub issues. 通过我们的漏洞查找指南或 GitHub Issues 报告漏洞。
Become a translator. 成为一名翻译者。
Give feedback: Email us. 提供反馈：给我们发送电子邮件。
Contribute to Penpot’s code: Watch this video by Alejandro Alonso, CIO and developer at Penpot, where he gives us a hands-on demo of how to use Penpot’s repository and make changes in both front and back end. 为 Penpot 的代码做出贡献：观看由 Penpot 首席信息官兼开发者 Alejandro Alonso 制作的视频，他演示了如何使用 Penpot 的仓库并进行前后端修改。

To find (almost) everything you need to know on how to contribute to Penpot, refer to the contributing guide. 要了解关于如何为 Penpot 做出贡献的（几乎）所有信息，请参阅贡献指南。

Resources

资源

You can ask and answer questions, have open-ended conversations, and follow along on decisions affecting the project. 你可以提问和回答问题、进行开放式对话，并关注影响项目的决策。

💾 Documentation (文档)
🚀 Getting Started (入门指南)
✏️ Tutorials (教程)
🏘️ Architecture (架构)
📚 Dev Diaries (开发日志)
🧑‍🏫 UI Design Course (UI 设计课程)

License

许可证

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. 本源代码格式受 Mozilla 公共许可证 (MPL) 2.0 版本条款约束。如果此文件未附带 MPL 副本，你可以通过 http://mozilla.org/MPL/2.0/ 获取。