开源版Figma：Penpot，设计协同+代码生成，全栈设计平台

设计师用浏览器画界面，开发者直接拿代码
支持自托管、实时协同、设计令牌
MCP服务器让AI也能参与设计

🖌️ 先看痛点：设计和开发之间，为什么总有“翻译偏差”？

你是一个产品团队的成员。

设计师在Figma里画好了一个精美的界面，标注了字体、颜色、间距。

开发者拿到设计稿，开始写代码。然后发现：

• 颜色值要手动抄写（Figma里是“#3B82F6”，开发者要自己复制）
• 字体大小要手动转换（“16px” → 代码里写“16px”）
• 间距、圆角、阴影……全部要“人肉翻译”
• 设计改了一个按钮颜色 → 开发者重新改代码 → 再发版

更麻烦的是：

• Figma是闭源的，数据在云端，不能自托管（金融/政府/医疗行业，数据不能出内网）
• 实时协同需要充会员
• 价格不便宜（专业版$12/月/人，团队版$45/月/人）

核心矛盾：

设计工具（Figma）和开发工具（代码）是分离的。设计师画完，开发者“翻译”成代码——这个翻译过程又慢又容易出错。而且，Figma是闭源的，数据和成本都不受控制。

✅ Penpot 的解法

Penpot 是一个开源的、自托管的设计与原型平台。

一句话：开源版的Figma——设计师画界面，开发者直接拿CSS/SVG/HTML代码

它跟Figma的核心区别：

🔥 它解决了什么？

1. 设计稿 → 代码，无缝衔接

Penpot 的核心理念是“设计即代码”。

你在Penpot里设计的界面，底层就是标准的SVG、CSS、HTML。

开发者打开“检查模式”，直接看到：

• 选中元素的CSS代码（颜色、字体、间距、边框……）
• SVG代码（图标、插画）
• 布局信息（Flexbox、Grid）

不需要手动抄写、不需要插件、不需要“翻译”。

2. 数据主权 vs 供应商锁定

3. 设计与开发，一个平台搞定

💡MCP（模型上下文协议）：一种让AI工具之间互相通信的标准协议。Penpot的MCP服务器让AI能“读懂”设计稿，然后生成对应的代码。

📦 核心能力

1. 实时协同

• 多人同时编辑同一个文件
• 光标实时显示、评论标注
• 版本历史、回滚

2. 设计令牌（Design Tokens）

💡设计令牌：设计系统里最基础的变量——比如--color-primary: #3B82F6、--font-size-heading: 24px。改了令牌，所有用到它的地方自动更新。

Penpot原生支持设计令牌：

• 颜色、字体、间距、圆角、阴影……所有设计变量
• 可以导出为JSON，开发者直接用在代码里
• 一处修改，全局生效

3. Flex布局 & CSS Grid

💡Flexbox和Grid：CSS里两种主流布局方式。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）：

1. 设计师在Figma里画好界面
2. 设计师把设计稿链接发给开发者
3. 开发者打开Figma，手动查看每个元素的颜色、字体、间距
4. 开发者在代码里一个一个写
5. 设计改了一个按钮颜色 → 开发者重新查、重新改
6. 反复循环

现在（用Penpot）：

1. 设计师在Penpot里画好界面（同时设置好设计令牌）
2. 开发者打开Penpot的“检查模式”，直接复制CSS
3. 颜色、字体、间距直接用设计令牌的变量名，不是硬编码
4. 设计改了设计令牌 → 前端代码里的变量自动对应 → 不需要手动改
5. AI还可以通过MCP读取设计稿，生成组件代码草稿

📊 与Figma的深度对比

📦 技术栈

💡ClojureScript：一种函数式编程语言，编译成JavaScript。Penpot团队选择它是因为：①代码简洁 ②不可变数据结构适合协同编辑 ③JVM生态成熟。

🔗 链接

• 官网：penpot.app
• GitHub：github.com/penpot/penpot
• 用户指南：help.penpot.app/user-guide
• 社区：community.penpot.app
• 自托管文档：help.penpot.app/technical-guide
• 许可证：MPL 2.0

✅ 总结

Penpot—— 开源的设计平台，让设计即代码，让团队真正协同。
设计师画界面，开发者直接拿代码——没有“翻译偏差”。