今年有一件事让我有点触动：一个开源设计工具，在没有 Adobe 收购、没有大厂背书的情况下，月活悄悄突破了 80 万，GitHub 上收获 54,000+ Star。

这个工具叫 Penpot。

---

为什么现在聊 Penpot？

Figma 被 Adobe 收购的事儿从谈判到告吹，拖了两年。但这段时间里，很多团队已经开始认真盘算：万一哪天涨价，或者某些功能被切掉，我们有退路吗？

数据安全是另一条线。金融、医疗、政务这些场景，把设计稿放在别人的云上，合规压力很大。设计文件不只是「几个 PNG」，里面有产品结构、用户流程、品牌视觉——这些东西要是泄了，麻烦不小。

Penpot 的出现，正好踩在这两个痛点上。

它完全开源（MPL-2.0 协议），支持 Docker 自托管，数据落在你自己的服务器上。2026 年 6 月 24 日刚发布了 2.16.1 版本，是目前最成熟的开源设计平台选项。

---

它到底能做什么？

先说主干功能，和 Figma 对标的那部分：

• UI 设计与矢量编辑：画板、图层、路径、形状、文本，主流设计工具有的基本都有

• 实时多人协作：光标位置、选区状态实时同步，体验接近 Figma

• 组件与变体系统：Components + Variants，可以把按钮的不同状态、尺寸打包进一个组件管理

• 原型交互：页面跳转、基础交互流程

• Design Tokens：原生支持，不是插件，后面单独说

基础功能覆盖了日常 90% 的设计场景，对大多数团队来说够用。

---

核心差异点：设计即代码

这里是 Penpot 和其他工具最根本的区别，值得细说。

Figma 的文件格式是私有的，开发者拿到设计稿，要自己「翻译」成 CSS。这个过程经常出问题——间距差两个像素、字号对不上、圆角值要猜。

Penpot 的底层是 SVG + 开放标准。它的文件格式本身就是 web 能读懂的东西。检查面板里拿到的不是「参考值」，是真实的 CSS 属性：

/* Penpot 检查面板直接输出 */
width: 320px;
height: 48px;
display: flex;
align-items: center;
gap: 8px;
border-radius: 8px;
background: #2563EB;

而且 Penpot 支持 CSS Grid 和 Flex 布局——你在设计工具里用的 Auto Layout，底下跑的就是真实的 flexbox。开发者拿到设计稿，不用猜布局逻辑，因为那个逻辑本来就是 CSS 的。

这对前端开发者来说省事很多，也减少了「这个对不上，改吗」的来回扯皮。

---

Design Tokens：设计系统的单一事实来源

Penpot 的 Design Tokens 是原生功能，不依赖第三方插件。

简单说，Design Tokens 就是把「主色调是 #2563EB」、「主要字号是 16px」、「默认间距是 8px」这些设计决策，用变量的形式存下来，设计师和开发者共用同一份。设计改了，变量改一处，全局同步。

2.16 版本把 Tokens 直接集成进了设计侧边栏。以前要开专门的 Tokens 面板操作，现在在尺寸、间距、字体行高这些数值输入框旁边，直接有 Token 选择器。数值和 Token 之间，点一下就能绑定或解绑。

对维护大型设计系统的团队来说，这减少了很多来回切换的摩擦。

---

MCP 服务器：AI 能直接操作你的设计文件

这是 Penpot 2025 年底上线的功能，也是我觉得最有意思的部分。

Penpot 实现了 MCP（Model Context Protocol）服务器。简单来说，AI 工具可以直接读取和修改你的 Penpot 设计文件，不需要截图、不需要手动描述，AI 能看到真实的图层结构、Token 绑定、组件关系。

官方给出的工作流是这样的：

1. 你在 Claude Desktop 或 Cursor 里写一段自然语言，比如「检查我的设计 Token 命名是否符合规范」

2. AI 通过 MCP 服务器连接你的 Penpot 文件，读取实际数据

3. AI 返回检查报告，或者直接在文件里做修改

支持的工作流方向有四个：

• 设计 → 代码：AI 根据设计文件生成前端代码

• 代码 → 设计：把现有的 CSS/组件库同步成 Penpot 中的视觉稿

• 设计 → 文档：自动生成设计规范文档

• 设计 → 设计：AI 辅助扩展设计系统，批量生成变体

MCP 服务器同样开源，可以部署在自己的服务器上，不经过第三方云。对数据安全有要求的团队，这一点很关键。

---

2.16 版本：最新的几个改进

WebGL 渲染（Beta）

大型设计系统文件经常卡，几百个画板、几千个图层，滚动和缩放会掉帧。2.16 引入了 WebGL 渲染引擎的可选 Beta，在浏览器设置里开启后，画布渲染走 GPU 加速。官方说法是「更适合复杂的设计系统文件」，这个方向是对的，后续版本应该会继续跟进。

120+ 个改进和修复

这次版本有点「可靠性版本」的意思——70 个 Bug 修复，涉及 Token 系统、图层面板撤销、组件变体、导出剪贴板、查看器等各个角落。很多来自社区报告。

---

自托管：怎么部署？

最简路径是 Docker Compose，官方提供现成的配置文件：

# 下载 docker-compose.yaml
# 然后一行命令启动
docker compose -p penpot -f docker-compose.yaml up -d

默认跑在 localhost:9001。生产环境需要额外配置反向代理和 HTTPS，否则某些浏览器 API（比如剪贴板）会有限制。

依赖组件：PostgreSQL（数据存储）、Redis（缓存）、以及一个导出服务（无头浏览器，保证导出和屏幕显示一致）。

技术栈参考：

• 前端：ClojureScript + React（通过 rumext）

• 后端：Clojure

• 数据库：PostgreSQL + Redis

• 语言分布：Clojure 占 74%，JavaScript 8%，Rust 6%（底层渲染相关）

不想自己搞运维的话，官方云版本 design.penpot.app 免费可用。也有 Elestio 这类一键部署托管方案，据说 3 分钟能跑起来。

---

哪些情况适合用，哪些不适合

适合用的场景：

• 数据合规敏感的行业：金融、医疗、政务，设计资产必须在自己服务器上

• 前后端分离的产品团队：想让设计稿直接「说 CSS 语言」，减少还原偏差

• 预算受限的开源/非营利项目：完全免费，没有席位费

• 需要 API 集成的团队：接 CI/CD、接 Webhook、接自动导出流程

不太适合的场景：

• 重度依赖 Figma 插件生态：Penpot 的插件数量目前远不如 Figma，特定工作流的插件可能没有

• 复杂动画和高保真原型：Figma 在这块更成熟，Penpot 的交互原型相对基础

• 没有运维能力的小团队（要自托管的话）：Docker、数据库备份、SSL 配置，需要一定技术背景

• 超大型文件的高频使用：WebGL 渲染还在 Beta，大文件性能不如 Figma 稳定

---

总结

Penpot 不是「便宜的 Figma 替代品」，它是一个不同方向的选择：用数据主权和设计代码对齐，换掉 SaaS 便利性带来的风险。

如果你的团队对数据安全有硬性要求，或者希望设计师和开发者真正「说同一种语言」，Penpot 值得认真试试——至少可以先注册云版本跑几个项目，感受一下工作流的差异。

项目地址：github.com/penpot/penpot（54K+ Star，280+ 贡献者，持续活跃）

谢谢你阅读我的文章~

我们下期再见！

 PS：本文部分内容由AI辅助创作