开源版 Figma 真来了：Penpot 本地部署，外网也能访问
GitHub: https://github.com/penpot/penpot
项目定位: 开源 UI/UX 设计协作平台（类 Figma）
协议: MPL-2.0
部署方式: Docker Compose（Windows/Linux/macOS）
一、为什么需要开源版 Figma？
提到设计协作工具，Figma 几乎已经成了很多人的默认选择。浏览器打开就能画 UI、做原型、团队协作，设计师和开发之间的沟通也方便了很多。
但对一些个人开发者、小团队，或者内部项目来说，Figma 也有一些绕不开的顾虑：
- 设计稿放在云端，数据不在自己手里
- 团队成员多了以后，账号和订阅成本也会变成长期支出
- 尤其是内部系统、客户项目、产品原型这类资料，很多时候还是希望能放在自己的环境里管理
有没有一种工具，既能像 Figma 一样做 UI 设计、原型和团队协作，数据也放在自己手里？
Penpot 就是这样一个很值得关注的开源项目。它支持 UI 设计、交互原型、团队协作和设计系统管理，也支持自托管，可以搭建在自己的服务器、NAS 或本地环境中。
二、什么是 Penpot？
Penpot 是一款面向设计师和开发者的开源 UI/UX 设计协作平台。简单理解，它有点像开源版 Figma，可以在浏览器里完成界面设计、原型制作、团队协作和设计交付等工作。
和传统设计工具不同，Penpot 从一开始就更强调设计与开发协作。它基于 Web 使用，设计过程中会尽量贴近 SVG、CSS、HTML 这些开放标准，开发者在检查设计稿时，可以更直接地看到可用于开发的样式和代码信息。官方也明确把它定位为连接设计与代码工作流的开源设计工具。
三、AI 工作流：Penpot MCP Server
除了常规的 UI 设计和团队协作，Penpot 还有一个很值得关注的方向：AI 工作流。
官方已经提供了 Penpot MCP Server，可以让 Codex、Cursor、Claude Code、VS Code 等支持 MCP 的 AI 工具连接到 Penpot，让 AI Agent 直接参与设计流程。
通过 MCP，AI 不只是"看设计稿"，还可以读取和操作 Penpot 文件结构，比如：
- 📄 页面、图层、组件、样式
- 🎨 Design Tokens
- 🧩 读取和操作设计文件
也就是说，后续可以让 AI 帮忙生成页面、整理图层、创建组件、调整样式，甚至根据已有设计系统生成新的界面。
Figma MCP vs Penpot MCP
| 对比项 | Figma MCP | Penpot MCP |
|---|---|---|
| 调用限制 | 普通 View/Collab 席位每月有调用额度限制 | 无调用限制 |
| 部署方式 | 云端，需付费计划 | 自建，本地 Docker 部署 |
| 适用场景 | 商业团队 | 个人开发者、小团队、内部项目 |
使用示例：让 Codex 通过 MCP 生成 UI
以制作一个「学生信息管理系统」的移动端 H5 UI 页面为例：
- 在 Penpot 中启用 MCP
- 复制带 token 的 MCP 地址
- 将提示词发送给 Codex 或其他支持 MCP 的 AI Agent 工具
我有一个本地 Penpot 实例，已经启用了 MCP。
MCP 地址如下，请把它当作敏感 token，不要在回答中复述。
请连接这个 Penpot MCP，并在我当前打开的 Penpot 文件和当前页面里，
设计一套"移动端 H5 学生信息管理系统"原型。
要求：
- 创建 5 个移动端页面，尺寸 375×812
- 首页/数据概览、新增或编辑学生
- 所有页面内容必须使用中文
- 页面风格：清爽、现代、适合学校教务/班主任使用
- 每个页面都要包含真实业务信息
- 元素需要可编辑，尽量用 Penpot 原生形状和文本创建
等待约 20 分钟，Codex 就能完成 5 个页面的设计，而且画得非常漂亮！
四、核心功能
| 功能 | 说明 |
|---|---|
| 🎨 UI 设计 | 绘制页面、线框图、移动端界面和 Web 界面 |
| 🖱️ 交互原型 | 制作交互原型，支持团队在线协作和设计交付 |
| 📦 设计系统 | 管理组件、样式、Design Tokens 和共享库 |
| 🤖 AI 工作流 | MCP Server 让 Codex、Cursor、Claude Code 等 AI Agent 读取和操作设计文件 |
| 🏠 自托管 | 可部署到自己的服务器、NAS 或本地环境 |
| 🔓 开放标准 | 基于 SVG、CSS、HTML 等 Web 标准，减少私有格式锁定 |
五、本地部署（Docker）
Penpot 官方支持 Docker Compose 部署。对于 Windows 用户，可以使用一键部署脚本。
前置条件
- 安装并启动 Docker
一键部署（Windows）
# 打开 PowerShell（管理员），执行：
irm https://gitee.com/jun-wan/script/raw/master/penpot_deploy/deploy-penpot.ps1 | iex
# 选择数字【1】回车，按照提示进行自定义配置部署
# 等待镜像拉取完成
访问
部署成功后，在浏览器中访问：
http://localhost:9001
可以看到 Penpot 的登录页面。点击底部的「创建账号」，创建一个账号便可以进入工作台页面。
六、外网访问：cpolar 内网穿透
本地部署的 Penpot 只能在当前电脑或局域网中访问。如果需要外网访问，可以使用 cpolar 内网穿透工具。
什么是 cpolar？
cpolar 是一款内网穿透工具，可以将本地电脑、NAS、服务器中运行的 Web 服务映射到公网，让外部设备也能通过浏览器访问。
安装 cpolar
- 访问 https://www.cpolar.com/download
- 下载 64-bit 安装包
- 解压后执行安装程序，一路默认安装
- 打开 cmd 验证安装：
cpolar version
注册登录
- 访问 https://www.cpolar.com/ 注册账号
- 浏览器访问 http://127.0.0.1:9200 登录管理界面
创建隧道
有两种方式：
方式一：随机域名（免费，适合临时测试）
- 进入【隧道管理】→【隧道列表】
- 编辑或创建隧道，设置本地端口为
9001 - 更新后在【在线隧道列表】查看公网地址
方式二：固定域名（适合长期使用）
- 在 cpolar 官网后台预留二级子域名：https://dashboard.cpolar.com/reserved
- 在本地管理界面将隧道域名类型修改为「二级子域名」
- 填写保留的二级域名，更新隧道
配置完成后，浏览器打开公网地址即可访问 Penpot。
七、总结
Penpot 不只是简单的 "Figma 平替"，而是一个更适合自建和开放工作流的设计平台：
- 🏠 自托管更灵活：可部署在本地电脑、NAS 或服务器中，适合个人开发者、小团队以及内部项目使用
- 🤝 协作能力完整：支持 UI 设计、原型制作、团队协作、设计系统管理，也可以通过 MCP 接入 Codex、Cursor、Claude Code 等 AI 工具
- 🌐 远程访问更方便：配合 cpolar 后，即使没有公网 IP，也可以通过公网地址访问本地 Penpot
对于希望掌握数据、降低工具成本，并尝试 AI Agent 参与设计流程的用户来说，Penpot + cpolar 是一个很值得尝试的组合。
八、源码地址
- GitHub: https://github.com/penpot/penpot
- Docker 部署: https://github.com/penpot/penpot/blob/main/docker/README.md
- MCP Server: https://github.com/penpot/penpot-mcp
- 一键部署脚本: https://gitee.com/jun-wan/script/tree/master/penpot_deploy
综合整理自微信公众号。