前言

设计工具正在发生一个很明显的变化：AI 不再只是站在设计稿外面给建议，而是开始真正进入画布。

Penpot 就很适合拿来观察这件事。它本身是一套开源的 UI/UX 设计协作平台，可以在浏览器里完成界面、原型、组件和设计系统管理；通过现在提供的 MCP Server，又可以把 Codex、Cursor、Claude Code 等 AI Agent 接进来，让模型读取当前设计文件，并进一步创建页面、文本、图层、组件和样式。

本文会先实际做一次测试：在空白 Penpot 文件中给 Codex 一段“学生信息管理系统”的需求，让它通过 MCP 直接生成 5 个可编辑的移动端页面，而不是只返回一份设计建议。

随后再回到部署本身，在 Windows 的 Docker 环境中运行 Penpot，并通过 cpolar 给本地 9001 服务增加公网访问入口和固定二级子域名。

所以这篇想验证的其实是两件事：Penpot 能不能成为一套自己维护的设计平台，以及 AI Agent 现在到底能不能从“看懂设计稿”继续走到“直接参与设计”。

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 最值得关注的已经不是“它像不像 Figma”。

单纯比较画布、组件、原型和协作功能，两边都有各自成熟的工作流；真正让我觉得有变化的，是 MCP 把 AI 工具和设计画布真正连接了起来。

这次 Codex 接入以后，并不是在聊天窗口里给出“首页应该放什么、学生列表怎么排版”的文字方案，而是直接进入 Penpot 文件，创建了多个实际页面和可编辑元素。这种工作方式意味着 AI 与设计工具之间正在从“参考关系”变成“操作关系”。

Penpot 又多了一层自托管属性。通过 cpolar 给本地实例增加远程入口以后，设计团队仍然可以从其他网络访问自己的 Penpot，而设计文件、服务环境以及 MCP 的接入方式则可以由自己管理。

不过 MCP Key 必须当成密码一样保护，公网开放 Penpot 后也应该认真处理账户和访问权限。AI 能够操作设计稿，本身也意味着它获得了更高的操作能力。

因此，与其简单把 Penpot 叫做“免费 Figma”，我更愿意把它看成另一条路线：开源、自托管、基于开放标准，同时主动把 AI Agent 引入设计工作流。

这可能比“多一个 Figma 替代品”更值得关注。