penpot / penpot

Problem: 设计师用Figma等工具出图后，开发者手动还原UI细节，沟通成本高且易出错。

Solution: Penpot原生支持SVG/CSS/HTML导出，开发者可直接从设计稿中复制代码，减少手工转换。

Example: 前端拿到Penpot中的按钮设计，直接复制CSS样式代码应用到React组件，无需反复对照设计稿调整像素。

Problem: 团队需要统一UI组件规范，但商业工具（如Figma）有授权限制，无法完全掌控数据。

Solution: Penpot支持自托管和设计令牌（Design Tokens），可创建可复用的样式变量，确保设计系统一致性。

Example: 团队在内部服务器部署Penpot，定义颜色、间距等设计令牌，所有组件引用这些令牌，修改令牌即可全局更新UI。

Problem: 远程团队需要多人同时编辑设计原型，但传统工具协作体验差或需要付费。

Solution: Penpot提供实时协作功能，多人可同时在线编辑同一设计文件，且完全开源免费。

Example: 产品经理、设计师和开发者在同一画布上实时调整页面布局，即时看到对方修改，减少等待和沟通时间。

Problem: 设计到开发的流程中，重复性工作多，缺乏与CI/CD或AI工具的集成。

Solution: Penpot提供开放API和MCP服务器，支持插件系统和AI工作流，可自动化导出、校验或生成代码。

Example: 开发团队编写脚本，通过Penpot API自动导出每次设计迭代的SVG资源，并提交到Git仓库，实现设计变更自动同步。