开源设计与原型平台 Penpot：核心功能与上手指南

是什么

Penpot 是由 Kaleidos Subsidiary SL 为数字化产品团队打造的一款开源设计与原型制作平台。该平台提供了一体化的工作空间，让设计师与软件开发者能够在同一个环境中协作完成用户界面设计稿、线框图以及可交互的原型。与依赖专有数据格式的传统设计软件不同，Penpot 直接构建在开放的 Web 标准之上，涵盖 SVG（可缩放矢量图形）、CSS、HTML 与 JSON，并采用开放的文件格式。

该项目遵循 Mozilla Public License 2.0（MPL-2.0）开源协议发布，并已被认证为数字公共产品（Digital Public Good）。由于 Penpot 具备完全开源且不受部署方式限制的特性，企业和团队可以对自身的设计资产和基础架构拥有完全的所有权与控制权。团队既可以直接在云端通过标准网页浏览器使用，也可以将平台私有化部署在内部服务器上。

Penpot 的核心设计理念是将设计工作与 Web 代码紧密连接。通过使用标准前端技术的语言来构建视觉布局，设计稿能够自然地映射到实际开发的代码中。无论是团队成员进行实时协同，还是各自独立推进工作，Penpot 都能提供灵活的环境，支持从早期创意概念到大型设计系统的完整界面创建流程。

能做什么

Penpot 提供了丰富的功能，旨在支持产品设计、产研对齐以及现代化自动化工作流：

• 基于标准的响应式布局（CSS Grid 与 Flex 布局）： Penpot 允许设计师利用原生的 CSS Grid 和 Flexbox 布局系统构建响应式界面。在 Web 开发中，Flexbox 负责沿单一轴线控制元素的对齐与空间分配，而 CSS Grid 则通过行与列在二维空间上组织内容。基于这些标准构建布局，能够确保界面原型具备动态调整尺寸的能力，真实还原现代浏览器渲染网页的效果。
• 线框图与交互式原型： 团队可以使用线框图快速勾勒早期方案，并构建可点击的交互式原型。这些原型方便相关各方在正式进入开发之前，预览页面跳转、梳理用户流程并验证界面交互行为。
• 设计系统、组件与 Design Tokens： 平台通过可复用的 UI 组件及变体（用于呈现组件的不同状态，如按钮的默认、悬停或按下状态）来支持可扩展的设计系统。此外，Penpot 还原生集成了 Design Tokens——这类变量用于存储调色板、字号阶梯和间距度量等基础设计数值。根据项目 README 的说明，这些原生 Design Tokens 在设计与研发之间建立了单一事实来源（Single Source of Truth），确保设计系统在跨项目、跨平台时保持一致。
• 面向开发者的代码检查模式： Penpot 内置专属的代码检查模式，能够即时展示可直接用于生产环境的 SVG、CSS 和 HTML 代码。开发者点击画布上的任意元素，即可查看精确的尺寸、颜色与布局规则，无需依赖繁琐的人工设计标注即可加速开发实现。
• Model Context Protocol（MCP）服务器与 AI 工作流： 为了适配人工智能与自动化工作流，Penpot 提供了开放的 Model Context Protocol（MCP）服务器。MCP 是一项开放标准，允许大语言模型（LLM）和 AI Agent 直接与外部应用通信。借助这一集成，外部 AI 工具能够与 Penpot 画布双向交互，涵盖“设计转代码”、“代码转设计”以及“设计转设计”等链路，实现界面自动生成与布局调整。
• 通过插件、Webhooks 与 API 实现扩展： Penpot 采用插件架构，开发者可藉此定制平台功能并将外部工具融入设计流程。团队还可以利用 Webhooks 以及基于访问令牌（Access Token）鉴权的开放 REST API，将 Penpot 与自动化持续集成流水线无缝连接。

怎么开始

开始使用 Penpot，既可以选择官方托管的云端工作空间，也可以在自有基础架构上进行私有化部署：

• 使用云端服务： 访问 Penpot 官方 Web 应用注册免费账号即可。由于该平台直接在浏览器中运行，无需下载任何桌面端软件，创作者就能立刻开始绘制布局、创建项目文件，并邀请团队成员在共享工作区中协同作业。
• 在私有服务器上自托管： 对于在数据隐私、合规性及托管环境上有严格要求的团队，可以将 Penpot 安装在自有基础架构上。项目文档详细介绍了使用 Docker、Kubernetes 和 Elestio 等容器技术的部署路径。技术管理员可以通过这些方案将 Penpot 部署在企业内网或本地服务器中。
• 获取学习资源： 初次探索该平台的用户可以查阅 Penpot 提供的丰富学习资源，包括详尽的用户指南、技术文档、开发者日志、视频教程以及专门的 UI 设计课程。此外，社区还维护着多种组件库与模板，可直接导入以加速新界面项目的启动。
• 加入社区生态： 用户可以加入 Penpot 官方社区论坛，参与技术答疑、使用咨询、产品改进建议交流、教学活动探讨以及本地化语言讨论。用户还可以申请加入 Penpot Ambassador（大使）计划、协助翻译平台界面、通过 GitHub Issues 提交问题反馈，或直接向代码仓库贡献代码。

价格与门槛

具体的价格档位、商业套餐和方案细节，请以 Penpot 官方网站 公布的信息为准。

在开源层面，Penpot 的源代码遵循 Mozilla Public License 2.0（MPL-2.0）开源协议。官方托管的云平台支持用户免费注册使用。

针对具有更高管理进阶需求的发展型企业，该项目提供了名为 Penpot Enterprise 的付费商业版本。该版本同时支持云端和自托管环境，提供集中式管理后台（Admin Console）、自定义权限管控，以及与企业身份提供商集成的单点登录（SSO）功能。

在运行门槛方面，Penpot 对部署环境具有良好的适应性：

• 客户端要求： 由于 Penpot 采用纯 Web 架构，用户无论在何种桌面操作系统上，只需使用最新版本的现代浏览器，即可访问画布编辑、原型预览和协作工具。
• 自托管服务端要求： 部署私有实例的系统管理员需要具备支持容器化服务与微服务管理的基础架构，例如配备 Docker 或 Kubernetes 等容器编排工具的服务器环境。

适合谁

Penpot 适合软件产品生命周期中的多类角色与组织：

• UI 与 UX 设计师： 需要协同画布来绘制线框图、构建响应式 UI 组件，并利用 CSS Grid 等符合 Web 规范的布局引擎制作交互原型的设计师。
• 前端开发者： 希望设计工具原生契合 Web 标准，能够随时检查并获取真实反映样式机制的 HTML、CSS 和 SVG 代码的工程师。
• 跨职能产品团队： 需要依托实时多人协作功能，确保产品经理、设计师与开发者在整个研发流程中紧密同步的产研团队。
• 对合规性要求严格的企业： 身处强监管行业、要求对基础架构拥有完全自主权、需要本地部署与集中化用户管控，且不希望依赖第三方专有云服务的组织。
• AI 工具开发者与自动化工程师： 正在构建智能体（Agentic）或自动化软件工作流，并希望通过开放的 MCP 服务器及开发者 API 直接与界面设计交互的技术团队。
• 开源支持者： 看重开放标准、开放格式与数字公共产品，旨在保持创作自由并避免被特定商业厂商绑定的创作者。

替代品

Excalidraw 是一款开源的手绘白板与图表绘制工具。

Inkscape 是一款开源的矢量图形编辑软件。

来源

• Penpot GitHub 仓库
• Penpot 官方网站
• Excalidraw GitHub 仓库
• Inkscape GitLab 仓库