开源设计工具 Penpot：3 步搭好设计与前端协作流

开源设计工具 Penpot：3 步搭好设计与前端协作流

【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot

设计稿标的是 16px 间距，前端切出来是 14px；改了三轮稿子，工程师拿到的还是第二版的截图——这类事，做过产品协作的人多半都遇到过。Penpot 是一款免费、开源、跑在浏览器里的设计工具，它把颜色、间距、圆角这些视觉属性写成符合 W3C DTCG 标准的 Token，把布局直接对应到 CSS Flexbox 和 Grid，设计文件本身就是 SVG、HTML、JSON 这类开放格式，从源头上减少"翻译损耗"。

设计稿和代码对不上，问题出在哪

大多数设计工具存的是私有二进制文件，导出代码要么靠插件硬猜，要么靠设计师手动标注。Penpot 反着来：它从一开始就用 Web 的开放标准建数据模型，一个矩形存的就是 SVG，布局属性存的就是 Flexbox/Grid 的字段，所以"复制 CSS"这种操作不需要二次换算。同时它是完全开源的——代码、数据格式都可以读，团队不用为"某天平台停服或涨价"担心，文件也随时能带走。

如果你在意数据归属，这一点和主流 SaaS 工具差别很大：后者你的稿件锁在别人的数据库里，而 Penpot 支持把整套服务部署在自己服务器上。

怎么搭出一套可复用的设计系统

一套能长期维护的设计系统，靠的不是画得漂亮的组件，而是"单一事实来源"。Penpot 的做法是把三层东西串起来：Token、组件、主题。

用设计标记统一管理颜色和间距

颜色、字号、间距、圆角、阴影这些，在 Penpot 里都以 Token 的形式存在，格式遵循 W3C DTCG 的规范，可以直接导出 JSON 给前端用，不用做格式转换。Token 之间还支持别名引用和简单运算，比如定义spacing.small为 2，再让spacing.medium等于{spacing.small} * 2，调一次基准值，整套间距跟着变。

组件实例自动跟随母版更新

组件这一层，Penpot 支持变体和属性覆盖：一个按钮组件可以衍生出大/中/小、主/次多种状态，页面里放置的都是实例，改了母版，所有实例同步刷新，只覆盖过个别属性的地方会保留自定义值。颜色面板和主题切换也挂在同一套 Token 上，做深色模式时改的是 Token 集，而不是几百个图层。

设计稿交给前端，需要几步

Penpot 的协作链路是：设计端建好 Token 和 Flex/Grid 布局，开发端打开同一份文件进 Inspect 模式，量距离、看属性、复制 CSS 或 SVG 代码。因为布局属性名和 CSS 同名，复制出来的gap、justify-content可以直接粘进样式表，改设计时开发看到的是同一份数据，而不是截图。

实际操作中比较省事的一点是，Inspect 模式是只读的，工程师可以在画布里自由点选量尺寸，不用担心手滑改坏图层；要导出切图时，用之前设好的导出预设批量出 PNG 或 SVG 即可。

数据不想放云端，能自己部署吗

可以，而且只需要基础的 Docker 知识。仓库里的 Docker 部署配置 提供了完整的 compose 编排，起一套私有 Penpot 通常十几分钟的事，PostgreSQL、Redis、对象存储都有对应容器。私有部署之外还有团队权限、Webhook、访问令牌这些管理入口，适合有数据合规要求的组织。如果只是想先试试，官方也提供免安装的云端版本，浏览器打开就能用。

新手最常问的 3 件事

和 Figma 是什么关系？定位类似，但 Penpot 文件用开放格式存储，布局直接对齐 CSS 标准，且整个平台可以自托管；如果你已经在用 Figma，可以先把导出文件导入对比一下工作流。

学习成本高吗？画布、图层、组件的交互逻辑和主流工具接近，基本上一天能上手；真正要花时间的反而是理解 Token 和 Flex 布局，这部分官方文档里有专门的交互教程。

想参与开发从哪入手？仓库可以直接 clone 下来，git clone https://gitcode.com/GitHub_Trending/pe/penpot之后按 CONTRIBUTING.md 起开发环境。代码主要分几块：前端源码 是 ClojureScript 写的画布和界面，WebAssembly 渲染引擎 是 Rust 实现的，负责把设计数据高速画到屏幕上。

接下来可以做什么

先把一个小页面（登录页或列表页就够）用 Token + Flex 布局完整做一遍，再让前端同学用 Inspect 模式取一次代码，你就知道这套流程在自己团队里跑不跑得通。跑通了，再考虑私有部署和组件库迁移，顺序反过来容易在没验证价值之前就把时间耗在运维上。

【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot