Penpot：开源 Web 端 UI 设计协作平台，可私有化部署打通设计与前端代码

一、Penpot是什么

Penpot是西班牙团队Kaleidos打造、开源免费、支持私有化部署的浏览器端UI设计与原型协作平台，对标Figma，核心理念为「Design with Code in Mind（面向代码做设计）」。项目2021年正式对外开源，托管于GitHub（penpot/penpot），开源协议采用Mozilla Public License 2.0（MPL 2.0），无厂商锁定、无私有文件格式限制。

项目底层以SVG作为原生存储格式，布局系统原生兼容CSS Flex、CSS Grid，从根源消除设计师与前端开发者之间的样式翻译偏差；同时提供两种使用模式：官方免费云端、企业私有化自托管，兼顾个人设计师、中小企业、政企合规团队的不同需求，GitHub累计超52k Star，长期持续迭代维护。

二、功能特色

1. 全链路UI设计与原型能力

• 矢量画布：支持页面、组件、变体、样式库、图层管理，适配网页、移动端、后台系统、图标设计；

• 原生CSS布局：内置Flex、Grid布局，设计师操作逻辑与前端CSS规范完全统一，尺寸、间距、对齐属性直接映射代码；

• 交互原型：页面跳转、弹窗、状态切换、动效制作，支持分享预览链接给产品、开发、测试人员评审；

• 设计令牌（Design Tokens）原生支持：统一管理颜色、圆角、阴影、字体、间距变量，一键同步全项目组件，搭建标准化设计系统。

2. 设计-开发无缝协同（核心差异化优势）

• 内置代码检查面板，一键导出标准SVG、HTML、原生CSS，无需插件转换；

• 官方内置MCP服务，打通设计稿与AI、前端工程双向工作流，自动解析图层生成组件代码；

• 开放API、Webhooks，可对接Git、低代码平台、自动化流水线，实现设计变更自动同步开发仓库。

3. 实时多人云端协作

基于WebSocket实现多人同时在线编辑，支持光标同步、评论批注、版本历史回溯、项目权限分组（管理员/设计师/访客），多人协作流畅无冲突，支持超大团队分文件夹管理项目资产。

4. 开源可私有化部署，数据自主可控

支持Docker Compose、Kubernetes、Elestio一键部署，所有设计文件、用户数据、协作记录存储在自有服务器；金融、政务、医疗等强合规行业可实现内网离线使用，规避第三方云端数据泄露风险。

5. 拓展生态与跨平台适配

• 插件系统：社区开源插件，支持批量导出、图标库导入、批量样式替换；

• 全浏览器兼容：Windows、macOS、Linux、国产系统均可通过Chrome、Edge、Firefox访问，无需安装客户端；

• 开放文件标准：原生SVG、JSON存储，文件可使用任意矢量工具打开编辑，无封闭私有格式锁死。

三、技术细节

1. 完整技术栈表

2. 整体架构逻辑

整体分为三层：前端SPA应用、后端JVM服务、持久化存储层。

1. 用户通过浏览器访问前端，Web Worker分担画布渲染计算，避免页面卡顿；

2. 前端通过RPC与WebSocket和后端通信，实时同步多人编辑操作；

3. 后端使用PostgreSQL存储结构化数据，Redis处理实时消息队列；

4. Exporter独立服务基于无头Chrome实现PDF、图片、代码批量导出；

5. MCP服务独立进程，提供设计资产AI解析、代码生成接口，供外部工具调用。

3. 底层核心设计亮点

1. SVG原生存储：所有画布内容直接保存为标准SVG，不做二次封装，导出文件无冗余代码；

2. 前后端共用数据模型：Clojure/ClojureScript同源数据结构，减少接口转换出错；

3. 无客户端依赖：纯Web应用，不占用本地硬盘，跨设备登录同步项目。

四、应用场景

1. 政企/金融合规团队
   对数据安全、内网隔离有硬性要求，禁止设计稿上传第三方云，通过Docker私有化部署，数据完全本地留存，满足等保、审计合规标准。

2. 中小互联网产品团队
   替代付费Figma，免费搭建团队协作环境，设计师直接输出可复用CSS代码，减少前端切图沟通成本，快速搭建产品UI与原型。

3. 设计系统搭建团队
   原生Design Tokens变量体系，统一多端（Web、小程序、APP）视觉规范，维护全局组件库，适配多产品线统一UI标准。

4. 开源项目/独立开发者
   无付费门槛，个人免费云端使用，可二次定制开发，结合API接入自有产品、低代码平台、自动化工具。

5. 教育/高校设计课程
   开源免费、无版权限制，教学环境批量部署内网实例，学生无需付费订阅即可学习UI协作、设计转代码流程。

五、使用方法

Penpot分为在线云端版、私有化自托管版两种使用方式：

方式1：官方云端（新手/个人首选，零安装）

1. 打开地址：https://design.penpot.app；

2. 邮箱注册账号，免费使用，无用户数量限制；

3. 新建项目，创建页面、绘制UI、制作交互原型；

4. 开启团队空间，邀请成员实时协作，通过Code面板复制CSS/SVG代码交付开发。

方式2：Docker自托管（企业/内网团队，推荐）

前置条件：服务器安装Docker、Docker Compose

1. 下载官方部署配置文件

wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

2. 启动容器集群（包含前端、后端、PostgreSQL、Redis）

docker compose -p penpot -f docker-compose.yaml up -d

3. 浏览器访问 http://服务器IP:9001，注册首个管理员账号；

4. 环境变量可选配置：开启注册、对接S3对象存储、配置企业邮件通知、自定义域名。

日常基础操作流程

新建项目→绘制矢量界面→创建组件与样式令牌→添加交互跳转→多人在线评审→检查面板导出代码→分享原型链接交付。

六、竞品对比

选取行业主流闭源设计工具横向对比，覆盖开源、部署、数据、代码协同核心维度：

七、常见问题解答

Q：Penpot完全免费吗，有没有功能收费限制？

A：官方云端基础功能永久免费，无用户数上限；私有化自托管社区版100%免费开源，无任何功能阉割；仅官方提供的企业托管云服务有付费增值服务，开源代码本身无收费门槛。

Q：自托管部署最低硬件配置要求是什么？

A：最小单机配置2核CPU、4G内存、20G硬盘；5人以上团队建议4核8G内存，数据库单独挂载存储，避免大图渲染卡顿。

Q：Penpot能否导入Figma、Sketch文件？

A：原生支持导入SVG格式文件；暂不直接读取.fig、.sketch私有文件，可先在Figma/Sketch导出SVG，再导入Penpot使用。

Q：MPL2.0开源协议可以商用二次修改吗？

A：可以商用，允许修改、分发源码；修改后的文件需开源，整体产品可闭源售卖，无GPL强制开源整机限制，企业友好。

Q：自托管后忘记管理员账号密码如何重置？

A：进入PostgreSQL数据库执行用户重置SQL，或通过docker-compose重启服务搭配管理员初始化环境变量重置账号权限，官方文档提供完整重置脚本。

Q：Penpot离线可用吗？

A：云端版必须联网；私有化部署在内网服务器搭建后，完全断网离线使用，不依赖外部网络。

Q：导出的CSS代码能否直接用于前端项目？

A：可以，画布内Flex、Grid、圆角、阴影、间距均遵循W3C标准CSS规范，无需手动换算数值，可直接复制到Vue/React/原生HTML项目。

Q：多人协作时大文件画布出现卡顿怎么解决？

A：1. 拆分大型项目为多个子页面；2. 服务器升级内存；3. 开启Wasm硬件渲染；4. 关闭实时预览动效减轻前端计算压力。

八、相关链接

1. GitHub仓库地址：https://github.com/penpot/penpot

2. 官方在线云端平台：https://design.penpot.app

3. 产品官网：https://penpot.app

九、总结

Penpot是兼顾设计师、前端开发者与企业数据安全需求的开源Web设计协作工具，依托SVG开放标准与原生CSS布局系统打通设计到开发的工作链路，同时提供免费云端与私有化容器部署两种方案，既满足个人独立设计师低成本使用需求，也解决政企、金融行业设计数据合规管控痛点，相比Figma、Sketch等闭源工具具备开源可定制、数据自主可控、无格式锁定三大核心优势，是目前成熟度最高的开源UI设计协作解决方案。