- 难度
- 较难
- 适合
- 进阶
- 主要语言
- Clojure
- GitHub
- ★ 58.3k
- 许可证
- MPL-2.0
- 快照日期
- 2026年8月9日
先判断要不要学
这个项目值得拆什么？
Penpot 是面向产品团队的开源设计平台，以 SVG、CSS、HTML 和 JSON 等开放标准表达设计，同时提供实时协作、设计令牌、插件和开发者 Inspect 工具。它的前端、后端、共享模型、WASM 渲染与部署层清晰分区，适合进阶学习复杂编辑器和设计开发协作。
- 01
可从真实代码理解设计令牌、组件变体和 Inspect 模式如何连接设计与前端
- 02
Clojure/ClojureScript、Rust/WASM 与标准 Web 技术的组合，能展示大型创作工具的性能分层
可以学什么
不只是看代码，而是找到产品的骨架
- 学界面
- 学产品结构
- 学数据库
- 学用户登录
- 学部署
- 学完整项目组织
开放标准驱动的设计数据
观察设计对象如何被表达、渲染并转为开发者可用信息。
common · frontend · exporter复杂编辑器的性能分层
对照前端交互与 Rust/WASM 渲染模块，理解性能敏感任务的分工。
frontend · render-wasm · media-processor设计系统与插件边界
从令牌、组件变体和插件运行时学习可扩展产品的边界设计。
frontend/packages · plugins · library三段学习路径
从理解、修改到做出你的版本
0130 分钟先跑通
建立 Penpot 五个主要工程边界的地图。
- 阅读 README 的 Why Penpot
- 浏览 frontend、backend、common、render-wasm 和 docker
- 记下一条从设计数据到渲染的推测链路
完成标志：能解释前端、共享模型、后端和渲染层的职责。
022 小时动手改
沿一个明确界面功能追踪代码。
- 选择设计令牌或 Inspect 功能
- 在 frontend/src 定位界面与事件
- 找出 common 或 backend 中对应的数据处理
完成标志：形成一份带真实路径的功能调用图。
031 天做变体
做一个不依赖完整后端的设计开发小实验。
- 用 SVG 和 CSS 定义一组可视化令牌
- 制作组件变体展示
- 增加类 Inspect 的属性面板
- 记录与 Penpot 完整实现的差距
完成标志：得到一个可解释开放设计数据的轻量原型。
评分解释
每一分都要说清楚为什么
可复刻性13 / 25
可复刻单个设计开发概念，但不适合短时间复刻完整产品。
文档与代码清晰度17 / 20
根目录按主要子系统分区，README 对产品能力说明完整。
新手学习价值14 / 20
对设计系统很有价值，但技术栈和系统规模对初学者有明显门槛。
产品完整度15 / 15
从设计、协作到开发交付和自托管都有成熟实现。
vibe coding 代表性6 / 10
适合让 AI 辅助阅读单个子系统，不适合一次性生成式改造。
活跃度5 / 5
仓库保持高活跃度且开发流程完整。
新颖性5 / 5
以开放 Web 标准连接设计与代码是鲜明且罕见的学习角度。