笔记 | Figma 之外还有什么选择？用 Penpot 搭一套可自托管、可接 AI 的设计工作台

刷到一个挺有意思的话题，结合自己之前的经验，整理了一下核心要点。

Figma 之外还有什么选择？用 Penpot 搭一套可自托管、可接 AI 的设计开发台

前言

我对设计协作工具的要求一直不只是“能不能画 UI”。真正用到团队项目以后，我更在意三件事：设计稿能不能放在自己控制的环境里，开发能不能直接理解页面里的组件和样式，以及 AI 能不能参与到真实画布，而不是只在聊天框里给一段建议。Penpot 吸引我的地方正好在这三点交叉处：它本身是 Web 化的开源 UI/UX 设计平台，可以自托管，也强调 SVG、CSS、HTML 这类开放标准；再加上 MCP Server 之后，Codex、Cursor、Claude Code 等支持 MCP 的工具还能读取并操作页面、图层、组件和 Design Tokens。我也不希望为了远程协作就重新把整套设计迁到另一家云平台，最好本地和外网只是访问路径不同，设计项目本身仍然留在原来的环境里。

这次我先实际跑了一遍 Penpot + MCP + Codex：让 Codex 在当前文件里创建一套 390 × 844 的移动端 H5 学生信息管理系统，5 个页面大约等待 20 分钟完成。随后再回到 Windows，用 PowerShell 一键脚本通过 Docker Compose 部署 Penpot，本地入口使用 9001。最后安装 cpolar，把 9001 映射到公网；随机域名和固定二级子域名都不是映射完就完成，还需要重新执行部署管理脚本，选择数字 9，把公网地址写回 Penpot 并重建容器。整篇我更关心“设计平台、MCP、AI Agent、公网地址”之间的依赖关系，而不是把 Penpot 轻松写成一个 Figma 平替。

1. Penpot 真正值得看的，不只是“开源版 Figma”

Penpot 是一套面向设计师和开发者的开源 UI/UX 设计协作平台。

它可以在浏览器里完成：

UI 设计；
交互原型；
团队协作；
设计交付；
组件与共享库；
Design Tokens；
自托管部署。

项目地址：

https://github.com/penpot/penpot

对我来说，Penpot 和普通在线设计工具最值得区分的一点，是它同时强调：

设计协作 + 开放标准 + 自托管。

设计过程中会尽量贴近：

SVG；
CSS；
HTML。

这让开发者查看设计稿时，不只是“看图”，还可以更直接地理解样式和结构。

2. MCP 把 Penpot 从设计工具继续往 AI 开发台推了一步

Penpot 还有一个很值得折腾的方向：

Penpot MCP Server。

它可以让支持 MCP 的 AI 工具连接到 Penpot。

当前流程里提到的包括：

Codex；
Cursor；
Claude Code；
VS Code。

AI Agent 连接以后，可以读取和操作：

页面；
图层；
组件；
样式；
Design Tokens。

所以这里的 AI 并不只是“看完设计稿以后给建议”。

更有意思的是：

直接进入设计文件里做操作。

3. 先看一次真实 MCP 操作：让 Codex 直接画 5 个页面

这次演示的是：

移动端 H5 学生信息管理系统。

先在 Penpot 里开启 MCP 能力。

随后复制带 token 的 MCP 地址。

这里要把它当作敏感凭据处理，不应当在聊天回复、日志、代码注释或公开这篇里重复暴露。

当前使用的提示词完整保留如下：

我有一个本地 Penpot 实例，已经启用了 MCP。

MCP 地址如下，请把它当作敏感 token，不要在回答中复述，也不要在日志、代码注释、最终回复中打印：

【把你的 Penpot MCP 地址粘贴到这里】

请连接这个 Penpot MCP，并在我当前打开的 Penpot 文件和当前页面里，设计一套“移动端 H5 学生信息管理系统”原型。

要求：
1. 先调用 MCP 工具确认连接状态，读取 Penpot high_level_overview 和必要的 API 信息。
2. 使用 Penpot MCP 的 execute_code 直接在画布中创建设计稿，不要只给文字方案。
3. 设计 5 个移动端页面，尺寸 390 × 844：
   - 首页 / 数据概览
   - 学生列表
   - 学生详情
   - 新增或编辑学生
   - 成绩统计
4. 所有页面内容必须使用中文，不要用英文替代。
5. 页面风格：清爽、现代、适合学校教务/班主任使用，不要做成营销落地页。
6. 每个页面都要包含真实业务信息，例如学生姓名、学号、班级、手机号、考勤状态、综合分、成绩趋势等。
7. 元素需要可编辑，尽量用 Penpot 原生形状和文本创建。
8. 注意中文字体渲染：先创建一个小的中文文本测试并导出/检查。如果中文不可见，不要改成英文，请改用 Penpot 当前环境可显示的中文字体或其他稳定方案，让中文在画布中真实可见。
9. 完成后请告诉我创建了哪些画板，并导出首页预览检查一次。

这段提示词把任务要求写得比较清楚：

先确认 MCP 连接状态；
使用 execute_code 在画布直接创建设计稿；
一共 5 个页面；
每个页面尺寸 390 × 844；
全部使用中文；
页面偏学校教务 / 班主任使用；
包含学生姓名、学号、班级、手机号、考勤状态、综合分和成绩趋势等真实业务信息；
元素尽量保持可编辑；
先测试中文字体是否能正常显示；
最后导出首页预览再检查一次。

我很喜欢这种写法，因为它不是让 AI “帮我想一个页面”，而是直接规定：

在哪个文件里、用什么工具、做多少画板、什么尺寸、什么业务内容、最后怎么验证。

4. Codex 先连接，再做一个测试页面

刚开始时，Penpot 设计页面还是空白的。

Codex 连接 MCP 以后，先进行连接和能力测试。

回到 Penpot 页面，可以见到已经创建出测试内容。

这一步很重要。

我不会一上来就让 AI 连续画 5 个页面。

先验证：

MCP 能连 → 能写入画布 → 中文能显示 → 元素真的落进当前文件。

再继续做完整设计，失败成本会低很多。

5. 这次 5 个页面大约等待了 20 分钟

继续等待 Codex 完成任务。

当前记录里大约等待了：

20 分钟左右。

完成以后回到 Penpot 浏览器页面。

可以见到 5 个移动端页面已经被创建出来。

这里更值得我关注的不是“AI 画得漂亮”这句评价，而是：

AI Agent 确实通过 MCP 对当前 Penpot 文件进行了实际操作。

至于布局质量、组件复用、细节规范是否达到正式设计系统要求，仍然要继续人工检查。

6. Figma MCP 的对比，只作为当前选择背景

这套使用记录里还比较了 Figma MCP。

当前给出的背景是：

Figma MCP 会受到套餐、席位和调用额度限制；
普通 View / Collab 席位调用额度较低；
桌面版 MCP 还涉及 Dev 或 Full seat 等付费计划要求。

这类套餐和额度政策本身可能调整。

所以我只把它当作这次选择 Penpot 自建 MCP 开发流的背景，而不是把“谁永远更便宜、谁永远限制更多”写成长期不变的结论。

真正能确认的是：

Penpot 这套 MCP 工作流已经在当前环境里跑通。

7. 回到本地部署：先确认 Windows 已经有 Docker

正式部署 Penpot 之前，需要先安装并启动 Docker。

当前参考的 Docker 安装教程是：

https://www.cpolar.com/blog/docker-installation-linux-windows-macos

Penpot 官方支持 Docker Compose。

但 Compose 配置内容较多，所以这里使用整理好的一键部署脚本来降低第一次部署的操作量。

8. PowerShell 一键部署 Penpot

Windows 按：

Win + X

选择：

终端（管理员）

执行：

irm https://gitee.com/jun-wan/script/raw/master/penpot_deploy/deploy-penpot.ps1 | iex

这是一条从远程地址获取并直接执行 PowerShell 脚本的命令。

方便确实方便，但正式运行前，我会先确认脚本来源和内容，而不是只因为“一键部署”就完全跳过检查。

执行以后进入菜单。

选择数字：

1

继续按照提示完成自定义配置。

脚本会准备 Penpot 所需配置，并通过 Docker Compose 拉取和启动相关服务。

等待镜像拉取完成。

9. 本地先确认 9001 能打开

部署完成以后，在浏览器访问 9001 对应的本地 Penpot 页面。

见到登录页面以后，说明本地服务已经启动。

点击底部创建账号，进入 Penpot 工作台。

到这里先确认的是：

Windows Docker → Penpot → 本地 9001 → 浏览器。

如果只在当前电脑或者局域网里使用，已经可以开始设计。

10. 公网访问不是只做一次端口映射

这里最容易忽略的一点，是 Penpot 不只是要让 9001 从公网可达，它还需要明白自己最终对外使用的公网地址。

后面无论使用随机域名还是固定二级子域名，都要再次运行一键部署管理脚本，之后选择菜单里的：

9

把公网地址写回配置并重建容器。

实际依赖关系是：

先拿到公网地址 → 再把公网地址应用到 Penpot → 重建容器 → 最后验证。

11. Windows 安装 cpolar

当前使用的是 Windows 版 cpolar。

从官网下载 64-bit 安装包，解压后运行程序完成安装。

安装后用下面的命令确认版本：

cpolar version

冒出来版本信息以后，再继续进入 Web UI。

12. 注册并登录 cpolar Web UI

先注册 cpolar 账号。

进入注册页面。

注册完成后,在浏览器中输入如下地址访问 web ui管理界面:

注册完成以后，浏览器访问：

http://127.0.0.1:9200

输入账号以后进入后台。

后面的 Penpot 隧道都在这里配置。

13. 先用随机域名联调

cpolar 当前可以走两种方式：

随机域名；
固定二级子域名。

随机域名更适合第一次把公网链路跑通。

当前 cpolar 后台默认会看到两条隧道：

remoteDesktop：指向 3389，TCP；
website：指向 8080，HTTP。

这里可以编辑 website，也可以新建一条隧道。

Penpot 当前需要配置：

隧道名称：自定义，举个例子 penpot
协议：http
本地地址：9001
地区：China VIP

创建或更新后，进入在线隧道列表。

可以看到对应的 HTTP 和 HTTPS 公网地址。

14. 随机公网地址拿到后，还要写回 Penpot

回到 PowerShell，再次执行：

irm https://gitee.com/jun-wan/script/raw/master/penpot_deploy/deploy-penpot.ps1 | iex

进入脚本菜单以后选择：

9

也就是设置穿透域名。

把在线隧道列表里的公网地址复制进去。

当前示例使用 HTTPS 地址。

脚本会重建容器，让 Penpot 应用这个公网地址。

完成以后，再从浏览器打开刚才的公网地址。

如果页面没有及时出来，当前步骤给出的处理方式是：

Ctrl + F5

强制刷新。

Penpot 登录页面能够正常打开。

这时才算随机公网链路真正闭合：

Penpot 本地 9001 → cpolar 公网地址 → 公网地址写回 Penpot → 容器重建 → 外部浏览器。

15. 长期使用再换固定二级子域名

随机地址适合临时测试。

如果以后要长期访问，或者团队成员需要收藏同一个地址，再换固定二级子域名更合适。

进入：

https://dashboard.cpolar.com/reserved

选择：

预留 → 保留二级子域名

这里需要留意：

当前参数说明为：

地区：和前面的隧道保持一致，举个例子 China VIP
二级域名：举个例子 penpot
描述：例如 penpot

二级子域名具有唯一性，最终要以自己账号里实际预留成功的名称为准。

16. 把固定域名配置回 cpolar 隧道

回到 cpolar 本地 Web UI。

进入：

隧道管理 → 隧道列表

找到前面的 penpot 隧道并编辑。

修改：

协议：http
本地地址：9001
域名类型：二级子域名
Sub Domain：填写预留成功的名称，例如 penpot
地区：与预留域名一致，例如 China VIP

更新以后进入在线隧道列表。

这时 penpot 隧道已经生成固定公网地址。

17. 固定域名也要再次写回 Penpot

这一步同样不能省。

回到 PowerShell，再次执行：

irm https://gitee.com/jun-wan/script/raw/master/penpot_deploy/deploy-penpot.ps1 | iex

进入菜单以后仍然选择：

9

把刚才的固定公网地址重新设置为 Penpot 的穿透域名。

脚本会重建 Penpot 容器并应用新地址。

等待完成以后，用固定域名访问。

页面能够正常打开。

到这里才完成：

固定域名 → Penpot 配置 → 重建容器 → 外部访问。

18. Penpot + MCP + cpolar 各自负责什么

把工具拆开以后，职责其实很清楚。

Penpot：
负责 UI/UX 设计、原型、组件、样式、Design Tokens 和协作。

Penpot MCP Server：
把当前设计文件能力提供给支持 MCP 的 AI Agent。

Codex / Cursor / Claude Code：
通过 MCP 读取或操作设计内容。

Docker：
负责运行本地 Penpot 服务。

cpolar：
负责把本地 9001 提供到公网。

它们之间最重要的不是“工具很多”，而是每一层只做自己该做的事情。

总结

这次真正跑通的主线是：

Penpot → 开启 MCP → Codex → execute_code → 5 个 390 × 844 中文 H5 页面 → Windows → Docker → PowerShell 一键脚本 → 菜单 1 → 本地 9001 → cpolar Windows → 127.0.0.1:9200 → China VIP 随机公网 → 再执行脚本 → 菜单 9 → 写入公网地址 → 重建容器 → 固定二级子域名 penpot → 再次菜单 9 → 固定公网访问。

几个细节需要继续留意：

MCP 地址带 token，应按敏感凭据处理，不要直接公开；
这次 Codex 创建 5 个页面大约等待了 20 分钟，这是当前环境记录，不等于所有任务都保持同样速度；
Figma MCP 的席位、套餐和调用额度属于当前材料里的比较背景，政策可能调整，不把它写成永久结论；
一键部署使用远程 PowerShell 脚本，执行前最好先确认来源和脚本内容；
本地 Penpot 使用 9001；
随机公网和固定域名都不是“cpolar 配完即完成”，还要重新运行部署脚本并选择菜单 9，把公网地址写回 Penpot 后重建容器；
cpolar 只负责公网入口，不负责 Penpot 设计逻辑，也不参与 MCP 的设计操作；
固定二级子域名示例继续使用 penpot，地区示例继续使用 China VIP。

对我来说，Penpot 最有意思的地方并不是“终于有一个开源 Figma”，而是它把自托管、开放设计格式和 AI Agent 工作流放到了一起。真正用起来以后，我更愿意把它看成一个设计基础设施：设计师可以画，开发能读，AI 也能进来做实际操作，而部署和访问方式又掌握在自己手里。

📝看风起长林，人类最后的骄傲和标签是创意，AI 时代创意管理比任何时代都重要。一个探索和分享的有趣博主，点击了解！

今天的内容大概就这些，实际开发中大家还会遇到更多细节，欢迎留言分享自己的经验。

小丸子博客