Appearance
Penpot - 开源设计与原型协作平台
是什么
首个面向跨领域团队的开源设计和原型平台,Figma 的开源替代品,基于 Web 标准和 SVG 构建,支持私有化部署。
- GitHub: github.com/penpot/penpot
- 官网: penpot.app
- 许可证: MPL-2.0
- Star 数: 23.8k+
- 最新版本: Penpot 2.0(支持 CSS Grid 布局)
不是什么
- 不是 Figma 的完整替代品——插件生态和社区资源远不如 Figma
- 不是纯 AI 设计工具——它是一个设计平台,AI 能力是辅助而非核心
- 不是桌面应用——纯 Web 端,需要网络连接
- 不支持 Figma 迁移全部特性——Figma 导出插件暂不支持自动布局、组件等高级特性
解决啥
| 痛点 | 方案 |
|---|---|
| Figma 被 Adobe 收购后版权/价格不确定 | 完全开源免费,可自建 |
| 设计师和开发者交接困难 | 原生支持 CSS、Flexbox、Grid,输出即代码 |
| 团队协作频繁传文件 | 实时多人协作 + Web 端访问 |
| 商业工具数据隐私风险 | 可 Docker 私有化部署,数据自主可控 |
好在哪
| 能力 | Penpot | Figma |
|---|---|---|
| 开源 | ✅ MPL-2.0 | ❌ 闭源 |
| 私有部署 | ✅ Docker 一键部署 | ❌ |
| 价格 | 免费 | 免费版有限制 |
| 实时协作 | ✅ | ✅ |
| CSS Grid | ✅ 原生支持 | ⚠️ 插件 |
| 代码导出 | ✅ CSS / HTML / SVG | ✅ |
| Web 标准 | SVG、CSS、Flexbox、Grid | 私有格式 |
亮点:
- 首个真正开源的设计 + 原型平台,不是阉割版
- 开发者友好:设计直接导出 CSS 代码,检查模式即看即用
- Figma 迁移支持:官方 Figma 插件可导出设计稿到 Penpot
- 背靠企业持续维护,迭代稳定活跃
怎么跑
在线使用(推荐)
访问 penpot.app → 注册账号 → 直接在线使用,免费。
Docker 私有化部署
bash
git clone https://github.com/penpot/penpot.git
cd penpot/docker
docker compose -p penpot up -d
# 访问 http://localhost:9001
需要组件:前端 + 后端 + 导出器 + PostgreSQL + Redis。
AI 辅助使用
配合 OpenClaw/Claude Code 使用,可用于:
- 自动生成 UI 设计稿的代码导出
- 批量处理设计稿 → 代码转换
- 设计稿评审自动化
bash
# 通过 CLI 导出设计稿代码
# Penpot 原生支持检查模式,设计师在 Penpot 中设计
# 开发者在检查模式中直接复制 CSS/SVG 代码
怎么用
- 个人/小团队替代 Figma:UI/UX 设计 + 原型交互一条龙
- 开源项目协作:仓库放 Penpot 链接,贡献者免费用
- 企业数据安全需求:内部 Docker 部署,设计数据不出网
- 教学场景:学生无需注册商业工具,浏览器即开即用
延伸资源:
by 文殊