设计师用浏览器画界面开发者直接拿代码支持自托管、实时协同、设计令牌MCP服务器让AI也能参与设计️ 先看痛点设计和开发之间为什么总有“翻译偏差”你是一个产品团队的成员。设计师在Figma里画好了一个精美的界面标注了字体、颜色、间距。开发者拿到设计稿开始写代码。然后发现颜色值要手动抄写Figma里是“#3B82F6”开发者要自己复制字体大小要手动转换“16px” → 代码里写“16px”间距、圆角、阴影……全部要“人肉翻译”设计改了一个按钮颜色 → 开发者重新改代码 → 再发版更麻烦的是Figma是闭源的数据在云端不能自托管金融/政府/医疗行业数据不能出内网实时协同需要充会员价格不便宜专业版$12/月/人团队版$45/月/人核心矛盾设计工具Figma和开发工具代码是分离的。设计师画完开发者“翻译”成代码——这个翻译过程又慢又容易出错。而且Figma是闭源的数据和成本都不受控制。✅ Penpot 的解法Penpot 是一个开源的、自托管的设计与原型平台。一句话开源版的Figma——设计师画界面开发者直接拿CSS/SVG/HTML代码它跟Figma的核心区别对比FigmaPenpot开源❌ 闭源✅ 开源MPL 2.0自托管❌ 不能只能云端✅ 可自托Docker/K8s/任意服务器数据归属在Figma服务器上你自己控制定价付费$12-45/月/人✅ 免费自托管设计转代码需要插件/手动✅ 原生支持SVG/CSS/HTML设计令牌有限支持✅ 原生支持 它解决了什么1. 设计稿 → 代码无缝衔接Penpot 的核心理念是“设计即代码”。你在Penpot里设计的界面底层就是标准的SVG、CSS、HTML。开发者打开“检查模式”直接看到选中元素的CSS代码颜色、字体、间距、边框……SVG代码图标、插画布局信息Flexbox、Grid不需要手动抄写、不需要插件、不需要“翻译”。2. 数据主权 vs 供应商锁定FigmaPenpot自托管设计数据存在哪Figma服务器美国/欧盟你自己的服务器合规要求医疗/金融/政府可能不满足✅ 可满足数据不出内网如果Figma涨价/改政策你只能接受✅ 你自己掌控断网还能用❌ 不能需联网✅ 自托管后内网可用3. 设计与开发一个平台搞定参与者Penpot里能做什么设计师画UI、做原型、建设计系统、实时协同开发者检查CSS/SVG/HTML、提取设计令牌、连接MCP服务器AI代理通过MCP服务器读取设计稿、生成代码、自动化工作流产品经理查看原型、留言反馈MCP模型上下文协议一种让AI工具之间互相通信的标准协议。Penpot的MCP服务器让AI能“读懂”设计稿然后生成对应的代码。 核心能力1. 实时协同多人同时编辑同一个文件光标实时显示、评论标注版本历史、回滚2. 设计令牌Design Tokens设计令牌设计系统里最基础的变量——比如--color-primary: #3B82F6、--font-size-heading: 24px。改了令牌所有用到它的地方自动更新。Penpot原生支持设计令牌颜色、字体、间距、圆角、阴影……所有设计变量可以导出为JSON开发者直接用在代码里一处修改全局生效3. Flex布局 CSS GridFlexbox和GridCSS里两种主流布局方式。Flexbox用于一维布局横向或纵向Grid用于二维布局表格状。Penpot支持这两种布局的可视化设计拖拽调整间距、对齐方式自动生成对应的CSS代码设计稿和最终网页的布局保持一致4. 组件 变体Components Variants创建可复用的UI组件按钮、卡片、输入框……同一个组件可以有多个变体主要按钮/次要按钮/危险按钮修改组件 → 所有实例自动更新5. 插件系统Penpot支持插件可以扩展功能导出为代码集成到其他工具自定义工作流6. MCP服务器AI集成Penpot提供了MCP服务器让AI可以“读”设计稿AI获取设计稿的结构、图层、样式自动生成对应的前端代码React/Vue/HTML自动化设计→开发工作流示例你有一个按钮设计AI通过MCP读取它的颜色、大小、圆角、文字样式然后生成一个完整的React组件代码。7. 自托管Penpot支持多种部署方式Docker最推荐一条命令Kubernetes企业级部署Elestio一键云部署任何能跑容器的服务器硬件要求2核CPU 4GB内存起步小团队够用。️ 界面速览设计画布类似Figma的界面左侧图层、中间画布、右侧属性面板。检查模式选中任何元素右侧出现“代码”标签显示对应的CSS、SVG、HTML。设计令牌面板集中管理所有设计变量导出为JSON。插件中心浏览和安装社区插件。 谁最适合用人群/场景为什么适合产品设计团队免费、实时协同、自托管不用付Figma的订阅费设计系统团队原生设计令牌 组件 变体适合建大型设计系统开发团队检查模式直接拿CSS/SVG/HTML不用人肉“翻译”设计稿政府/医疗/金融机构需要数据自托管、满足合规要求创业公司/预算有限的团队免费、开源、自托管省下设计工具的成本AI辅助开发团队MCP服务器让AI能“读”设计稿自动生成代码教育机构免费、开源学生可以随便用一个典型的“设计→开发”流程之前用Figma设计师在Figma里画好界面设计师把设计稿链接发给开发者开发者打开Figma手动查看每个元素的颜色、字体、间距开发者在代码里一个一个写设计改了一个按钮颜色 → 开发者重新查、重新改反复循环现在用Penpot设计师在Penpot里画好界面同时设置好设计令牌开发者打开Penpot的“检查模式”直接复制CSS颜色、字体、间距直接用设计令牌的变量名不是硬编码设计改了设计令牌 → 前端代码里的变量自动对应 → 不需要手动改AI还可以通过MCP读取设计稿生成组件代码草稿 与Figma的深度对比对比项FigmaPenpot开源❌✅ MPL 2.0自托管❌✅ Docker/K8s免费自托管不适用✅ 完全免费实时协同✅付费✅设计令牌有限支持✅ 原生支持Flexbox/Grid✅✅检查模式生成代码✅✅SVG/CSS/HTMLMCP/AI集成无✅ 官方MCP服务器离线使用❌✅自托管后内网可用社区插件✅✅开源生态 技术栈部分技术前端ClojureScript你没看错Penpot的前端用的是ClojureScript——一种基于ClojureLisp方言的语言编译成JavaScript运行后端Clojure数据库PostgreSQL存储本地文件系统或S3兼容存储实时协同WebSocket自托管Docker优先ClojureScript一种函数式编程语言编译成JavaScript。Penpot团队选择它是因为①代码简洁 ②不可变数据结构适合协同编辑 ③JVM生态成熟。 链接官网penpot.appGitHubgithub.com/penpot/penpot用户指南help.penpot.app/user-guide社区community.penpot.app自托管文档help.penpot.app/technical-guide许可证MPL 2.0✅ 总结层次核心内容解决了什么设计工具Figma和开发工具代码分离翻译过程慢且易错。Penpot让“设计即代码”原生生成CSS/SVG/HTML核心能力①实时协同 ②设计令牌 ③Flexbox/Grid ④组件变体 ⑤检查模式生成代码 ⑥MCP/AI集成 ⑦自托管怎么用①SAAS版design.penpot.app免费注册 ②自托管Docker一键部署谁适合产品设计团队、开发团队、设计系统团队、政府/医疗/金融机构、创业公司、AI辅助开发团队Penpot—— 开源的设计平台让设计即代码让团队真正协同。设计师画界面开发者直接拿代码——没有“翻译偏差”。
开源版Figma：Penpot，设计协同+代码生成，全栈设计平台
发布时间：2026/6/24 4:03:04
设计师用浏览器画界面开发者直接拿代码支持自托管、实时协同、设计令牌MCP服务器让AI也能参与设计️ 先看痛点设计和开发之间为什么总有“翻译偏差”你是一个产品团队的成员。设计师在Figma里画好了一个精美的界面标注了字体、颜色、间距。开发者拿到设计稿开始写代码。然后发现颜色值要手动抄写Figma里是“#3B82F6”开发者要自己复制字体大小要手动转换“16px” → 代码里写“16px”间距、圆角、阴影……全部要“人肉翻译”设计改了一个按钮颜色 → 开发者重新改代码 → 再发版更麻烦的是Figma是闭源的数据在云端不能自托管金融/政府/医疗行业数据不能出内网实时协同需要充会员价格不便宜专业版$12/月/人团队版$45/月/人核心矛盾设计工具Figma和开发工具代码是分离的。设计师画完开发者“翻译”成代码——这个翻译过程又慢又容易出错。而且Figma是闭源的数据和成本都不受控制。✅ Penpot 的解法Penpot 是一个开源的、自托管的设计与原型平台。一句话开源版的Figma——设计师画界面开发者直接拿CSS/SVG/HTML代码它跟Figma的核心区别对比FigmaPenpot开源❌ 闭源✅ 开源MPL 2.0自托管❌ 不能只能云端✅ 可自托Docker/K8s/任意服务器数据归属在Figma服务器上你自己控制定价付费$12-45/月/人✅ 免费自托管设计转代码需要插件/手动✅ 原生支持SVG/CSS/HTML设计令牌有限支持✅ 原生支持 它解决了什么1. 设计稿 → 代码无缝衔接Penpot 的核心理念是“设计即代码”。你在Penpot里设计的界面底层就是标准的SVG、CSS、HTML。开发者打开“检查模式”直接看到选中元素的CSS代码颜色、字体、间距、边框……SVG代码图标、插画布局信息Flexbox、Grid不需要手动抄写、不需要插件、不需要“翻译”。2. 数据主权 vs 供应商锁定FigmaPenpot自托管设计数据存在哪Figma服务器美国/欧盟你自己的服务器合规要求医疗/金融/政府可能不满足✅ 可满足数据不出内网如果Figma涨价/改政策你只能接受✅ 你自己掌控断网还能用❌ 不能需联网✅ 自托管后内网可用3. 设计与开发一个平台搞定参与者Penpot里能做什么设计师画UI、做原型、建设计系统、实时协同开发者检查CSS/SVG/HTML、提取设计令牌、连接MCP服务器AI代理通过MCP服务器读取设计稿、生成代码、自动化工作流产品经理查看原型、留言反馈MCP模型上下文协议一种让AI工具之间互相通信的标准协议。Penpot的MCP服务器让AI能“读懂”设计稿然后生成对应的代码。 核心能力1. 实时协同多人同时编辑同一个文件光标实时显示、评论标注版本历史、回滚2. 设计令牌Design Tokens设计令牌设计系统里最基础的变量——比如--color-primary: #3B82F6、--font-size-heading: 24px。改了令牌所有用到它的地方自动更新。Penpot原生支持设计令牌颜色、字体、间距、圆角、阴影……所有设计变量可以导出为JSON开发者直接用在代码里一处修改全局生效3. Flex布局 CSS GridFlexbox和GridCSS里两种主流布局方式。Flexbox用于一维布局横向或纵向Grid用于二维布局表格状。Penpot支持这两种布局的可视化设计拖拽调整间距、对齐方式自动生成对应的CSS代码设计稿和最终网页的布局保持一致4. 组件 变体Components Variants创建可复用的UI组件按钮、卡片、输入框……同一个组件可以有多个变体主要按钮/次要按钮/危险按钮修改组件 → 所有实例自动更新5. 插件系统Penpot支持插件可以扩展功能导出为代码集成到其他工具自定义工作流6. MCP服务器AI集成Penpot提供了MCP服务器让AI可以“读”设计稿AI获取设计稿的结构、图层、样式自动生成对应的前端代码React/Vue/HTML自动化设计→开发工作流示例你有一个按钮设计AI通过MCP读取它的颜色、大小、圆角、文字样式然后生成一个完整的React组件代码。7. 自托管Penpot支持多种部署方式Docker最推荐一条命令Kubernetes企业级部署Elestio一键云部署任何能跑容器的服务器硬件要求2核CPU 4GB内存起步小团队够用。️ 界面速览设计画布类似Figma的界面左侧图层、中间画布、右侧属性面板。检查模式选中任何元素右侧出现“代码”标签显示对应的CSS、SVG、HTML。设计令牌面板集中管理所有设计变量导出为JSON。插件中心浏览和安装社区插件。 谁最适合用人群/场景为什么适合产品设计团队免费、实时协同、自托管不用付Figma的订阅费设计系统团队原生设计令牌 组件 变体适合建大型设计系统开发团队检查模式直接拿CSS/SVG/HTML不用人肉“翻译”设计稿政府/医疗/金融机构需要数据自托管、满足合规要求创业公司/预算有限的团队免费、开源、自托管省下设计工具的成本AI辅助开发团队MCP服务器让AI能“读”设计稿自动生成代码教育机构免费、开源学生可以随便用一个典型的“设计→开发”流程之前用Figma设计师在Figma里画好界面设计师把设计稿链接发给开发者开发者打开Figma手动查看每个元素的颜色、字体、间距开发者在代码里一个一个写设计改了一个按钮颜色 → 开发者重新查、重新改反复循环现在用Penpot设计师在Penpot里画好界面同时设置好设计令牌开发者打开Penpot的“检查模式”直接复制CSS颜色、字体、间距直接用设计令牌的变量名不是硬编码设计改了设计令牌 → 前端代码里的变量自动对应 → 不需要手动改AI还可以通过MCP读取设计稿生成组件代码草稿 与Figma的深度对比对比项FigmaPenpot开源❌✅ MPL 2.0自托管❌✅ Docker/K8s免费自托管不适用✅ 完全免费实时协同✅付费✅设计令牌有限支持✅ 原生支持Flexbox/Grid✅✅检查模式生成代码✅✅SVG/CSS/HTMLMCP/AI集成无✅ 官方MCP服务器离线使用❌✅自托管后内网可用社区插件✅✅开源生态 技术栈部分技术前端ClojureScript你没看错Penpot的前端用的是ClojureScript——一种基于ClojureLisp方言的语言编译成JavaScript运行后端Clojure数据库PostgreSQL存储本地文件系统或S3兼容存储实时协同WebSocket自托管Docker优先ClojureScript一种函数式编程语言编译成JavaScript。Penpot团队选择它是因为①代码简洁 ②不可变数据结构适合协同编辑 ③JVM生态成熟。 链接官网penpot.appGitHubgithub.com/penpot/penpot用户指南help.penpot.app/user-guide社区community.penpot.app自托管文档help.penpot.app/technical-guide许可证MPL 2.0✅ 总结层次核心内容解决了什么设计工具Figma和开发工具代码分离翻译过程慢且易错。Penpot让“设计即代码”原生生成CSS/SVG/HTML核心能力①实时协同 ②设计令牌 ③Flexbox/Grid ④组件变体 ⑤检查模式生成代码 ⑥MCP/AI集成 ⑦自托管怎么用①SAAS版design.penpot.app免费注册 ②自托管Docker一键部署谁适合产品设计团队、开发团队、设计系统团队、政府/医疗/金融机构、创业公司、AI辅助开发团队Penpot—— 开源的设计平台让设计即代码让团队真正协同。设计师画界面开发者直接拿代码——没有“翻译偏差”。
