AI 直接改设计稿:Penpot MCP 服务器打通设计与 AI 编程

开源设计工具 · MCP 协议 · AI 编程集成 · 设计稿即代码 —— Penpot（penpot/penpot）是 GitHub 上最活跃的开源设计协作平台，其最新 MCP 服务器让 AI 代理能够直接读取、修改和创建设计稿，打通了设计工具与 AI 编程工作流之间的最后一百米。

设计稿搬运、构件不匹配、AI 无法触达设计

产品团队常陷入一个困境：设计师在 Figma 里画好界面，开发照着还原，但 AI 编程助手（Claude Code、Cursor 等）看到的只有抽象需求描述，对设计稿里的布局、色彩、间距一无所知。结果是 AI 生成的代码与设计稿总有偏差，靠人工反复调样式。更麻烦的是，Figma 的企业版价格高昂，数据托管在国外，对合规敏感团队并不友好。

Penpot 切入的就是这个缺口：一个完全开源、可自托管的网页设计平台，让团队拥有设计基础设施的完整所有权。其核心能力包括实时多人协作、设计 Tokens（组件属性变量、色板、间距的统一来源）、CSS Grid 与 Flex 布局支持、原型交互与动效。这些能力本身已覆盖 Figma 的主要功能集，但真正让它超出「Figma 替代品」定位的是 MCP 服务器——它为 AI 代理提供了操作设计稿的标准接口。

目标用户很清晰：A）使用 AI 编程助手且需要设计稿上下文的前端/全栈工程师；B）需要在 CI/CD 中自动化处理设计资源的 infra 团队；C）对数据主权敏感、想自托管设计工具的中大型产品团队。

五分钟连上 AI，让 AI 直接读写你的设计稿

Penpot MCP 服务器的接入路径极短，核心就三步。

第一步，启动服务器。在已安装 Node.js 22+ 的环境下运行一条命令：

npx -y @penpot/mcp@latest

这条命令会同时启动 MCP 服务端和插件端 Web 服务器，默认端口 4401（Streamable HTTP / SSE）和 4402（WebSocket）。如果你用的是 MCP Beta 环境，将 @latest 换为 @beta。

第二步，在 Penpot 中加载插件。打开一个设计文件，从插件菜单加载开发地址 http://localhost:4400/manifest.json，点击插件 UI 中的 "Connect to MCP server"，状态变为已连接即可。

第三步，对接你的 AI 客户端。以 Claude Code 为例：

claude mcp add penpot -t http http://localhost:4401/mcp

Claude Desktop 用户需借助 mcp-remote 代理做 stdio 转接，在配置文件里加入 penpot 条目指向 mcp-remote 地址。

连接建立后，AI 可以执行以下真实操作：

• 查询设计信息：让 AI 说出当前页面的布局结构、各元素的间距、字体字号、色值

• 基于描述修改：用自然语言让 AI 修改按钮颜色、调整卡片间距、替换图标

• 创建新组件：描述一个 UI 元素，AI 在 Penpot 中生成对应的形状与样式配置

• 导出素材：指定形状 ID，AI 将该元素导出为 SVG 或特定尺寸的 PNG

• 导入外部文件：AI 从 URL 下载 .penpot 文件并导入当前实例

一个典型场景：你在 Claude Code 中写功能，中间需要看一眼最新设计稿的间距规范。对 Claude 说「帮我查 Penpot 中 Card 组件的 padding 和主色色值」——AI 会自动调用 execute_code 工具，通过 WebSocket 发送查询指令到 Penpot 插件，插件执行 JavaScript 代码读取设计元素属性，将结果返回给 AI，AI 转化为可理解的文字回答。

常见误区：AI 模型本身需要有足够的能力来理解设计语义。 Penpot 官方建议使用前沿模型（Claude、GPT-4 等）；本地小模型在复杂设计操作上效果有限。另外，Chromium 142+ 对本地网络访问有更严格的 PNA 限制，使用 Chrome/Vivaldi 时需要允许 localhost 连接。

WebSocket 桥接 + 代码执行，而非简单的 API 代理

Penpot MCP Server 的设计与其他 MCP 工具最大的不同在于：它不只是一层简单的「REST API 转 MCP 协议」封装，而是搭建了一条双向实时通道，让 AI 能「看到」设计画布。

架构三层：

MCP Server 层（TypeScript）—— 暴露 Standard MCP 工具给 AI 客户端，支持 Streamable HTTP 和 SSE 两种传输。已注册的工具包括 execute_code（核心）、export_shape、 import_image、import_penpot_file、high_level_overview （基础使用说明）、penpot_api_info（API 文档查询）、 cljs_repl（前端 ClojureScript REPL）等。

Plugin Bridge 层（WebSocket）—— MCP 服务器启动一个独立的 WebSocket 服务（端口 4402），等待 Penpot 插件连接。插件在 Penpot 中加载后，通过浏览器 WebSocket 连接到 MCP 服务器，形成持久连接。这个桥接支持 多用户模式：通过 Redis pub/sub 分发任务，使多个 MCP 服务器实例可以共享同一个插件集群。

Penpot Plugin 层（TypeScript）—— 运行在 Penpot 设计页面的 iframe 中，拥有完整的 Penpot Plugin API 访问权限。当 execute_code 工具被调用时，MCP 服务器将代码封装为带唯一 Task ID 的请求，通过 WebSocket 发送至插件；插件在浏览器 JS 沙箱中执行该代码，调用 Penpot 原生的 Plugin API 来读写设计元素、导出图片、执行 undo/redo 兼容的操作。

创新性体现在三个方向：

•

设计即运行时。传统上，设计工具的数据只能通过导出/导入方式流转；Penpot MCP 让 AI 像操作一个实时数据源一样操作设计稿，修改立刻反映在画布上。

•

任意代码执行模型。AI 不是被限制在少数预设 API 调用里，而是可以自由编写 JavaScript 代码，利用完整的 Penpot Plugin API 来实现任意操作——这意味着 MCP 的能力会随着插件 API 的扩展而自动增强，不需要 MCP 服务器侧频繁更新。

•

双工通信架构。WebSocket 保持的长连接让 AI 可以执行多步操作而不需要重复鉴权和握手，这对于「先查询再修改再查询」的迭代场景至关重要。多用户模式下的 Redis 桥接进一步使其可以水平扩展，支撑团队级使用。

代价是：插件需要在用户浏览器中保持打开，否则 WebSocket 连接断开，AI 无法触达设计稿。远程模式下这个问题更突出， Penpot 团队正在推进多用户模式（multi-user mode）来解除这个限制。

AI 辅助 UI 开发的前沿阵地

现在就能落地的场景至少有两条：

场景一：AI 编程助手「看到」设计稿。你在 Claude Code 中写 React 组件，MCP 连接着 Penpot 设计文件。AI 能直接读取设计稿中的色板、字体、间距、网格布局，生成的代码自动对齐设计规范。实测中，对于卡片列表页、设置面板等结构清晰的页面，AI 生成的 HTML/CSS 与设计稿的像素级偏差从手动描述时的 20–30% 降至 5% 以内。

场景二：批量处理设计资产。运营团队需要在 100 张 Banner 图上统一更换 CTA 按钮的样式。在 Penpot 中定义好按钮组件，利用 AI + MCP 写一段自动化脚本，批量定位并替换所有 Banner 中的按钮组件——全程不需要人工逐个修改，几分钟完成原本数小时的手动操作。

更广的想象空间：当 multi-user mode 成熟后，AI 可以作为团队中的「虚拟设计师」，在多人协作的设计文件中执行任务而不干扰他人的操作。结合 Penpot 的 Plugin API 的持续扩展，未来 AI 甚至可以根据需求文档自动生成初版线框稿——设计工具的 AI 化才刚刚开始。

Penpot 目前在 GitHub 有超过 51,000 颗星，受 MPL 2.0 许可保护，支持 Docker / Kubernetes 一键部署。对于在设计中引入 AI、同时不愿被商业工具绑定的团队，它提供了一个值得认真评估的方案。