Penpot 这个隔三差五上 GitHub 热榜的项目，很多人对它的印象还停留在"免费版 Figma 平替"：一个浏览器里就能用的开源设计原型工具，开箱即用，也能 Docker 自建。GitHub 上 53.7k 星的 Penpot,可以先理解成开源版 Figma。小红书但如果你最近关注社区里的讨论，会发现话题已经悄悄换方向了：争论"它能不能替代 Figma"的人变少了，研究另一种玩法的人变多了——把 Penpot 接上 MCP，让 AI 直接读写设计稿。今天就聊聊这个变化是什么、实际好不好用、适合谁，以及想上手的话从哪一步开始。
一、先说 MCP 是个什么东西
Penpot 官方上线了 MCP server。Penpot MCP server connects an MCP-compatible AI client to your Penpot files。Penpot帮助中心接上之后，AI 就能用自然语言跟设计稿打交道，设计和开发两边的活都能搭把手。Penpot MCP 能让 AI client 读写设计文件结构，包括 components、styles、tokens、pages、layers 等。知乎注意是"读写"两个字，这可不是一个只能看的接口。
架构上就三个件：MCP server 负责向 AI 客户端暴露工具、转发请求；Penpot 里内置的 MCP 插件负责挂住你当前打开的文件；你手里的 Cursor、Claude Code、Cherry Studio 就是发指令的客户端。官方文档把 Cursor、Claude Code、VS Code、Codex 这些主流客户端的 JSON 配置模板都准备好了，把服务器地址填进去就能用。
二、AI 到底能改到什么程度
Penpot MCP 不是一个只读接口。连接后，AI 真的可以改当前页面：创建元素、移动图层、重命名、改颜色、建组件、生成 token。知乎官方页面也明确列了 create、rename、move、delete、restyle 这些写操作。不过有两个边界要记牢：MCP 只作用于 Penpot 里当前聚焦的那个页面，同时开了多个标签页的话，一次只能有一个标签页持有 MCP 连接。MCP always operates on the page you have in focus in Penpot。Penpot帮助中心社区实测也印证了这一点，它的 MCP 是根据工作页走的。知乎所以切页面之前先想清楚，别让 AI 改错了页。
三、为什么偏偏是 Penpot 能这么玩
很多闭源设计工具做不了这件事，Penpot 能做，答案在底层格式。它的稿子原生就是 SVG，排版直接采用 CSS Flexbox、Grid 这类网页标准。因为它底层直接用真CSS、SVG、Flexbox、Grid和HTML，不用后期转换，超级解决设计手off的痛点。哔哩哔哩换句话说，AI 读到的不是不透明的私有二进制，而是它天然就能理解的结构化内容。Penpot 提供 API，AI 可以直接读取设计稿的组件、样式、设计 Token。知乎所以社区里有个说法在流传：别只拿它当 Figma 平替，它更像一套能被程序和 AI 直接消费的设计基础设施。
四、社区已经玩出了什么
目前社区实测跑通的方向主要两类。设计侧：让 AI 批量建颜色、字体、间距 token，把图层按命名规范统一改名，审计设计系统的一致性和冗余；开发侧：让 AI 从设计稿直接生成语义化的 HTML/CSS，把"设计稿到代码"这步直接做完。官方文档就把这一条列为典型开发用例。Generate HTML/CSS (semantic and modular) from a design (design-to-code)。Penpot帮助中心也有人干脆让 Agent 自动画原型，需求文档丢进去，稿子直接出在 Penpot 里。Penpot 提供 MCP 服务并且支持几乎所有 Agent 接入和访问。知乎
五、账怎么算
为什么这波关注度起来了？一是成本。Figma Professional Full seat 每月 16 美元。一个 5 人设计团队，每年 960 美元。小红书而 Penpot 云版免费，自建版连授权成本都是零。二是数据归属：稿子躺在自己的服务器上，不用担心哪天停订了资产搬不走。如果你在意成本、数据、自托管和 AI 工作流，Penpot 现在已经值得认真试一次。知乎
但冷水也得泼一笔：Penpot 的插件生态、模板库、大团队协作成熟度，跟 Figma 比还有明显差距。团队设计资产全在 Figma 里的，别硬迁，先从"接个 MCP 跑通一个小流程"开始试。
六、上手之前，先知道这几个坑
社区实测踩过的坑，自建用户要注意镜像版本。截至本文成稿，Penpot 的 Image 镜像已经升级了，但是 MCP 镜像还是很老的版本，所以无法使用，需要我们自己去构建的。知乎不想折腾这些的，直接用官方云版加托管的远程 MCP，能省不少事。
另一个容易翻车的点是密钥。MCP key 生成之后只展示一次。The key is shown only once。Penpot帮助中心官方文档特意提醒，要像保管密码一样保管它，别让它出现在截图、日志、代码示例里；怀疑泄露就立刻重新生成，旧 key 会马上作废。
七、最短上手路径
对大多数人来说，推荐的路径是先在 design.penpot.app 注册，用自带模板库把基本操作摸熟，再开 MCP。官方的远程 MCP 是托管好的，不用在本机跑任何东西。Best option for most users, simpler installation and fewer moving parts。Penpot帮助中心
具体就五步：在 Your account → Integrations → MCP Server 里启用 MCP、生成 key；复制带 key 的服务器地址；在你的 MCP 客户端里添加这个服务器；回到 Penpot 打开设计文件，用 File → MCP Server → Connect 连接插件；第一条 prompt 从只读命令开始。官方给的建议是先用检查、列举、导出这类只读操作验证环境。Start with read-only actions (inspect, list, export) to verify your setup。Penpot帮助中心跑通这一步、确认 AI 能看到文件结构之后，再交给它改图层名、整理 token 这种小任务，别一上来就让它重构整个页面。
八、接下来值得盯什么
三个信号：一是官方本地 MCP 的镜像和打包什么时候跟上主版本节奏，这直接决定自建党的折腾成本；二是 Penpot 插件生态的增速，MCP 只是个入口，真正决定好用程度的是生态厚度；三是 AI 设计工具的竞争格局，Pencil 这类新品也在走 Agent 生成原型的路线，下半年这条赛道的对比评测会越来越多。
一句话收尾：还把 Penpot 理解成"免费 Figma"的话，有点落后了。它今年真正亮出来的价值，是把设计稿变成 AI 能读、能改、能出代码的结构化数据。云版免费，先上手试半小时，再决定要不要自建。对独立开发者和 AI 编程重度用户来说，这波 MCP 玩法值得专门花个晚上折腾一下。
