这个设计工具用 MCP 打通了 AI 编码
alitrack约 5 分钟Penpot 是 GitHub 上 55K Star 的开源设计工具，大部分人把它当成 Figma 的免费平替。免费是真的，但 MCP 才是它真正有意思的地方。
● ● ●
Figma 收购之后
2022 年 9 月，Adobe 宣布 200 亿美元收购 Figma。消息一出，Penpot 的单日注册量暴涨 5600%。两周内涌入 10 万用户。
这是个恐慌性迁移——设计师害怕 Adobe 把 Figma 变成下一个 XD（当年 Adobe 的"Figma 杀手"，七年做到年收入 1500 万美元然后被边缘化）。但恐慌驱动的东西通常不可持续。真正的转换发生在恐慌过去之后。
三年多过去了。Adobe 收购被欧盟否决，Figma 独立发展。而 Penpot 没有消失——从 10 万用户涨到 50 万，GitHub Stars 从不到 1 万涨到 5.5 万。它活下来了，而且在做 Figma 做不了的事。
● ● ●
不是"免费的 Figma"
Penpot 的布局引擎直接使用 CSS Grid 和 Flexbox。你在画布上拉一个三列布局，右下角 Inspect 面板显示的就是一行 grid-template-columns: 1fr 2fr 1fr，开发者直接复制进生产代码。
Figma 用的是专有的 Auto Layout——功能类似，但输出的不是标准 CSS。开发者拿到的是"接近但不完全一致"的样式属性，需要手动调整。
这是 Penpot 的核心技术决策：设计即代码。设计文件存储为 JSON 和 SVG，不是专有二进制。设计令牌是内置一等公民，不是插件补丁。支持自托管（Docker/K8s）、LDAP/SAML 企业 SSO，金融和政务团队可以把设计数据放在内网，不出边界。
这些是 Penpot 的基础能力。下面要说的才是 Figma 在架构上跟不了的。
● ● ●
MCP Server：设计工具的范式转变
Penpot 是目前唯一一个原生集成 MCP（Model Context Protocol）协议的设计工具。
工作方式是：设计师在 Penpot 里画界面 → 启动 MCP Server → Claude Code/Cursor/VS Code Copilot 等 AI 编码工具通过 MCP 直接读取设计稿的结构化数据。
AI 拿到的是结构化数据：
- 组件名称（Dashboard, MetricCard, Sidebar）
- CSS Grid 列定义（三列、左窄右宽）
- 设计令牌命名（--color-primary, --spacing-lg）
- 图层嵌套关系（Sidebar 包含 NavItem × 5）
- 变体状态（按钮的 default/hover/disabled）
有了这些语义信息，AI 能理解"这里有一个 Dashboard 布局，左边是可折叠侧边栏，中间包含一个叫 MetricCard 的数据卡片组件"，然后生成对应的 React 或 Vue 组件代码。
Penpot 原生 Inspect 给你的是原子 CSS 属性（width: 280px, color: #6366F1）。MCP + AI 给你的是带组件语义的工程代码。这是两个层次的交付物。
● ● ●
四种 AI 工作流方向
Penpot 的 MCP 支持四个方向的工作流：
Design → Code：AI 读设计稿，生成带语义的前端组件代码。不是 CSS 片段，是完整可运行的组件。
Code → Design：给 AI 一段代码或自然语言描述，在 Penpot 画布上生成对应的设计稿。
Design → Design：AI 辅助设计迭代——批量修改颜色、调整布局、生成变体。
Design → Documentation：AI 自动从设计稿生成组件文档和设计规范。
这四个方向都是双向的。设计稿不再是设计师画好扔给开发者的静态产物，而是可以随时被 AI 读写和转换的活数据。
● ● ●
MCP Server 的技术细节
Penpot 的 MCP Server 是开源的、模型无关的。你用什么 LLM 都可以——Claude、GPT、本地模型。MCP Server 部署在你的服务器上，数据不出边界。没有调用次数限制，没有 paywall。
这对企业用户意味着：你可以把设计稿放在私有云的内网 Penpot 实例上，MCP Server 也在内网，AI 编码工具连接内网 MCP Server 读取设计数据——整个链路没有第三方云服务介入。
Figma 有 Figma AI，但那是封闭系统——你只能用 Figma 选的模型，数据必须过 Figma 的服务器。Penpot 的 MCP 给你的是基础设施级别的控制权。
● ● ●
技术栈的意外选择
Penpot 是用 Clojure/ClojureScript 全栈开发的。这在设计工具领域相当罕见——Figma 用 TypeScript/C++，Sketch 用 Objective-C/Swift。
Clojure 是 Lisp 方言，运行在 JVM 上。选择它的逻辑很直接：函数式编程的不可变数据结构天然适合 UI 状态管理，多人实时协作时状态一致性是核心挑战；内置的并发原语（Atoms/Refs/Agents）处理拖拽、缩放、实时同步这些并行操作很顺手；基于 OT 算法的实时协作需要服务端作为权威节点对并发操作排序，Clojure 的表达力让这类复杂逻辑可以用更少的代码实现。
代价是社区小、人才难找。但 Penpot 有 290 个贡献者，核心团队 ~10 人。用一个小众语言做了 290 人的开源项目，说明技术选择至少在架构上站住了。
● ● ●
vs Figma 的关键差异
| 维度 | Penpot | Figma |
|---|---|---|
| 许可证 | MPL-2.0 开源 | 闭源商业 |
| 部署 | 云 + 自托管 | 仅云 |
| 价格 | 永久免费 | $15/月/编辑者起 |
| 布局引擎 | 原生 CSS Grid + Flexbox | 专有 Auto Layout |
| 设计令牌 | 一等公民，原生内置 | 需插件/第三方工具 |
| AI 集成 | MCP Server，任意 LLM | Figma AI，封闭系统 |
| 企业 | LDAP/SAML，内网部署 | 企业版额外付费 |
| 大文件性能 | 一般（4GB+ RAM 建议） | 优秀 |
| 插件生态 | 新兴，几十个 | 成熟，几千个 |
Figma 在大文件性能、插件生态、高级原型交互（变量驱动、条件逻辑）上依然领先。但 Penpot 在开放标准、数据主权、AI 集成三个维度上提供了 Figma 无法提供的方案。
● ● ●
Penpot 的风险
- 01营收模型未建立。Penpot 母公司 Kaleidos 总共融资约 2000 万美元（Decibel/Cisco VC 领投），完全 pre-revenue。云版永久免费，自托管也是免费。长期可持续性取决于何时找到商业模式。
- 02语言栈门槛。Clojure 社区小，核心贡献者集中在西班牙团队。如果核心人员流失，替代成本高。
- 03设计师社区惯性。设计师群体的工具惯性很强——Figma 是行业默认，迁移意味着重新学习、重建组件库、适配团队流程。
- 04大文件性能。数千个画布的大型项目体验明显下降。
● ● ●
谁适合用
- 需要数据主权的团队：金融、政务、医疗，可以把 Penpot 部署在内网，数据不出边界
- 追求 AI 原生工作流的开发者团队：MCP 把设计稿变成 AI 可编程的资产
- 预算有限的创业团队：完全免费，功能无阉割
- 对供应商锁定敏感的组织：开放标准意味着随时可以迁移，不被任何厂商绑死
如果你只是想要一个免费的 Figma，Penpot 够用。但如果你的团队在用 AI 编码工具——Claude Code、Cursor、Copilot——Penpot 的 MCP Server 能让设计稿直接参与 AI 工作流。这件事，Figma 在架构上暂时做不了。
GitHub: github.com/penpot/penpot
官网: penpot.app
MCP Server: penpot.app/penpot-mcp-server
云版: design.penpot.app