如何把 Penpot MCP Server 接入你的 AI 客户端Remote MCP 五步配置【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot想让 AI 客户端Cursor、Claude Code、Copilot 类工具等直接读取并修改 Penpot 里的设计文件需要把 AI 客户端接入 Penpot MCP server。本文覆盖官方RemotehostedMCP server的接入流程在 Penpot 账号中启用 MCP、生成 key、复制 server URL、配置 AI 客户端最后在 Penpot 中把插件连接到当前文件。完成后AI agent 可以基于自然语言在 Penpot 设计文件上执行设计与开发任务包括读写文件的结构components、styles、tokens、pages、layers 等。适用前提你的 Penpot 账号在 Integrations 页面可以看到 MCP Server 入口第 1 步会确认这一点如果走推荐的npx连接命令终端中需要有npx可用。先了解三个组成部分Penpot 的 MCP 集成由三部分构成MCP server向 AI 客户端暴露工具的服务接收客户端请求并转发给 Penpot。MCP 插件运行在 Penpot 内部的插件把打开的文件连接到 MCP server是 server 能访问当前聚焦页面的通道。MCP client你编写 prompt 的工具Cursor、Claude Code 等通过 server URL 和 MCP key 连接到 MCP server。两个决定后续行为的要点MCP key个人、不可恢复non-recoverable的 token用于 AI 客户端向 MCP server 认证每个用户同一时间只能有一个 key。当前聚焦页面currently focused pageMCP 始终作用于 Penpot 中聚焦的页面换页即使在另一个浏览器窗口MCP 上下文也会跟着变。MCP 同时只能在一个浏览器 tab 中处于活动状态——如果你开多个 tab需要先明确选择哪一个拥有 MCP。第一步在 Penpot 账号中启用 MCP进入Your account → Integrations → MCP Server阅读MCP Server区域的简短说明确认该功能对你的账号可用。用Status开关启用 MCP Server。Penpot 会按用户记住这个状态跨会话生效。第二步生成 MCP key首次启用时Penpot 会引导你生成 MCP key。注意两点key只显示一次妥善保存不要把它放进截图、日志或代码示例。创建后 Penpot 会展示 key 本身、过期时间以及一段可直接复制进 MCP 客户端配置的 JSON 配置片段其中 server URL 已把你的 key 作为userToken参数内嵌。第三步复制 server URL在同一个 Integrations 区域复制server URL。这个 URL 已经包含你的 MCP key作为userToken。URL 格式为https://your-penpot-domain/mcp/stream?userTokenYOUR_MCP_KEY其中your-penpot-domain取决于你的 Penpot 部署官方 SaaS 为design.penpot.app。请复制页面上展示的实际 URL点击Copy link成功后会提示Link copied to clipboard而不是自己拼接。页面中的 server URL 展示区如下第四步把 server 加入你的 MCP 客户端文档推荐的主路径是用add-mcp辅助工具配置客户端。在npx可用的终端中执行下文及本节配置片段中的URL都指第三步复制到的 server URL原样替换即可npx -y add-mcp -g -n penpot URL然后按交互提示完成所选客户端的配置。两条可选路径按客户端自身说明配置直接照你客户端连接远程 MCP server的方式填入同一个 server URL。文档特别提到 Claude Desktop 建议把 Penpot MCP Server 添加为自定义 connector。客户端不直接支持 HTTP server如 Claude Desktop文档给出用mcp-remote包做代理的 JSON 配置示例把URL换成你的 server URL{ mcpServers: { penpot: { command: npx, args: [-y, mcp-remote, URL, --allow-http] } } }第五步打开设计文件并连接插件在 Penpot 中打开一个设计文件通过菜单File → MCP Server → Connect把插件连接到当前文件。插件运行在你当前的浏览器 tab 里使用时保持该 tab 和插件窗口可用下文有专门说明。验证连接五步完成后AI 客户端应能列出 Penpot 的工具。文档建议先用只读prompt 验证一切正常List pages in this file.Show all components on this page.Analyze the structure of this design and summarize it.List the color styles and explain how they are used.确认响应正常后再进入轻量写入操作例如Create a color token set for primary colors based on this page.Rename layers on this page to follow a consistent naming scheme. Describe what you will change before applying it.两点边界要记住MCP 连接后AI 客户端可以执行写操作修改当前聚焦的 Penpot 页面create、rename、move、delete、restyle 等。文档建议先做只读操作验证设置要求 agent 先描述将做的更改再应用用小的、可回退的步骤代替大规模全部重构式请求。Remote MCP 没有本地文件系统访问权限因此import_image不支持从本地路径导入export_shape可用但功能受限例如不能直接导出到本地文件路径。保持 Penpot tab 活跃MCP 插件运行在浏览器 tab 中。如果浏览器把该 tab 休眠、冻结或卸载以节省内存MCP server 就无法在 Penpot 中执行任务直到 tab 恢复。此时 MCP 会快速失败而不是等长时间的任务超时不同浏览器下的现象不同Chrome 及 Chromium 系浏览器插件可以报告 tab 正在被冻结。Firefox、Safari 等不暴露相同冻结事件的浏览器MCP 依赖插件心跳浏览器停止运行插件 JavaScript 后心跳过期server 报告 Penpot tab 疑似被挂起。浏览器完全卸载 tab插件断开连接MCP 报告没有 Penpot 插件实例连接。恢复方法重新打开或聚焦 Penpot tab等 MCP 重连后重试 prompt。为减少长会话中被休眠的概率文档按浏览器给出建议设置浏览器推荐设置ChromeSettings → Performance → Always keep these sites active加入你的 Penpot 站点固定pinPenpot tab 也有助于防止 tab 被停用EdgeSettings → System and performance把 Penpot 站点加入永不休眠列表如你的 Edge 版本提供该选项Firefox没有同等的按站点保活控制若 tab 卸载带来问题进阶用户可在about:config中设置browser.tabs.unloadOnLowMemoryfalse关闭 tab 卸载但会增加内存占用Safari没有可比的按站点保活设置长会话期间保持 Penpot tab 打开且处于活动状态key 管理与连接故障排查日常管理都在Your account → Integrations → MCP Server完成重新生成 keyRegenerate MCP key立即撤销当前 key。使用旧 key 的客户端在更新配置新的userToken之前都会停止工作怀疑 key 泄露时应重新生成。key 过期状态key 过期时会出现错误块说明在重新生成 key 之前无法建立连接重新生成后错误状态清除。禁用 MCP 或断开插件即使客户端仍配置着也会阻止 agent 修改你的文件。连接失败时按文档清单逐项尝试重启 MCP server 进程在 Penpot 中重启插件连接重启 MCP 客户端Cursor、Claude Code 等或在客户端中触发 MCP server 重连使用 MCP 期间保持 Penpot 中的插件窗口打开。最后一条来自文档的模型建议使用较强的模型与高质量推理配置需要图像理解时必须使用视觉语言模型VLM大多数商业 LLM 都是 VLM任务越复杂模型选择对结果质量的影响越大。完整的步骤说明与截图见仓库内的 Penpot MCP server 文档。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何把 Penpot MCP Server 接入你的 AI 客户端（Remote MCP 五步配置）
如何把 Penpot MCP Server 接入你的 AI 客户端Remote MCP 五步配置【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot想让 AI 客户端Cursor、Claude Code、Copilot 类工具等直接读取并修改 Penpot 里的设计文件需要把 AI 客户端接入 Penpot MCP server。本文覆盖官方RemotehostedMCP server的接入流程在 Penpot 账号中启用 MCP、生成 key、复制 server URL、配置 AI 客户端最后在 Penpot 中把插件连接到当前文件。完成后AI agent 可以基于自然语言在 Penpot 设计文件上执行设计与开发任务包括读写文件的结构components、styles、tokens、pages、layers 等。适用前提你的 Penpot 账号在 Integrations 页面可以看到 MCP Server 入口第 1 步会确认这一点如果走推荐的npx连接命令终端中需要有npx可用。先了解三个组成部分Penpot 的 MCP 集成由三部分构成MCP server向 AI 客户端暴露工具的服务接收客户端请求并转发给 Penpot。MCP 插件运行在 Penpot 内部的插件把打开的文件连接到 MCP server是 server 能访问当前聚焦页面的通道。MCP client你编写 prompt 的工具Cursor、Claude Code 等通过 server URL 和 MCP key 连接到 MCP server。两个决定后续行为的要点MCP key个人、不可恢复non-recoverable的 token用于 AI 客户端向 MCP server 认证每个用户同一时间只能有一个 key。当前聚焦页面currently focused pageMCP 始终作用于 Penpot 中聚焦的页面换页即使在另一个浏览器窗口MCP 上下文也会跟着变。MCP 同时只能在一个浏览器 tab 中处于活动状态——如果你开多个 tab需要先明确选择哪一个拥有 MCP。第一步在 Penpot 账号中启用 MCP进入Your account → Integrations → MCP Server阅读MCP Server区域的简短说明确认该功能对你的账号可用。用Status开关启用 MCP Server。Penpot 会按用户记住这个状态跨会话生效。第二步生成 MCP key首次启用时Penpot 会引导你生成 MCP key。注意两点key只显示一次妥善保存不要把它放进截图、日志或代码示例。创建后 Penpot 会展示 key 本身、过期时间以及一段可直接复制进 MCP 客户端配置的 JSON 配置片段其中 server URL 已把你的 key 作为userToken参数内嵌。第三步复制 server URL在同一个 Integrations 区域复制server URL。这个 URL 已经包含你的 MCP key作为userToken。URL 格式为https://your-penpot-domain/mcp/stream?userTokenYOUR_MCP_KEY其中your-penpot-domain取决于你的 Penpot 部署官方 SaaS 为design.penpot.app。请复制页面上展示的实际 URL点击Copy link成功后会提示Link copied to clipboard而不是自己拼接。页面中的 server URL 展示区如下第四步把 server 加入你的 MCP 客户端文档推荐的主路径是用add-mcp辅助工具配置客户端。在npx可用的终端中执行下文及本节配置片段中的URL都指第三步复制到的 server URL原样替换即可npx -y add-mcp -g -n penpot URL然后按交互提示完成所选客户端的配置。两条可选路径按客户端自身说明配置直接照你客户端连接远程 MCP server的方式填入同一个 server URL。文档特别提到 Claude Desktop 建议把 Penpot MCP Server 添加为自定义 connector。客户端不直接支持 HTTP server如 Claude Desktop文档给出用mcp-remote包做代理的 JSON 配置示例把URL换成你的 server URL{ mcpServers: { penpot: { command: npx, args: [-y, mcp-remote, URL, --allow-http] } } }第五步打开设计文件并连接插件在 Penpot 中打开一个设计文件通过菜单File → MCP Server → Connect把插件连接到当前文件。插件运行在你当前的浏览器 tab 里使用时保持该 tab 和插件窗口可用下文有专门说明。验证连接五步完成后AI 客户端应能列出 Penpot 的工具。文档建议先用只读prompt 验证一切正常List pages in this file.Show all components on this page.Analyze the structure of this design and summarize it.List the color styles and explain how they are used.确认响应正常后再进入轻量写入操作例如Create a color token set for primary colors based on this page.Rename layers on this page to follow a consistent naming scheme. Describe what you will change before applying it.两点边界要记住MCP 连接后AI 客户端可以执行写操作修改当前聚焦的 Penpot 页面create、rename、move、delete、restyle 等。文档建议先做只读操作验证设置要求 agent 先描述将做的更改再应用用小的、可回退的步骤代替大规模全部重构式请求。Remote MCP 没有本地文件系统访问权限因此import_image不支持从本地路径导入export_shape可用但功能受限例如不能直接导出到本地文件路径。保持 Penpot tab 活跃MCP 插件运行在浏览器 tab 中。如果浏览器把该 tab 休眠、冻结或卸载以节省内存MCP server 就无法在 Penpot 中执行任务直到 tab 恢复。此时 MCP 会快速失败而不是等长时间的任务超时不同浏览器下的现象不同Chrome 及 Chromium 系浏览器插件可以报告 tab 正在被冻结。Firefox、Safari 等不暴露相同冻结事件的浏览器MCP 依赖插件心跳浏览器停止运行插件 JavaScript 后心跳过期server 报告 Penpot tab 疑似被挂起。浏览器完全卸载 tab插件断开连接MCP 报告没有 Penpot 插件实例连接。恢复方法重新打开或聚焦 Penpot tab等 MCP 重连后重试 prompt。为减少长会话中被休眠的概率文档按浏览器给出建议设置浏览器推荐设置ChromeSettings → Performance → Always keep these sites active加入你的 Penpot 站点固定pinPenpot tab 也有助于防止 tab 被停用EdgeSettings → System and performance把 Penpot 站点加入永不休眠列表如你的 Edge 版本提供该选项Firefox没有同等的按站点保活控制若 tab 卸载带来问题进阶用户可在about:config中设置browser.tabs.unloadOnLowMemoryfalse关闭 tab 卸载但会增加内存占用Safari没有可比的按站点保活设置长会话期间保持 Penpot tab 打开且处于活动状态key 管理与连接故障排查日常管理都在Your account → Integrations → MCP Server完成重新生成 keyRegenerate MCP key立即撤销当前 key。使用旧 key 的客户端在更新配置新的userToken之前都会停止工作怀疑 key 泄露时应重新生成。key 过期状态key 过期时会出现错误块说明在重新生成 key 之前无法建立连接重新生成后错误状态清除。禁用 MCP 或断开插件即使客户端仍配置着也会阻止 agent 修改你的文件。连接失败时按文档清单逐项尝试重启 MCP server 进程在 Penpot 中重启插件连接重启 MCP 客户端Cursor、Claude Code 等或在客户端中触发 MCP server 重连使用 MCP 期间保持 Penpot 中的插件窗口打开。最后一条来自文档的模型建议使用较强的模型与高质量推理配置需要图像理解时必须使用视觉语言模型VLM大多数商业 LLM 都是 VLM任务越复杂模型选择对结果质量的影响越大。完整的步骤说明与截图见仓库内的 Penpot MCP server 文档。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考