Penpot 开源设计协作工具完全指南：免费、可自托管，且开发交付路径清晰
【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot
Penpot 是一个可自托管的开源设计协作平台（MPL-2.0 协议），面向设计师、开发者与团队管理者，解决实时协作设计、共享组件库、设计到开发交付的需求。官方云端版即用，也可用 Docker 部署到自有服务器。
功能能力清单：Penpot 能做什么
- 实时协作与团队权限：多人同时编辑同一文件，修改即时同步；团队成员分 Viewer、Editor、Admin、Owner 四级角色，团队人数不设上限（见 teams.njk）。入口在仪表盘左上角的团队选择器。
- 共享库与组件复用：颜色、字体、图标、组件集中在库中管理，更新源组件后各实例同步，避免各文件样式漂移。
- Design Tokens：遵循 W3C DTCG 格式，支持
{dimension.small}形式的别名引用与{spacing.small} * 2这类方程值，可导出 JSON 对接工程侧工具（design-tokens.njk）。 - 开发交接 Dev tools：Inspect 模式下测量图层间距、复制属性、直接获取 SVG/HTML 标记与 CSS 代码片段，无需对着截图量像素。
3 步上手：从部署到第一个设计文件
- 部署或登录：自托管按 Docker 指南 下载 docker-compose.yaml，执行 docker compose 启动，服务默认监听 9001 端口，可用
PENPOT_VERSION变量锁定版本。 - 建团队与文件：在团队选择器底部点 "+ Create new team" 创建团队，邀请成员并分配角色，然后在仪表盘新建项目并添加文件。
- 产出第一个结果：画板里创建矩形与文本，切到 Inspect 模式即可看到每个图层的尺寸、间距与 CSS 片段；随后可编辑为 SVG/PNG 或导出 .penpot 文件。
Penpot 与商业设计工具的差别
| 维度 | Penpot | 商业订阅制设计工具 |
|---|---|---|
| 成本 | 免费，MPL-2.0 开源 | 按席位订阅，随人数增加 |
| 数据归属 | .penpot 为 ZIP 归档，内含可读 JSON 与资源文件 | 专有格式，迁移困难 |
| 部署方式 | 云端 + 自托管（Docker、Kubernetes 均有文档） | 仅云端 |
| 开放程度 | SVG、CSS、HTML、JSON、W3C DTCG 等开放格式 | 私有格式为主 |
| 运行平台 | 浏览器，无需安装客户端 | 多需安装桌面客户端 |
| 可扩展性 | 开放 Plugin API（TypeScript）+ 官方 MCP server | 生态受厂商限制 |
文件格式细节见 .penpot file format。
进阶场景：不同角色怎么用
设计角色：原型与流程验证
跨页面连接图层交互，定义点击后的跳转，组成多页面用户流程，再分享链接给同事做可用性测试，不必等开发排期（testing-view-mode 章节）。
开发角色：不靠量像素交付
在 Inspect 模式选中图层，直接查看宽高、间距、填充与描边；右键 Copy as CSS 复制样式，或在 Code 页签取回 SVG/HTML 代码，交接记录见 Dev tools 指南。
管理角色：协作与权限治理
在设计稿上原地添加评论，讨论沉淀在画板旁而非聊天记录里；配合四级角色控制谁能改稿，Access Tokens 可给集成系统颁发调用凭据（account-teams 文档）。
文档、扩展入口与两条使用路径
- 用户指南：docs/user-guide/，覆盖界面、快捷键、导出导入
- 自托管：Docker、Kubernetes、Configuration
- 插件与 MCP：plugins/ 含 14 个示例应用，mcp/README.md 说明官方 MCP server 架构
- 架构源码：backend/（Clojure 后端）、frontend/（ClojureScript 前端）
想快速试用，直接在官方云端注册账号即可开始设计；若数据合规是硬性要求，按 Docker 指南在自有服务器部署私有实例（下载 compose 文件、启动、访问 9001 端口共 3 步），再用 NGINX 或 Caddy 配置反向代理与域名，即可替换团队现有的云端方案。
【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
