Penpot – 开源的设计与代码协作平台，多人实时协作

1. Penpot是什么

Penpot是一款开源的设计与代码协作平台，基于SVG、CSS、HTML等开放Web标准构建，完全在浏览器中运行，无需安装任何桌面客户端。它提供了从UI设计、交互原型制作到代码导出的全流程能力，核心定位是消除设计与开发之间的“翻译损耗”，让设计文件直接输出可用代码。平台支持多人实时协作、W3C Design Tokens管理和MCP Server集成，使AI Agent能够直接读取设计文件的真实组件、Tokens与图层结构，而非仅依赖截图进行理解。通过Inspect模式，开发者可一键复制原生代码，真正实现“设计即代码”的理念。

技术定位与领域： Penpot属于UI/UX设计工具领域，但其独特之处在于它并非传统意义上的“设计软件”，而是一个以Web标准（SVG、CSS、HTML）为底层表达的设计协作平台。它打破了设计工具与前端开发之间的壁垒，让设计稿本身就成为可被机器和人类共同解读的结构化数据。这在设计工具领域是一个颠覆性的定位，它直接挑战了Figma等闭源商业工具的封闭生态。

研发背景： Penpot由西班牙公司Kaleidos Open Source开发并维护，该公司专注于开源软件和设计工具。其研发动机源于对现有设计工具（如Figma）的“供应商锁定”和数据主权问题的担忧。Kaleidos团队希望打造一个完全开放、基于标准、可私有化部署的设计工具，让企业和设计师真正拥有自己的设计数据，并实现设计与开发的深度融合。项目在GitHub上已获得超过53.5k Star，是当前最活跃的开源设计工具之一。

核心价值： Penpot的核心价值在于解决了设计工具领域的两个根本性问题：一是数据封闭与供应商锁定，传统工具使用私有格式，用户无法自由迁移数据；二是设计与开发脱节，设计师与开发者之间需要反复沟通和手动还原。Penpot通过开放标准（SVG/CSS/HTML）和自托管能力，让用户完全掌控数据；通过Inspect模式直接输出可用代码，大幅缩短设计到开发的交付周期。此外，通过原生支持W3C Design Tokens和MCP Server，Penpot为AI驱动的设计-代码工作流提供了基础设施。

技术特点： Penpot的技术优势在于其“设计即代码”的核心理念。它从创作之初就使用Web标准表达设计，确保输出代码与视觉完全一致。原生支持CSS Grid与Flex布局，实现所见即所得。同时，它是业内首个完整支持W3C Design Tokens标准的设计工具，并内置MCP Server，让AI Agent能够双向读写设计文件的结构化数据，实现自动化设计与代码生成。

2. 主要功能

• 设计即代码（Inspect模式）： 这是Penpot最核心的差异化功能。选中设计稿中的任意元素，即可在Inspect面板中直接查看并复制对应的SVG、CSS或HTML代码。开发者无需手动测量间距、颜色或字体大小，也无需猜测实现方式，因为输出的代码直接基于设计稿的真实Web布局属性。这从根本上消除了设计-开发协作中的“翻译损耗”，将交付效率提升一个数量级。

• 原生CSS Grid与Flex布局支持： Penpot并非将设计稿渲染为位图，而是基于真实的Web布局引擎进行渲染。设计师在设计时使用的Grid和Flexbox布局规则，与浏览器中的渲染结果完全一致。这意味着设计稿的“视觉表现”与“实现代码”之间不存在任何偏差，真正做到了所见即所得。对于前端开发者而言，这极大地降低了还原难度，减少了返工。

• W3C Design Tokens管理： Penpot是业内首个完整支持W3C Design Tokens标准的设计工具。设计师可以在Tokens面板中定义颜色、字号、间距、阴影等设计变量，并将其绑定到设计元素上。当Tokens值发生变更时，所有引用该Tokens的元素将自动同步更新。这为构建可规模化维护的设计系统提供了标准化、自动化的基础设施，避免了手动维护变量带来的混乱和错误。

• 组件与变体系统： Penpot支持创建可复用的设计组件，并为每个组件定义多种状态变体（如悬停、点击、禁用等）。这允许设计师构建可扩展的设计系统，组件库中的任何修改都会自动同步到所有实例中。变体系统则让单一组件能够承载多种交互状态，简化了原型制作和设计系统管理。

• MCP Server集成： Penpot内置了Model Context Protocol (MCP) 服务器，这是一项面向AI时代的前沿功能。通过MCP Server，AI Agent（如代码生成模型、设计助手）可以直接读取Penpot设计文件的结构化数据，包括组件树、图层层级、Design Tokens值等，而不仅仅是截图或像素信息。这使得AI能够理解设计的逻辑结构，并据此进行精准的代码生成、自动布局调整或样式修改，实现真正的双向设计-代码工作流。

• 多人实时协作： Penpot支持多人同时编辑同一设计文件，所有协作者的操作会实时同步。平台还提供了评论和标注功能，方便团队成员在设计稿上直接进行讨论和反馈。这一协作能力对标Figma等商业工具，但在开源领域独树一帜，为分布式团队提供了高效的设计协作环境。

• 完全开源与自托管： Penpot采用MPL-2.0开源协议，代码完全公开。用户可以通过Docker Compose轻松在自有服务器上部署Penpot，实现数据100%自主可控。这对于金融、政府、医疗等对数据主权和合规性有严格要求的行业至关重要，它们可以在内网环境中使用Penpot，设计稿永不离开本地网络。

3. 如何使用

Penpot提供了两种使用方式：SaaS在线服务和Docker自托管部署，分别适用于不同场景。

1. SaaS在线使用（快速上手）：

   • 注册账号： 访问 design.penpot.app，使用邮箱注册一个免费账号。无需付费即可使用全部功能。
   • 创建项目： 登录后，在仪表盘新建一个团队或项目，点击进入设计画布。画布界面与主流设计工具类似，上手门槛较低。
   • 设计界面： 利用左侧工具栏绘制形状、添加文本、创建组件。右侧面板用于调整元素的属性、布局和样式。支持多页面管理，适合制作复杂原型。
   • 管理Tokens： 在Tokens面板中定义颜色、字体、间距等设计变量。定义完成后，可以直接将这些Tokens绑定到设计元素上，实现全局样式统一管理。
   • 开启协作： 邀请团队成员加入项目。多人可以同时编辑同一个设计文件，所有修改实时同步。支持在元素上添加评论，用于设计评审。
   • 导出代码： 选中任意设计元素，打开Inspect面板。面板中会显示该元素的SVG、CSS和HTML代码。点击复制按钮即可将代码直接粘贴到开发项目中。

2. Docker自托管部署（数据自主可控）：

   • 环境要求： 需要一台安装了Docker和Docker Compose的服务器（Linux或macOS）。建议服务器至少拥有4GB内存和2核CPU。需要开放9001端口用于Web访问。
   • 下载配置： 在服务器终端执行 curl 命令获取官方提供的 docker-compose.yaml 文件。具体命令可从Penpot官方文档获取。
   • 启动服务： 运行 docker compose up -d 命令，Docker会自动拉取所需的镜像并启动Penpot的后端服务（包括数据库、存储和Web服务器）。启动过程通常需要几分钟。
   • 注册管理员： 在初始化页面创建第一个管理员账号。之后即可在内网环境中独立使用Penpot的全部功能，所有设计数据都存储在自有服务器上。

注意事项： SaaS版本适合个人用户、小型团队或快速原型验证。自托管版本适合对数据安全有严格要求的企业。自托管部署后，建议定期备份Docker数据卷，以防数据丢失。同时，Penpot的更新迭代较快，建议关注官方GitHub仓库的Release页面，及时升级服务版本。

4. 优缺点分析

5. 同类工具对比

选型建议：

对于注重数据主权和合规性的企业（如金融、政务、医疗），Penpot是唯一的选择。其自托管能力确保设计数据永不离开内网，且基于开放标准，不存在供应商锁定风险。对于预算有限的开源社区和教育机构，Penpot的零成本全功能特性也极具吸引力。

如果团队追求极致的设计协作体验和丰富的插件生态，且对数据主权要求不高，Figma仍然是行业标杆。其成熟的实时协作引擎、庞大的社区和丰富的插件资源，使其在大型商业设计团队中占据主导地位。对于仅使用macOS的小型设计团队，Sketch仍是一个选择，但其协作能力和跨平台支持已明显落后于Penpot和Figma。

6. 编辑点评

Penpot的出现，标志着设计工具领域正在经历一次重要的范式转变。它不再满足于仅仅作为“设计软件”，而是试图成为设计与开发之间的“通用语言”和“协作基础设施”。从技术创新性来看，Penpot的“设计即代码”理念和基于Web标准的底层架构，是对Figma等闭源工具封闭生态的一次有力挑战。它率先原生支持W3C Design Tokens标准，并内置MCP Server，为AI驱动的设计-代码工作流铺平了道路，这体现了其前瞻性的技术视野。

从实用价值分析，Penpot的核心价值在于解决了设计-开发协作中的“翻译损耗”问题。Inspect模式让开发者直接获取可用代码，Design Tokens让设计系统可规模化维护，自托管能力让数据主权回归用户。这些功能对于追求高效率、高合规性的团队来说，具有极高的实用价值。虽然其插件生态和高级原型能力尚不及Figma，但对于绝大多数企业级UI设计需求，Penpot已经足够胜任。

适用人群方面，Penpot特别适合：1）对数据安全有严格要求的金融、政务、医疗行业设计团队；2）致力于建设标准化设计系统的中大型企业；3）希望将AI引入设计-开发工作流的技术团队；4）预算有限的初创公司、开源社区和教育机构。

未来发展潜力巨大。随着AI Agent技术的成熟，Penpot的MCP Server能力将成为其最核心的竞争优势。未来，设计师可能只需在Penpot中勾勒出布局需求，AI即可自动填充组件、生成代码，实现真正的“设计即代码”自动化。同时，随着开源社区的壮大，插件生态的短板也有望逐步补齐。

7. 应用场景

• 企业级设计系统建设： 企业可通过Penpot的Design Tokens和组件系统，构建跨产品、跨平台的一致性设计规范。设计变量（颜色、间距、字体）在Tokens中统一管理，组件库支持变体和状态，确保所有产品线视觉统一。当品牌更新时，只需修改Tokens值，所有引用自动更新，极大降低维护成本。

• 金融与政务UI开发： 金融、政务等行业对数据安全有极高要求，设计稿通常不允许上传至公有云。Penpot的Docker自托管部署让这些机构可以在内网环境中独立运行设计平台，设计数据和项目文件永不离开本地网络，满足数据主权和合规性要求。

• AI驱动的前端开发： 开发者可以结合Penpot的MCP Server与AI代码生成模型（如GPT-4、Claude），让AI直接读取Penpot设计稿的结构化数据（组件树、Tokens、布局）。AI据此生成精准的前端代码，实现“设计稿进，代码出”的自动化工作流，大幅缩短从设计到上线的周期。

• 开源社区与教育机构： 开源项目团队和学校可以零成本使用Penpot的全部功能，无需支付任何订阅费用。教育机构可用其进行UI/UX设计教学，开源社区可用其进行项目界面设计，并利用协作功能实现分布式团队的同步创作。

• 设计-开发无缝协作： 设计师在Penpot中完成界面设计后，开发者无需等待标注或切图。直接打开Inspect面板，即可复制元素的CSS、HTML代码。设计师调整布局后，开发者查看的代码也会实时更新，实现了设计-开发的“同源同步”，显著减少沟通成本和返工。

8. 常见问题FAQ

Q：Penpot与Figma相比，最大的优势是什么？
A：Penpot最大的优势在于“设计即代码”的理念和完全开源。它基于Web标准（SVG/CSS/HTML），Inspect模式可直接输出可用代码，消除设计-开发翻译损耗。同时，MPL-2.0协议允许私有化部署，用户完全掌控数据，没有供应商锁定风险。而Figma是闭源商业软件，文件格式私有，数据存储在Figma云端。

Q：Penpot是否支持离线使用？
A：Penpot的SaaS版本需要网络连接才能使用。但通过Docker自托管部署，用户可以在内网环境中独立运行Penpot，相当于实现了“离线”使用（无需访问公网）。设计文件存储在自有服务器上，不受外部网络影响。

Q：Penpot的MCP Server如何与AI集成？
A：MCP Server是一个开放协议，AI Agent可以通过该协议读取Penpot设计文件的结构化数据，包括组件树、图层层级、Design Tokens值等。开发者可以编写自定义的AI Agent，通过MCP接口获取设计信息，并据此生成代码或自动调整设计。具体实现需要参考Penpot官方文档和MCP协议规范。

Q：Penpot的设计文件能否导入Figma或Sketch？
A：由于Penpot使用SVG/CSS/HTML等开放标准，而Figma和Sketch使用私有格式，直接导入存在兼容性问题。但理论上，可以将Penpot中的元素导出为SVG或PDF格式，再导入到Figma/Sketch中，但这会丢失图层结构、组件关系和Tokens信息。反之亦然。因此，建议团队统一使用Penpot，以充分发挥其开放标准的优势。

Q：Penpot的实时协作性能如何？是否支持大量协作者？
A：Penpot支持多人实时协作，性能在中小型团队（10-20人）中表现良好。但在大型团队（50人以上）同时编辑复杂文件时，性能可能不如Figma成熟。建议在自托管部署时，根据团队规模配置足够的服务器资源（CPU、内存、带宽），以优化协作体验。

Q：Penpot的插件生态如何？能否满足高级需求？
A：Penpot的插件生态尚处于早期阶段，插件数量和质量不及Figma。目前官方提供了一些基础插件，社区也在逐步贡献。对于高级需求（如数据可视化、高级图表、批量处理），可能需要开发者自行编写插件或使用外部工具配合。Penpot的API文档提供了插件开发指南。

9. 项目地址

• 项目官网： https://penpot.app/
• GitHub仓库： https://github.com/penpot/penpot
• 在线服务地址： https://design.penpot.app/