前言
设计工具正在出现一个明显转向：AI 不再只是站在画布外给建议，而是真正走进了画布内部。
Penpot 很适合作为观察这一现象的样本。它本身就是一套开源的 UI/UX 设计协作平台，能在浏览器里完成界面、原型、组件和设计系统管理；再借由官方提供的 MCP Server，可以把 Codex、Cursor、Claude Code 这类 Agent 接进来，让模型直接读取设计文件，进而创建页面、文本、图层和组件。
本文先做一次实测：在空白 Penpot 文件里，给 Codex 一段“学生信息管理系统”的需求，让它通过 MCP 直接产出 5 个可编辑的移动端页面，而不只是返回一份设计建议。
随后回到部署本身：在 Windows 的 Docker 环境里跑起 Penpot，并用 cpolar 给本地 9001 服务加上公网入口与固定二级子域名。
这篇文章真正想验证两件事：Penpot 能否成为一套可由自己维护的设计平台，以及 AI Agent 是否已经能从“看懂设计稿”走到“直接参与设计”。
1 什么是Penpot？
项目地址：
Penpot 是面向设计师与开发者的开源 UI/UX 设计协作平台，说白了就像开源版 Figma，能在浏览器里做界面设计、原型、团队协作与设计交付。
与很多传统设计工具不同，Penpot 从立项起就更强调设计与开发的协作。
除了常规 UI 设计与团队协作，Penpot 还有一个值得关注的方向：AI 工作流。官方已提供 Penpot MCP Server，可让 Codex、Cursor、Claude Code、VS Code 等支持 MCP 的 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 更适合自建与折腾。
相比之下，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 分钟后它提示已完成：
回到浏览器里的设计页面查看：
换成 Figma 来设计，在普通 View/Collab 席位下，大概率已经被 MCP 调用次数卡住、停摆了。
3 Windows 一键部署 Penpot
既然已经看到 Penpot + MCP + Codex 的实际效果，接下来就动手部署 Penpot。开始之前，先确认电脑装好并启动了 Docker。
开始之前，先确认电脑已安装并启动 Docker。若还没装，可参考这篇教程先完成安装：
Docker 安装教程：
3.1 使用Docker一键脚本部署
Penpot 官方支持 Docker Compose，但原始配置偏多。对只想快速体验的人，手动下载、改配置、起容器还是有点麻烦，所以这里直接用整理好的一键脚本。
为了简化部署，这里直接用了整理好的一键脚本：它会自动准备所需配置，再用 Docker Compose 拉起相关服务。
Docker 安装并启动后，按 Win+X 选【终端（管理员）】打开 PowerShell，执行下面命令：
irm | iex
输入回车后，会进入如下图：
选择数字【1】回车，然后按照提示进行自定义配置部署：
等待镜像拉取完成，即可看到部署成功提示：
在浏览器中访问9001端口的这个地址：
可以看到成功打开了 Penpot 登录页，说明本地服务已启动；点底部创建账号，建一个账号就能进入工作台：
4 下载安装cpolar
到这一步，Penpot 已在本地部署完成，浏览器打开 localhost:9001 即可。但这个地址只能在本机或局域网用，人在外面想临时看任务状态、调筛选条件或看最新结果，就访问不到。
前面效果演示中使用的 cpolar 将本地9001` 端口映射到公网后得到的访问地址。也就是说，Penpot 实际还是运行在本地 Docker 里，只是通过 cpolar 多了一条外网访问通道。
接下来安装 cpolar，把本地 Penpot 服务映射成公网地址。
4.1 什么是cpolar?
cpolar 是一款内网穿透工具，能把本地电脑、NAS、服务器上跑的 Web 服务映射到公网，让外部设备也能通过浏览器访问。对没有公网 IP、不想改路由器、只想临时分享本地服务的人来说很方便。
比如 Penpot 跑在本地 9001，通常只能在本机或局域网打开。用 cpolar 建一条 HTTP 隧道，就能生成公网地址，在外网也能访问本地 Penpot。
对于没有公网 IP、不想配置路由器端口转发，或者只是想快速临时分享本地服务的用户来说，cpolar 会比较方便。后面我们会用它把本地的 Penpot 服务映射出去，实现远程访问。
4.2 下载安装cpolar
打开 cpolar 官网的下载页面
下载下来是一个压缩包，解压后执行目录中的应用程序，一路默认安装即可，安装完成后，打开cmd窗口输入如下命令确认安装:
cpolar version
出现如上版本即代表安装成功!
4.3 注册及登录cpolar web ui管理界面
访问cpolar官网，点击免费注册按钮，进行账号注册：
进入到如下的注册页面进行账号注册：
注册完成后,在浏览器中输入如下地址访问 web ui管理界面:
输入刚才注册好的cpolar账号登录即可进入后台页面:
5 使用cpolar穿透Penpot
刚才已经成功安装并登录了 cpolar，接下来就可以创建 HTTP 隧道，将本地运行在 9001 端口的 Penpot 映射到公网。
cpolar 这里有两种用法：
- 随机域名方式 ：创建后会自动生成一个临时公网地址，适合快速测试；
- 固定域名方式 ：可以绑定固定二级子域名，适合长期访问和分享给团队成员使用。
下面分别演示这两种方式。
5.1 随机域名方式(免费方案)
随机域名更适合临时测试或短期使用：公网地址会变化，不适合长期固定访问；但它的优点是配置简单、可以免费体验。若想长期访问或分享给团队，建议用固定二级子域名，体验也更稳定。
点击左侧菜单栏的【隧道管理】，展开进入【隧道列表】页面，页面下默认会有 2 个隧道：
- remoteDesktop隧道，指向3389端口，tcp协议
- website隧道，指向8080端口，http协议（http协议默认会生成2个公网地址，一个是http，另一个https，免去配置ssl证书的繁琐步骤）
点击编辑【website】隧道或创建一条新的隧道，设置一个隧道名称（自定义即可）,协议选择【http】,本地地址填写Penpot的访问端口【9001】，地区这里选择的【China VIP】，最后点击更新：
接着，点击左侧菜单栏的【状态】，进入【在线隧道列表】页面。这里可以看到两条名称为【penpot】的在线隧道，分别对应 http 和 https 协议:
接着，回到PowerShell终端，重新执行一键部署管理脚本：
irm | iex
回车后，选择数字【9】，进行设置穿透域名，如下图：
接着，将在线隧道列表显示的公网地址，复制粘贴到终端回车，进行重建容器应用该公网地址，这里以https为例：
提示完成后，在浏览器中打开刚才复制的公网地址（页面如果没出来，可以使用ctrl + f5强制刷新一下）：
可以看到，通过 cpolar 生成的公网地址，已经能够正常打开 Penpot 登录页面。说明本地运行的 Penpot 服务已经成功映射到公网，后续在外部网络中也可以通过这个地址访问。
5.2 固定域名方式
通过上面的配置，我们已经能用随机公网地址访问 Penpot。不过随机地址会不定期变化，一旦更新，原来的书签就失效，每次都要回后台重查。
固定域名配好后，访问地址更稳定，以后打开 Penpot 不用频繁换链接。
首先，进入 cpolar 官网后台的预留页面：
选择左侧菜单栏的【预留】，找到【保留二级子域名】区域，填写【地区、二级域名、描述】等信息，然后点击【保留】按钮：
这里需要注意：
- 地区 ：建议选择和前面创建隧道时一致的地区，例如 China VIP
- 二级域名 ：填写想要使用的名称，例如
penpot - 描述 ：可以填写
penpot，方便后续识别
保留成功后，列表中会显示一条已保留的二级子域名记录。
注意：这里的二级域名是唯一的，每个账号可用的名称不同，请以自己实际保留成功的二级域名为准。
接着，接着，回到本地 cpolar Web UI 管理界面，点击左侧菜单栏的【隧道管理】，进入【隧道列表】页面，找到前面创建的 penpot 隧道，点击右侧【编辑】按钮:
将域名类型修改为【二级子域名】，并填写刚才在官网后台保留的二级子域名,其他配置保持和前面一致：
- 协议 ：http
- 本地地址 ：9001
- 域名类型 ：二级子域名
- Sub Domain ：填写刚才保留的二级域名，例如
penpot - 地区 ：选择和保留域名时一致的地区，例如 China VIP
配置完成后，点击【更新】按钮:
更新完成后，点击左侧菜单栏的【状态】，进入【在线隧道列表】页面。这里可以看到 penpot 隧道已经生成了固定的公网访问地址:
接着，回到 PowerShell 终端，再次重新执行 Penpot 一键部署管理脚本：
irm | 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 替代品”更值得关注。
评论0