Penpot – 开源设计与代码协作平台，让 AI 直接读设计文件的真实结构

Penpot 是西班牙 Kaleidos 于 2021 年 2 月开源的设计与代码协作平台，主要用于在浏览器里完成 UI 设计与交互原型，支持开放标准文件格式与 MCP 接口，适用于设计交付前端还原、多人在线协作评审与设计系统长期维护等场景。

Penpot 的核心能力

它要解决的是「设计稿到代码之间那道翻译损耗」这件事：稿子是图还是结构，决定了后面能不能自动化。站内的 ToolJet 走的是另一头，把搭界面这件事交给低代码配置。

基于开放标准的文件

设计文件以 SVG、CSS、HTML 这些开放标准为基础，不是私有二进制包。改动可以直接看、可以直接比对，版本管理工具能读得懂差异，不必依赖某一家软件打开。

多人实时协作

浏览器打开就能画，多人同时编辑同一份文件，评论挂在具体位置，原型可以直接连线走查。省掉的是「传文件、合并、再传一版」的往复，评审记录也留在文件里。

Design Tokens 管理

按 W3C Design Tokens 规范管理颜色、字号、间距这类变量，设计侧改一处，代码侧的令牌同步跟着变。设计系统维护里最容易漂的地方，被收进了一个可导出的结构。

MCP 接口给 AI 读结构

官方提供开放的 MCP 服务，AI 拿到的是真实的组件、Tokens 与图层结构，而不是一张截图。对生成式工具，这决定了它输出的是「像这个界面」还是「按这套组件与令牌拼出来」。

Inspect 一键取原生代码

切到 Inspect 模式能直接复制元素的样式与结构代码，供前端落地。设计与实现之间少了一层手工标注，改稿后取一次代码就能对齐。

托管与自托管两条路

官方提供云端版本，也支持自己部署；自托管的 Professional 档按用户数计费为 $0，等于把成本压到只剩服务器与运维。对数据不愿出内网的团队，这是选它的主要理由。

Penpot 与 Figma 的对比

两者都在做在线协作设计，差别在「文件归属」与「能不能自托管」。下表按可核实的结构项并列。

差别集中在三处。部署方式：Figma 只有云端，数据在它那里；Penpot 能自托管，设计文件可以留在自己机房，这是很多企业换工具的第一动因。文件基础：一边是开放标准，一边是自有格式，前者在版本管理与程序化处理上更省事。对外接口：Penpot 的 MCP 服务让 AI 读到结构化的设计数据，Figma 侧要经过官方 API 与插件生态绕一圈。

另外两项差异在生态与迁移上：Figma 的插件与社区规模大得多，模板、教程、第三方工具都更成熟；Penpot 迁移时要把旧文件导进来，复杂组件的还原度需要逐个核对。选型时常被忽略的一点是成本口径：Penpot 自托管的名义费用低，但要自己承担部署、升级与备份的人力，小团队算总账未必更便宜。

如果更关心「设计能力的生成侧」，站内的 Ming-Image-0.1-Design（蚂蚁集团推出的开源视觉设计生成模型）可以对照着看，它解决的是从零生成而不是团队协作。

Penpot 的应用场景与适用人群

它的价值出现在「设计文件需要长期被机器和人共同读取」的地方；只做一次性视觉稿、不涉及交付的场景，用熟悉的工具更顺手：

• 设计交付前端：Inspect 取原生代码，减少标注与口头对齐。
• 设计系统维护：Tokens 集中管理，组件改动能追溯来源。
• 内网或合规要求高的团队：自托管把文件留在自己机房。
• AI 辅助设计：通过 MCP 让智能体读到真实组件而不是截图。
• 教学与协作评审：浏览器打开即用，评论挂在具体位置。

适用人群：适合有前端团队、在意设计文件归属与自动化交付的产品团队，也适合要把设计资产纳入内网管理的组织；只在意外观稿、不涉及代码交付的个人，学习成本不一定划算。想把设计稿直接交给智能体执行，站内的 Page Agent 是一条可接的下游链路。

Penpot 的使用方法

官方给了三条路：云端注册最快，自托管适合内网，MCP 用于接 AI。部署方式与版本说明见 官方仓库。

云端版：注册即可画

1. 在官网点 Sign up for free 注册，创建工作区与团队。
2. 新建文件，从空白画板或模板开始，把团队的设计规范先建成 Tokens。
3. 邀请成员加入，用评论与原型把评审流程走一遍。

自托管：把文件留在自己机房

1. 按官方文档准备服务器与对象存储，用 Docker 编排拉起服务。
2. 配置域名与证书，先在小范围团队内试用，确认字体与导出正常。
3. 升级前先备份数据库与文件存储，版本跨度大时逐个小版本往前走。

接 MCP：让 AI 读到设计结构

1. 在 Penpot 侧开启 MCP 接口，拿到连接方式与凭据。
2. 在智能体一侧注册该服务，确认能列出文件、组件与 Tokens。
3. 先让它读一份已知的设计文件，核对返回的图层结构是否符合预期，再交给它生成。

注意两点：自托管版本的升级节奏由自己掌握，跨多个大版本升级建议先读发布说明；MCP 读到的是结构与变量，不包含设计意图，生成结果仍需人工比对。想看设计交付之后的开发环节如何被 AI 改写，站内的 AI 让代码多了三成，交付却没多 有一组观察；编辑器一侧的接入方式可参考 VS Code 1.137。

Penpot 的项目地址

• 产品官网：https://penpot.app
• GitHub 主仓库：https://github.com/penpot/penpot
• 官方定价页：https://penpot.app/pricing

Penpot 的价格方案

自托管按用户数据档计费：Professional 档为 $0 用户/月，功能不打折，成本落在服务器与运维；Enterprise 档需联系销售，报价按组织规模谈。

云端版另有免费与付费档位，价格随席位与功能变化，以官网定价页当期展示为准。开源协议为 MPL-2.0，允许商用与二次开发，改动文件级代码需按协议回馈。

Penpot 的常见问题