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 暴露设计文件的读写接口。底层架构与扩展机制层技术栈位置前端ClojureScript核心逻辑与浏览器无关frontend/src/app/后端Clojure服务、迁移、RPCbackend/src/app/渲染Rust 编译为 WebAssembly渲染引擎基于 Skiarender-wasm/src/扩展TypeScript 插件、MCP server、开放 API 与 Webhookplugins/、mcp/它意味着什么性能优化、二次开发都有明确的落点——渲染慢看 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考