Penpot 开源在线设计协作平台｜做界面、原型与设计系统翻译站点

Penpot 是一款开源的设计与原型平台，浏览器打开就能画界面。它把设计稿、组件库与代码交付放在同一处，并坚持用 CSS、SVG、JSON 这类开放标准存文件，让设计与前端之间的那道缝窄了一些。

为响应式而生的画布

多数设计工具先画固定尺寸的稿子，再靠标注让人去猜断点。Penpot 把弹性布局与网格布局做成画布的一等公民，元素能按规则伸缩、换行、对齐，浏览器窗口拉宽拉窄时版面会跟着动。设计师交付的是一套规则，前端照着实现，两边对不上的情况少了许多。

设计系统与令牌

• 组件：可复用组件带变体与状态，改主组件即批量更新实例，覆盖项单独记录。
• 设计令牌：颜色、字号、间距、圆角以令牌统一管理，改一处即可全站换肤，也便于导出给代码侧使用。
• 共享库：团队库可跨文件引用，新项目直接继承既有规范，不必从零搭一遍。

原型与协作

交互原型支持跳转、覆盖层与滚动行为，评审时可直接在浏览器里点着走一遍，比静态截图更容易发现问题。多人可同时编辑同一文件，光标与选区实时可见，评论钉在具体元素上，改完即闭环。对分布式团队来说，这种同步方式比来回传文件省事得多。文件带版本历史，误改可回看较早的存档找回，不必靠另存好几份来留底。

代码交付与插件

选中图层即可查看对应的 CSS、SVG 或 HTML 片段，数值与设计稿一致，复制进项目即可用。平台也在往前端工作流靠拢，通过插件与外部工具对接，做设计稿转代码、代码转设计稿一类的往返。插件生态由社区维护，也可按官方接口自行开发。

部署、许可与局限

云端版免费即可使用，团队规模与文件量上去后再看付费档。项目以 Mozilla Public License 2.0 开源，官方提供 Docker 部署方案，数据可自行托管。要留意的是，自托管要自己维护服务与升级，且生态规模尚不及老牌商业工具，个别专业功能与插件丰富度仍有差距。从既有工具迁移时，导入效果视文件复杂度而定，正式切换前建议先拿一个真实项目试跑。上手成本上，熟悉其他同类工具的人也得花几个钟头适应它的布局与命名。