49K 星标！这个开源设计工具可能比你想象的更强大！

在数字化转型的今天，设计协作已经成为产品开发流程中不可或缺的一环，但数据隐私、成本控制、工具灵活性这些痛点也越来越突出。

直到我发现了 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 基础知识。

下面是一个简单的部署步骤：

1. 1. 首先确保你安装了 Docker 和 Docker Compose
2. 2. 创建一个部署目录：mkdir penpot && cd penpot
3. 3. 创建 docker-compose.yml 文件
4. 4. 启动服务：docker-compose up -d
5. 5. 打开浏览器访问 http://localhost:9001，注册管理员账号就可以开始用了

写在最后

Penpot 是一个真正把开源精神贯彻到底的设计工具。

它不是简单地模仿 Figma，而是从底层重新思考设计工具应该是什么样子的——开放标准、自托管、设计即代码、深度协作。

如果你正在寻找一个 Figma 的替代品，或者对设计工具的数据安全、成本控制有要求，真的可以试试 Penpot。它可能不是最完美的，但绝对是最有诚意的一个。

GitHub：https://github.com/penpot/penpot

在线使用：https://design.penpot.app

如果本文对您有帮助，也请帮忙点个 赞👍 + 在看 哈！❤️

在看你就赞赞我！