前言我对设计协作工具的要求一直不只是“能不能画 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 和普通在线设计工具最值得区分的一点是它同时强调设计协作 开放标准 自托管。设计过程中会尽量贴近SVGCSSHTML。这让开发者查看设计稿时不只是“看图”还可以更直接地理解样式和结构。2. MCP 把 Penpot 从设计工具继续往 AI 工作台推了一步Penpot 还有一个很值得折腾的方向Penpot MCP Server。它可以让支持 MCP 的 AI 工具连接到 Penpot。当前流程里提到的包括CodexCursorClaude CodeVS 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-macosPenpot 官方支持 Docker Compose。但 Compose 配置内容较多所以这里使用整理好的一键部署脚本来降低第一次部署的操作量。8. PowerShell 一键部署 PenpotWindows 按Win X选择终端管理员执行irmhttps://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指向3389TCPwebsite指向8080HTTP。这里可以编辑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再次执行irmhttps://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 也能进来做实际操作而部署和访问方式又掌握在自己手里。
