Penpot 开源：4.9 万 Star 的 Figma 平替，设计即代码还能自托管
在数字化转型的今天，设计协作已经成为产品开发流程中不可或缺的一环，但数据隐私、成本控制、工具灵活性这些痛点也越来越突出。
直到我发现了Penpot。这不是一个刚出来的小工具，而是一个在 GitHub 上拥有 4.9 万 Star 的成熟开源项目。
更有意思的是，Penpot 从诞生开始就走了一条和大多数设计工具不一样的路：它从底层就用代码思维来做设计，而不是设计思维来做代码。
这一点，让它在设计师和开发者之间搭起了一座桥梁。
项目简介
简单来说，Penpot是一个开源的全栈设计平台，专门为需要规模化构建数字产品的团队打造。
它支持矢量图形编辑、原型设计、组件库构建，还有一个最核心的特性——代码导出和协作。
但跟 Figma 不同的是，Penpot 是 100% 开源的，而且完全以开放标准为基础：SVG、CSS、HTML、JSON这些就是它的底层语言。这意味着你在 Penpot 里做的设计，本质上就是代码的可视化呈现。
这种设计理念带来的好处是实实在在的：开发者拿到设计稿后，不需要设计师反复标注尺寸、颜色，甚至不需要切图，直接就能从 Penpot 里复制出可用的 CSS、HTML 和 SVG 代码。
而且 Penpot 支持自托管部署，这对那些有数据安全要求的团队来说简直是救星——所有设计数据都存在自己的服务器上，想怎么管就怎么管，完全没有 vendor lock-in。
核心亮点
1、完全自托管
Penpot 是极少数真正支持企业级自托管的设计工具。
你可以用 Docker、Kubernetes、Elestio 等多种方式把它部署在自己的服务器上，所有设计文件、协作数据都存在自己手里，完全符合数据合规要求。
对于金融、医疗、政府这些对数据安全特别敏感的行业来说，这个特性几乎是刚需。
2、设计即代码
这是 Penpot 最让人眼前一亮的地方。
它的 inspect 模式（开发者模式）可以直接从设计稿中提取 SVG、CSS 和 HTML 代码，而且这些代码质量很高，稍微调整一下就能用在生产环境里。
更厉害的是，Penpot 原生支持 CSS Grid 和 Flex 布局。这意味着设计师可以直接在设计阶段就做出响应式的效果，开发者拿到的不只是静态的设计图，而是完整的布局逻辑。
还有设计令牌（Design Tokens）功能，这是保持设计一致性的神器。颜色、字体、间距这些设计变量都可以集中管理，一改全改，再也不用担心某个按钮的颜色在 10 个地方用了 10 个不同的值。
3、实时协作
跟 Figma 一样，Penpot 也支持实时协作。
团队成员可以同时在同一个设计文件里工作，看到彼此的光标位置、编辑内容，沟通效率特别高。
而且 Penpot 的协作功能不只是设计师能用——开发者也可以直接进来查看设计、获取代码，产品经理可以看原型、提反馈，整个团队都在一个平台上工作。
4、插件系统和开放 API
Penpot 有一个完整的插件系统，你可以在 PenpotHub 上找到各种插件来扩展功能。
而且它还有一个强大的开放 API，支持 webhooks，可以跟你现有的开发工具链无缝集成。
最近 Penpot 还推出了 MCP 服务器，这让 AI 工作流也能跟 Penpot 连接起来。
快速使用
Penpot 提供两种使用方式，你可以根据需求选择。
方式一：在线版（最快上手）
这是最简单的方式，直接访问 https://design.penpot.app/ 注册一个账号就能用，完全免费，没有用户数限制。
适合个人设计师、小团队，或者想先试试水的人。
方式二：自托管部署
如果你需要数据自主可控，或者想在内网环境使用，可以用 Docker 部署。需要一点 Docker 基础知识。
下面是一个简单的部署步骤：
- 首先确保你安装了 Docker 和 Docker Compose
- 创建一个部署目录：
mkdir penpot && cd penpot - 创建 docker-compose.yml 文件
- 启动服务：
docker-compose up -d - 打开浏览器访问 http://localhost:9001，注册管理员账号就可以开始用了
写在最后
Penpot 是一个真正把开源精神贯彻到底的设计工具。
它不是简单地模仿 Figma，而是从底层重新思考设计工具应该是什么样子的——开放标准、自托管、设计即代码、深度协作。
如果你正在寻找一个 Figma 的替代品，或者对设计工具的数据安全、成本控制有要求，真的可以试试 Penpot。它可能不是最完美的，但绝对是最有诚意的一个。
GitHub：https://github.com/penpot/penpot
在线使用：https://design.penpot.app