Penpot 开源设计工具：基于开放标准的设计协作平台

Penpot 开源设计工具：基于开放标准的设计协作平台

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

设计师交付的稿件，开发为什么要重新量一遍尺寸、对一遍代码？Penpot 的回答是：让设计稿本身就写成代码。Penpot 是一款开源设计工具，完全免费、在浏览器中运行、支持自托管，设计数据遵循 SVG、CSS、HTML、JSON 等开放标准，代码仓库以 MPL-2.0 协议开放，可自由部署与二次开发。

它替代了哪段低效的工作流

主流闭源工具把设计存在私有格式里，开发拿到手只能截图、量尺寸、口头确认。Penpot 的设计模型直接构建在 Web 开放标准上：每个图形对应 SVG 节点，布局属性就是真实的 CSS 属性，设计师改一版颜色，开发侧拿到的 CSS 随之变化，不需要二次转译。

自托管意味着团队完整拥有设计基础设施：用户、文件、权限、审计日志都在自己的服务器上。对合规要求高的组织，可以把设计平台放进内网，而不是把全部设计资产交给第三方 SaaS。

设计系统支撑能力

用 W3C 格式定义设计标记

Penpot 的设计标记遵循 W3C DTCG 的格式草案，支持颜色、字体、间距、圆角等类型，可建立别名引用并用数学公式推导数值。一套标记可以映射到多个主题，切换主题即切换整组别名，详见设计标记指南。

它意味着什么：设计稿与代码端的样式定义来自同一份数据，改一处、全局生效，不用维护两份色板。它是怎么做到的：标记面板按 DTCG 草案实现，标记值可引用其他标记，主题本质是一组别名集合。

组件、变体与一处修改多处同步

组件与变体用于沉淀可复用的 UI：主组件更新后，引用处按覆盖规则同步，变体承载同一组件的多个状态。文档见组件指南。

它意味着什么：按钮的悬停态改一次，所有页面实例跟着变，设计系统不会出现"两个版本的按钮"。它是怎么做到的：实例与主组件之间保存引用关系，更新时按覆盖层级向下传播差异。

用 CSS Grid 和 Flexbox 做响应式布局

Penpot 的弹性布局直接基于 Flexbox 与 Grid 标准实现，在画布上给容器加布局属性，子元素随容器尺寸自动重排，见弹性布局文档。

它意味着什么：设计稿在浏览器里跑起来的样子，和设计稿本身是同一种行为。它是怎么做到的：布局引擎实现的是 CSS 规范属性，导出的 CSS 可以直接复用这些参数。

从设计稿到可运行代码的链路

如何在工作台直接生成 CSS 和 SVG 代码

选中任意图层，切换到代码模式即可查看其 CSS 或 SVG 表达：

开发可以直接复制进项目。它意味着什么：交付物从"一张图"变成"可运行的代码片段"。它是怎么做到的：Penpot 按 Web 渲染规则把图层的尺寸、字体、颜色、层级映射为标准 CSS 声明和 SVG 标记，inspect 面板与代码模式共用这套生成逻辑，说明见开发者工具文档。

让 AI agent 直接读写设计文件

MCP server 把 AI 客户端连进 Penpot 文件，agent 可以用自然语言读写组件、样式、标记、页面和图层：批量创建间距标记、同步多页样式，或反向根据代码项目修改设计，属于双向工作流，说明见MCP server 文档。

它意味着什么：标记治理、样式清理这类重复劳动可以交给 agent 执行，人只负责验收。它是怎么做到的：Penpot 通过开放 API 与 MCP 协议向外部 agent 暴露设计文件的读写接口。

底层架构与扩展机制

它意味着什么：性能优化、二次开发都有明确的落点——渲染慢看 render-wasm，功能扩展看插件与 API，不必整体重写。

落地路径

• 先试用：浏览器中注册即可使用，熟悉画布、组件与 inspect 流程，不需要任何安装。
• 自托管：按Docker 安装指南，用 docker compose 启动完整实例；仓库的docker/images/目录提供编排文件与镜像定义，生产环境还需按指南配置域名与反向代理。
• 贡献源码：先读CONTRIBUTING.md了解开发环境搭建与提交规范，再进入对应模块（frontend、backend、render-wasm）开发。

什么场景适合，什么场景不适合

适合用 Web 技术栈交付产品、需要掌控设计基础设施的团队：设计即代码、自托管、开放 API 这三点能直接缩短协作链路。如果团队深度依赖某闭源工具的私有生态与协作习惯，迁移成本需要先评估。判断标准很简单：设计资产是否需要留在自己的服务器、以开放格式被代码直接消费。

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