前言

Figma这类在线设计平台已经把UI设计、原型和团队协作放进了浏览器，但对于希望自己维护设计环境的个人开发者、小团队或内部项目，也可以选择把设计平台直接部署在自己的服务器中。

Penpot就是其中比较成熟的一套开源方案。它同样通过浏览器完成UI设计、原型和协作，同时支持自托管，可以把应用、数据库和设计资源运行在自己维护的环境中。

这篇文章更值得关注的地方还不只是自托管。Penpot目前已经提供MCP能力，可以让Codex等支持MCP的AI Agent读取当前设计文件，并直接创建、移动、修改画布中的设计元素。本文会先从一个空白页面开始，实际让Codex生成一套包含5个页面的中文移动端学生信息管理系统原型。

AI通过MCP拥有实际修改设计文件的能力，因此MCP地址中的Token应作为敏感凭据保护，重要设计也不建议一次性让Agent进行大范围修改。使用云端AI Agent时，还需要按照对应服务的数据处理规则看待被AI读取的设计内容，自托管Penpot并不等于整个AI处理链路都完全发生在本机。

完成MCP效果测试以后，本文还会在Windows中通过Docker部署Penpot，并使用cpolar为9001端口建立公网入口。由于Penpot的登录、Cookie和资源地址都与公网域名有关，远程使用时除了建立隧道，还需要把Penpot自身的公开访问地址同步修改为最终使用的HTTPS域名。

1 什么是Penpot？

项目地址：https://github.com/penpot/penpot

Penpot 是一款面向设计师和开发者的 开源 UI/UX 设计协作平台。简单理解，它有点像开源版 Figma，可以在浏览器里完成界面设计、原型制作、团队协作和设计交付等工作。

和传统设计工具不同，Penpot 从一开始就更强调 设计与开发协作。它基于 Web 使用，设计过程中会尽量贴近 SVG、CSS、HTML 这些开放标准，开发者在检查设计稿时，可以更直接地看到可用于开发的样式和代码信息。官方也明确把它定位为连接设计与代码工作流的开源设计工具。

除了常规的 UI 设计和团队协作，Penpot 还有一个很值得关注的方向：AI 工作流。官方已经提供了 Penpot MCP Server，可以让 Codex、Cursor、Claude Code、VS Code 等支持 MCP 的 AI 工具连接到 Penpot，让 AI Agent 直接参与设计流程。

通过 MCP，AI 不只是“看设计稿”，还可以读取和操作 Penpot 文件结构，比如页面、图层、组件、样式、Design Tokens 等。也就是说，后续可以让 AI 帮忙生成页面、整理图层、创建组件、调整样式，甚至根据已有设计系统生成新的界面。

简单来说，Penpot 不只是一个开源设计工具，它更像是一个可以自建、可协作、还能接入 AI Agent 的设计工作台。

能力方向	Penpot 可以做什么
UI 设计	绘制页面、线框图、移动端界面和 Web 界面
原型协作	制作交互原型，支持团队在线协作和设计交付
设计系统	管理组件、样式、Design Tokens 和共享库
自托管部署	可以部署到自己的服务器、NAS 或本地环境
开放标准	基于 SVG、CSS、HTML 等 Web 标准，减少私有格式锁定
MCP / AI 工作流	让 Codex、Cursor、Claude Code 等 AI Agent 读取和操作设计文件

2 先看效果：让 Codex 通过 MCP 生成 UI

现在 Figma 也已经支持 MCP，可以让 AI 工具读取设计稿、辅助生成代码。不过从官方文档来看，Figma MCP 会受到 套餐、席位和调用额度 限制：普通 View / Collab 席位每月只有较低的调用额度，桌面版 MCP 也需要付费计划中的 Dev 或 Full seat。

相比之下，Penpot MCP Server 更适合自建和折腾型工作流。它可以连接 Codex、Cursor、Claude Code、VS Code 等支持 MCP 的 AI 工具，让 AI Agent 读取和操作 Penpot 里的 页面、图层、组件、样式和 Design Tokens。

2.1 使用 Codex 调用 Penpot MCP

在正式部署之前，先看一下最终能做到什么效果，这里以制作一个【学生信息管理系统】的移动端H5的UI页面为例，首先需要开启penpot的MCP能力：

接着，复制下面带token的mcp地址替换下面提示词中的mcp链接占位，然后将这段提示词发送给 Codex 或其他支持 MCP 的 AI Agent 工具即可：

我有一个本地 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. 完成后请告诉我创建了哪些画板，并导出首页预览检查一次。

如下图：

此时可以看到打开的设计页面，目前还是空白的：

等待Codex设计，可以看到它已经连接上了MCP，并且还测试了一下：

回到设计页面，也可以看到它成功的创建了一个测试页面：

继续等待Codex，等待了20分钟左右，Codex提示已经完成了，如下图：

回到浏览器的设计页面查看：

可以看到，Codex已经完成了5个页面的设计，并且画的非常漂亮！换做Figma来设计的话，在普通 View / Collab 席位下，应该已经受MCP的调用次数限制而停止了。

3 Windows 一键部署 Penpot

前面已经看到了 Penpot + MCP + Codex 的实际效果，接下来开始部署 Penpot。

在开始之前，需要先确认电脑已经安装并启动 Docker。如果还没有安装 Docker，可以参考这篇教程先完成安装：

Docker 安装教程：https://www.cpolar.com/blog/docker-installation-linux-windows-macos

3.1 使用Docker一键脚本部署

Penpot 官方支持 Docker Compose 部署，不过原始配置文件内容比较多，对于只想快速体验的用户来说，手动下载、修改配置、启动容器还是稍微有点麻烦。

为了简化部署过程，这里直接使用整理好的一键部署脚本。脚本会自动准备 Penpot 所需配置，并通过 Docker Compose 启动相关服务。

Docker安装完成启动后，电脑按【Win+X】键选择【终端（管理员）】打开 PowerShell，执行下面命令：

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

输入回车后，会进入如下图：

选择数字【1】回车，然后按照提示进行自定义配置部署：

等待镜像拉取完成，即可看到部署成功提示：

在浏览器中访问9001端口的这个地址：

可以看到成功访问到了 Penpot 的登录页面，说明本地 Penpot 服务已经启动成功。点击底部的创建账号，创建一个账号便可以进入工作台页面：

4 下载安装cpolar

到这里，Penpot 已经在本地部署完成了，浏览器访问 localhost:9001 就能打开。但这个地址只能在当前电脑上使用，别人无法直接通过互联网访问。

前面效果演示中使用的 https://penpot.cpolar.top，就是通过内网穿透工具 cpolar 将本地 9001 端口映射到公网后得到的访问地址。也就是说，Penpot 实际还是运行在本地 Docker 里，只是通过 cpolar 多了一条外网访问通道。

接下来就来安装 cpolar，并把本地的 Penpot 服务映射成一个公网地址。

4.1 什么是cpolar?

cpolar 是一款内网穿透工具，可以将本地电脑、NAS、服务器中运行的 Web 服务映射到公网，让外部设备也能通过浏览器访问。

比如现在 Penpot 运行在本地的 9001 端口，正常情况下只能在当前电脑或局域网中打开。通过 cpolar 创建 HTTP 隧道后，就可以生成一个公网访问地址，在外网也能访问本地部署的 Penpot。

对于没有公网 IP、不想配置路由器端口转发，或者只是想快速临时分享本地服务的用户来说，cpolar 会比较方便。后面我们会用它把本地的 Penpot 服务映射出去，实现远程访问。

4.2 下载安装cpolar

打开cpolar官网的下载页面
点击【立即下载 64-bit】按钮,下载cpoalr的安装包:

下载下来是一个压缩包，解压后执行目录中的应用程序，一路默认安装即可，安装完成后，打开cmd窗口输入如下命令确认安装:

cpolar version

出现如上版本即代表安装成功!

4.3 注册及登录cpolar web ui管理界面

访问cpolar官网，点击免费注册按钮，进行账号注册：

进入到如下的注册页面进行账号注册：
注册完成后,在浏览器中输入如下地址访问 web ui管理界面:

http://127.0.0.1:9200

输入刚才注册好的cpolar账号登录即可进入后台页面:

5 使用cpolar穿透Penpot

刚才已经成功安装并登录了 cpolar，接下来就可以创建 HTTP 隧道，将本地运行在 9001 端口的 Penpot 映射到公网。

cpolar 这里可以有两种使用方式：

- 随机域名方式：创建后会自动生成一个临时公网地址，适合快速测试；
- 固定域名方式：可以绑定固定二级子域名，适合长期访问和分享给团队成员使用。

下面分别演示这两种方式。

5.1 随机域名方式(免费方案)

随机域名方式更适合临时测试或短期使用。使用该方式时，公网访问地址会在一段时间后发生变化，通常不适合长期固定访问。不过它的优点是配置简单、可以免费体验。如果后续需要长期访问 Penpot，或者希望团队成员使用同一个稳定地址，可以继续参考后面的 固定域名方式，访问体验也会更稳定。

点击左侧菜单栏的【隧道管理】，展开进入【隧道列表】页面，页面下默认会有 2 个隧道：

• remoteDesktop隧道，指向3389端口，tcp协议
• website隧道，指向8080端口，http协议（http协议默认会生成2个公网地址，一个是http，另一个https，免去配置ssl证书的繁琐步骤）

点击编辑【website】隧道或创建一条新的隧道，设置一个隧道名称（自定义即可）,协议选择【http】,本地地址填写Penpot的访问端口【9001】，地区这里选择的【China VIP】，最后点击更新：

接着，点击左侧菜单栏的【状态】，进入【在线隧道列表】页面。这里可以看到两条名称为【penpot】的在线隧道，分别对应 http 和 https 协议:

接着，回到PowerShell终端，重新执行一键部署管理脚本：

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

回车后，选择数字【9】，进行设置穿透域名，如下图：

接着，将在线隧道列表显示的公网地址，复制粘贴到终端回车，进行重建容器应用该公网地址，这里以https为例：

提示完成后，在浏览器中打开刚才复制的公网地址（页面如果没出来，可以使用ctrl + f5强制刷新一下）：

可以看到，通过 cpolar 生成的公网地址，已经能够正常打开 Penpot 登录页面。说明本地运行的 Penpot 服务已经成功映射到公网，后续在外部网络中也可以通过这个地址访问。

5.2 固定域名方式

通过前面的配置，我们已经可以使用随机公网地址访问 Penpot。不过随机域名更适合临时测试，地址可能会在一段时间后发生变化。如果后续需要长期访问 Penpot，或者需要把地址分享给团队成员使用，建议配置固定二级子域名。

固定域名配置完成后，访问地址会更加稳定，后续打开 Penpot 时就不需要频繁更换访问链接。

首先，进入 cpolar 官网后台的预留页面：

https://dashboard.cpolar.com/reserved

选择左侧菜单栏的【预留】，找到【保留二级子域名】区域，填写【地区、二级域名、描述】等信息，然后点击【保留】按钮：
这里需要注意：

• 地区：建议选择和前面创建隧道时一致的地区，例如 China VIP
• 二级域名：填写想要使用的名称，例如 penpot
• 描述：可以填写 penpot，方便后续识别

保留成功后，列表中会显示一条已保留的二级子域名记录。

**注意：**这里的二级域名是唯一的，每个账号可用的名称不同，请以自己实际保留成功的二级域名为准。

接着，接着，回到本地 cpolar Web UI 管理界面，点击左侧菜单栏的【隧道管理】，进入【隧道列表】页面，找到前面创建的 penpot 隧道，点击右侧【编辑】按钮:

将域名类型修改为【二级子域名】，并填写刚才在官网后台保留的二级子域名,其他配置保持和前面一致：

• 协议：http
• 本地地址：9001
• 域名类型：二级子域名
• Sub Domain：填写刚才保留的二级域名，例如 penpot
• 地区：选择和保留域名时一致的地区，例如 China VIP

配置完成后，点击【更新】按钮:

更新完成后，点击左侧菜单栏的【状态】，进入【在线隧道列表】页面。这里可以看到 penpot 隧道已经生成了固定的公网访问地址:

接着，回到 PowerShell 终端，再次重新执行 Penpot 一键部署管理脚本：

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

进入菜单后，选择数字【9】，重新设置 Penpot 的穿透域名为刚才固定的公网地址:

回车后，脚本会自动重建 Penpot 容器，并应用新的公网访问地址。等待提示完成后，在浏览器中打开刚才配置的固定域名：

页面可以正常打开，说明固定域名方式已经配置完成。后续访问 Penpot 时，就可以直接使用这个固定的地址啦！

总结

完成以上配置后，Penpot已经运行在Windows本地Docker环境中，并可以通过浏览器进入设计工作台。

本文还实际测试了Penpot MCP与Codex之间的连接。Codex能够读取当前设计上下文，并通过MCP直接在Penpot画布中创建内容，最终从空白页面生成了5个移动端H5界面。这说明MCP已经可以让AI Agent从单纯“读取设计稿”进一步参与实际设计操作，但最终页面的业务逻辑、视觉规范和交互体验仍然需要人工检查。

Penpot采用自托管以后，设计应用、数据库和相关资源可以运行在自己维护的环境中，但这并不意味着所有数据处理都不会离开本机。如果继续使用Codex等云端AI Agent，Agent通过MCP读取的设计上下文仍应按照对应AI服务的数据规则处理。

通过cpolar为9001端口建立公网入口后，原本运行在Windows本机的Penpot也可以从其他网络环境访问。Penpot对外使用时还需要同步设置正确的公网URI，并优先使用HTTPS，同时确认安全Cookie、账号注册、邮件验证以及实例Secret等公网部署配置已经按照实际环境调整。

固定二级子域名的主要价值，是让Penpot可以长期使用同一个公网URI，减少随机地址变化以后反复修改应用配置。固定域名本身并不能保证服务持续在线，Windows、Docker、Penpot、cpolar和本地网络仍然需要保持正常运行。

如果准备把这套环境作为长期团队设计平台，还应继续完善版本更新、数据库与Assets备份、账号权限以及安全配置。从本地部署、AI Agent直接操作画布，到公网远程访问，本文完成了一套Penpot自托管与MCP设计工作流的基础实践。