本文由 Penpot 赞助 想象一下，除了设计本身之外，您的 Penpot 文件还包含完整的图标集，其中使用了一些但不是全部图标。如果你要求 Claude 或 Gemini 等人工智能仅导出正在使用的图标，它将无法做到这一点。它无法与 Penpot 文件交互。 然而，Penpot MCP 服务器可以。它可以在设定的规则和权限下执行一系列精心挑选的操作，特别是因为 Penpot 拥有广泛的 API，而且因为它是开源的，所以更是如此。 AI 的工作只是理解您的意图，选择 MCP 服务器要执行的正确操作（在本例中为导出），并传递任何参数（即正在使用的图标）。然后，MCP 服务器将其转换为结构化 API 请求并执行。 将 AI 视为餐厅中接受订单的服务器，将 MCP 服务器视为菜单和厨师，将 API 请求视为（希望如此）热盘子上的热披萨派，可能会有所帮助。 究竟为什么选择 MCP 服务器？好吧，Penpot 无法理解您的意图，因为它不是 LLM，也不允许第三方 LLM 与您的 Penpot 文件交互，以确保您的 Penpot 数据的安全和隐私。尽管 Penpot MCP 服务器确实充当安全桥梁，但使用 Penpot 文件和数据作为上下文将 AI 意图转换为 API 请求。 更好的是，由于 Penpot 采用设计表达为代码的方法，因此可以以编程方式在粒度级别上创建、编辑和分析设计。与其他 MCP 服务器提供的服务相比，它更具上下文、更具体，因此更强大，并且比我认为没有人真正想要的低于标准的“描述 → 生成”AI 工作流程更周到。 Penpot 的 AI 白皮书将此描述为糟糕的方法，将“转换为代码”方法描述为丑陋的方法，而 MCP 服务器则更加精致和适应性更强。 特点和技术细节 在我们继续讨论用例之前，这里有一些功能和技术细节，进一步解释了 Penpot MCP 服务器的工作原理：
符合MCP标准； 与 Penpot API 集成以获取实时设计数据； 包括Python SDK、REST API、插件系统和CLI工具； 可与任何支持 MCP 的 AI 助手（VS Code 中的 Claude、Cursor 中的 Claude、Claude Desktop 等）配合使用； 支持与AI模型共享设计上下文，让他们看到并理解组件； 使用自然语言促进与 Penpot 的交流。
那么，MCP 服务器可以让我们在 Penpot 中做什么？现有的实验已经取得了哪些成果？我们来看一下。 Penpot MCP 服务器用例 如果您只是想跳到 Penpot MCP 服务器的功能，Penpot 在 Google Drive 中保存了一些 MCP 演示，非常值得观看。 Penpot 首席执行官 Pablo Ruiz-Múzquiz 提到视频 03、04、06、08 和 12 是他们的最爱。 总结 MCP 服务器的更快方法是观看 Penpot Fest 2025 的揭幕仪式。 除此之外，让我们看一下 Penpot 在公开展示中展示的一些更精致的示例。 从设计到代码再返回（以及更多） 从我之前所说的 Penpot 设计如何表达为代码开始，这意味着 MCP 服务器可以使用 AI 将设计转换为代码，也可以将代码转换为设计，设计转换为文档，文档转换为设计系统元素，基于所述设计系统再次设计为代码，然后基于所述设计系统的全新组件。 这听起来很超现实，但下面的演示展示了这种可转换性，它不是来自模糊的指令，而是来自以前的设计选择，无论它们是如何表达的（设计、代码或文档）。没有什么意外——这些只是你根据之前的决定做出的决定，并且迅速执行。 在演示中，Penpot 的设计师 Juan de la Cruz García 轻松地将一些简单的组件转换为文档、设计系统元素、代码、新组件，甚至像 Play-Doh 一样完整的 Storybook 项目： 按代码设计、设计/代码验证和简单操作 在下面的类似演示中，Oraios AI 联合创始人 Dominik Jain 在更新前端样式之前根据设计创建了一个 Node.js Web 应用程序，将名称和标识符保存到内存中以确保设计到代码的顺利转换，然后再检查一致性，添加了在 Penpot 中选定的形状旁边发表评论，然后用调整后的组件替换 Penpot 中的涂鸦。这里发生了很多事情，但是您可以准确地看到 Dominik 在 Claude Desktop 中输入的内容以及 Claude 的响应，而且非常可靠： 顺便说一下，之前的演示在 VS Code 中使用了 Claude，所以我应该注意 Penpot MCP 服务器与 LLM 无关。您的技术堆栈完全取决于您。 IvanTheGeek 设法使用 JetBrains Rider IDE 和 Junie AI 设置他们的 MCP 服务器。 更多用例 将 Penpot 板转换为可用于生产的语义 HTML 和模块化 CSS，同时利用任何 Penpot 设计标记（请记住，Penpot 设计已经表达为代码，因此这不是凭空猜测）： 生成交互式 Web 原型而不更改现有 HTML： 如前所述，利用现有设计和/或设计系统元素将涂鸦转换为组件： 从 Penpot 文件创建设计系统文档： 以下是 Penpot 和社区的更多用例：
先进的出口， 使用自然语言搜索设计元素， 使用自然语言从外部 API 提取数据， 轻松将 Penpot 连接到其他外部工具， 将重复任务保存到内存中并执行它们， 视觉回归测试， 设计一致性和冗余检查， 可访问性和可用性分析和反馈， 设计系统合规性检查， 指南合规性检查（品牌、内容等）， 通过设计分析监控采用和使用情况， 自动保持文档与设计同步， 设计文件组织（例如，标记/分类）。
从本质上讲，由于您选择的 LLM/LLM 客户端的效率和易用性，Penpot MCP 服务器引领了无限数量的工作流程，但又不会将您的数据暴露给它。 您将使用 MCP 服务器做什么？ Penpot MCP 服务器甚至还没有处于测试阶段，但这是一个您可以参与的活跃实验。 Penpot 用户已经开始探索 MCP 服务器的用例，但 Penpot 希望看到更多。为了确保下一代设计工具满足设计师、开发人员和产品团队的总体需求，必须集体协作构建它们，特别是在人工智能方面。 注意：Penpot 正在寻找渴望探索、实验并帮助完善 Penpot 的 MCP 服务器的 Beta 测试人员。如需加入，请写信至 support@penpot.app，主题为“MCP beta 测试志愿者”。 您是否认为 Penpot MCP 服务器可以做一些当前工具做得不够好、不够快或根本无法做到的事情？ 您可以在这里学习如何设置 Penpot MCP 服务器并立即开始修补，或者如果您的大脑已经充满了想法，Penpot 希望您加入讨论，分享您的反馈，并讨论您的用例。或者，下面的评论部分也是一个不错的起点！
