Penpot.app 使用指南

一、平台介绍

Penpot 是一款开源网页端的 UI/UX 设计协作工具。其基于 MPL2.0 开源协议，在 GitHub 上已拥有超过 53k+ Stars，是 Figma 的主要对标产品之一。

核心优势：

• 布局标准原生化：支持原生 CSS Flex/Grid 布局，与设计稿直接复用前端参数。
• 设计交付便捷：支持设计稿直出 CSS/HTML/SVG 代码，Inspect 检查面板可一键导出样式，尺寸、色值及间距无翻译误差。
• 开放与去中心：采用云端 SaaS / 本地自托管双模式，彻底打破厂商锁定；文件使用标准格式（SVG/JSON），便于交接与管理。
• 跨平台兼容：全浏览器运行，支持 Windows/macOS/Linux 通用环境。

📌 官方入口：https://penpot.app

🎨 在线编辑地址：https://design.penpot.app

二、核心功能

1. UI 绘图与原型设计

• 矢量绘图能力，支持页面组件/变体管理。
• 内置交互原型制作工具及响应式画布调整。

1. 原生 CSS 布局引擎

• Flex/Grid 完全对齐前端开发标准。
• 设计参数可被代码直接复用，减少还原成本。

1. 专业级 Inspect 面板

• 选中图层可直接查看属性细节（间距、色值）。
• 一键导出 CSS/HTML/SVG 片段，零误差对接前端资源文件。

1. 设计与管理系统

• 原生 Design Tokens（设计令牌）支持。
• 建立共享组件库及全局样式统一管理规范。

1. 实时多人协同

• 多用户同页编辑、即时评论批注功能完善。
• 具备版本回溯与历史记录查看能力。

1. 强大的扩展生态

• 开放插件系统与 API 接口支持开发定制。
• 对接 MCP AI 代理及自定义字体管理方案。

1. 灵活的部署架构

• 官方云 SaaS（开箱即用）。
• Docker/K8s私有服务器自托管，适合特定数据需求场景。

三、适用人群分析

✅ 推荐使用

• UI/UX设计师与前端开发人员组成的协作团队。
• 预算有限的创业初期产品小团队或学生群体。
• 金融 / 政务 / 医疗等对数据合规敏感，需私有化部署的企业。
• 需要长期维护设计系统、高频进行“设计转代码”交付的团队。

❌ 需谨慎使用

• 重度依赖海量 Figma 专属插件或商业模板团队（迁移成本高）。
• 弱网环境或低配电脑用户：网页端首屏加载偏大，流畅度受设备影响明显。
• 追求极致多人实时协同性能的团队：当前同步效率在极端复杂场景下仍略逊于 Figma。

四、免费与付费定价方案

👉 官方定价页：https://penpot.app/pricing/self-host

1. 云端 SaaS 版（官方托管）

适合希望无需运维，直接使用稳定服务的个人或小团队用户。

• Free (永久免费)
• ✅ 无限用户数、无限文件数量、全量设计功能。
• ✅ 无人数与工程限制支持。
• ⚠️ 限制：历史版本存储周期较短，无法提供专属客服及官方活动折扣。
• Unlimited ($7 / 用户/月)
• 🔒 解锁更长周期的文件版本回溯。
• 🌟 优先获取新功能更新权限、参与官方社区活动享5折优惠。
• 💾 扩容存储容量，月度账单上限为 $175（不限人数）。

2. 自托管版（本地私有部署）

适合拥有服务器资源，要求数据完全掌握在自己手中的企业用户。基于 Docker/K8s 一键拉起服务。

• Professional (永久免费)
• ✅ 包含所有设计与协作功能。
• ✅ 不限制文件与人数，享有社区技术支持。
• ❌ 限制：无 SSO、审计日志等多组织管理权限，需自行维护运维成本。
• Enterprise ($950 / 月 固定费用)
• 🔐 包含多组织架构管理及精细化权限控制。
• ✅ 支持 SSO单点登录与详细的审计日志记录。
• 🛡️ 提供 180 天文件恢复服务、官方技术支持及插件白名单管控（含 AI代理）。

五、快速使用步骤

方式 A：云端在线模式（零部署，新手首选）

1. 注册登录：打开 https://design.penpot.app，通过邮箱完成账号注册。
2. 新建项目：创建 Workspace（团队空间），随后建立新项目或画布。
3. 开始设计：使用 / 快捷插入组件，利用 Flex/Grid进行绘图布局。
4. 获取代码：选中任意图层，打开右侧 Inspect 面板复制 CSS/HTML/SVG 片段。
5. 分享协作：点击右上角生成链接即可邀请团队成员共同编辑。

方式 B：本地自托管模式（企业 / 隐私需求）

1. 准备环境：安装 Docker 及 docker-compose 工具。
2. 启动服务：拉取官方配置，执行命令 docker-compose up -d 即可自动拉起后台服务。
3. 访问使用：本地浏览器通过指定 IP+9001端口直接访问网页版编辑界面。

六、注意事项

• 🌐 网络痛点：服务器位于海外，国内直连可能存在加载慢、上传卡顿及协同延迟问题。建议刚需用户优化环境或选择自托管方案。
• 🧩 生态短板：目前的第三方插件数量与设计模板远少于 Figma，成熟素材库相对较少。
• ⚡ 性能限制：基于 Web 架构运行，超大文件（如百图层以上）的画布容易出现卡顿现象；低配设备用户体验不佳。
• 💾 免费版数据风险：云端 Free版历史版本保存周期短，若操作失误导致误删，找回难度较大。重要工程建议付费或定期本地备份。
• 🛠️ 自托管维护成本：免费自托管无官方售后支持，服务器的搭建、日常运维及系统升级均需团队自行负责。
• 🔀 文件兼容性：导入 Figma 源文件时，部分复杂插件效果会丢失；导出格式仅包含 SVG/CSS/HTML，不支持专有私有格式迁移。
• 💳 支付限制：云端订阅服务目前主要面向海外信用卡用户，国内微信/支付宝直接支付渠道暂未打通。
• 👥 协同体验差异：多人同时编辑时，复杂页面的冲突概率高于 Figma。建议团队在复杂页面上分图层进行协作管理。