关键词

Penpot集成AI设计助手LLM插件设计自动化代码执行

项目简介

Penpot AI 设计助手项目旨在通过模型上下文协议 (MCP) 将 Penpot 设计工具与大型语言模型 (LLM) 连接起来。它作为一个 MCP 服务器，利用 Penpot 的插件 API 实现了 LLM 对 Penpot 设计数据的检索、修改和创建能力。该项目包含核心 MCP 服务器、Penpot 插件以及共享类型定义等组件，旨在为 AI 驱动的设计工作流提供强大的后端支持。

主要功能点

  • 设计数据交互： 允许 AI 客户端通过 MCP 协议，以标准化的方式访问和操作 Penpot 设计项目中的数据。
  • 工具暴露： 向 LLM 暴露一系列工具，例如：
    • 'execute_code'：执行自定义 JavaScript 代码，直接调用 Penpot 插件 API，实现对设计元素的精细控制。
    • 'high_level_overview'：提供 Penpot 相关工具和 API 的高级概述，帮助 LLM 快速理解其能力。
    • 'penpot_api_info'：查询 Penpot 插件 API 的详细文档，包括类型和成员信息。
    • 'export_shape'：将 Penpot 中的特定形状导出为 PNG 或 SVG 图像，以便 LLM 能够“查看”设计元素或保存到文件。
  • 会话管理与通信： MCP 服务器通过 WebSocket 与 Penpot 插件通信，并通过 Streamable HTTP、SSE 等协议与 MCP 客户端（如 Claude Desktop）通信，确保 LLM 能够安全、可靠地调用 Penpot 功能。
  • 上下文管理： 管理 LLM 交互所需的上下文信息，包括可用的工具、API 文档以及通过提示模板定义的初始指令。

安装步骤

在开始之前，请确保您的系统已安装 Node.js (推荐使用 v22 或更高版本)。安装 Node.js 后，您应该能在终端中使用 'npm' 和 'npx' 命令。

  1. 构建并启动 MCP 服务器和插件服务器：

    • 打开终端，导航到项目根目录。
    • 首次执行时，安装所有依赖项： 
      npm install
    • 构建所有组件并启动 MCP 服务器和 Penpot 插件的 Web 服务器： 
      npm run bootstrap

    该命令会自动安装所有依赖、构建所有组件并启动它们。 默认情况下，MCP 服务器将在 '4401' 端口运行，Penpot 插件的 Web 服务器在 '4400' 端口运行，而 MCP 服务器用于与 Penpot 插件通信的 WebSocket 服务器在 '4402' 端口运行。

  2. 在 Penpot 中加载插件并建立连接：

    • 浏览器兼容性提示： 较新版本的 Chromium 系浏览器（如 Chrome, Edge）可能由于私有网络访问 (PNA) 限制，默认不允许 Penpot 连接到本地插件服务器。建议使用 Firefox 浏览器，或使用 Chromium 141 及以下版本。
    • 在浏览器中打开 Penpot 并导航到一个设计文件。
    • 打开 Penpot 的“插件”菜单。
    • 使用开发 URL 加载插件，默认地址为 'http://localhost:4400/manifest.json'。
    • 打开插件的用户界面。
    • 在插件 UI 中，点击“Connect to MCP server”按钮。连接状态应从“Not connected”变为“Connected to MCP server”。
    • 重要提示： 在使用 MCP 服务器时，请勿关闭插件的 UI 界面，否则会导致连接断开。

服务器配置

MCP 服务器是为 MCP 客户端提供服务的。为了让您的 MCP 客户端能够与 Penpot MCP 服务器建立连接，您需要根据客户端类型和支持的传输协议进行相应配置。

通常，MCP 客户端配置会要求您提供以下信息：

  • 服务器名称： 一个唯一的标识符，例如 'penpot'。
  • 连接方式：
    • 对于支持现代流式 HTTP 的客户端： 直接提供服务器的 URL，默认为 'http://localhost:4401/mcp'。
    • 对于支持传统 SSE 的客户端： 提供服务器的 SSE URL，默认为 'http://localhost:4401/sse'。
    • 对于仅支持 Stdio 传输的客户端： 您需要使用一个代理（如 'mcp-remote'）。在这种情况下，您需要配置启动代理的命令及其参数。
      • 启动命令 (Command)： 默认为 'npx'。
      • 命令参数 (Args)： 默认为 '["-y", "mcp-remote", "http://localhost:4401/sse", "--allow-http"]'，这些参数指示代理将 Stdio 请求转发到 Penpot MCP 服务器的 SSE 接口。

请查阅您所使用的 MCP 客户端的文档，了解如何添加自定义 MCP 服务器的详细步骤。例如，对于 Claude Desktop，您需要在其配置文件（如 '%APPDATA%/Claude/claude_desktop_config.json'）的 'mcpServers' 部分添加一个 'penpot' 条目，并配置 'command' 和 'args'。

基本使用方法

当 Penpot MCP 服务器启动并成功连接到您的 MCP 客户端后，AI 即可开始与 Penpot 设计项目交互。

  1. 获取 Penpot API 概述： 在与 Penpot 交互之前，AI 可以通过调用 'high_level_overview' 工具来获取关于 Penpot API 和工具使用的基本指导，从而了解其功能和限制。

  2. 查询 Penpot API 文档： 如果 AI 需要深入了解某个 Penpot API 类型或其成员的详细信息，可以调用 'penpot_api_info' 工具，并指定所需的类型名称（例如 'Shape'）或具体的成员名称（例如 'Shape.id'）。

  3. 执行 JavaScript 代码控制 Penpot： AI 可以通过调用 'execute_code' 工具执行 JavaScript 代码，以实现对 Penpot 设计的精细控制。在代码中，AI 可以访问 'penpot' 对象（Penpot 插件 API）、'penpotUtils' 实用工具以及 'storage' 对象（用于存储跨调用状态）。例如，AI 可以编写代码来查询当前画布上的元素，修改它们的属性，甚至创建新的设计组件。

  4. 导出设计形状： 为了可视化某个设计元素或在本地保存它，AI 可以调用 'export_shape' 工具，提供形状的 ID（或使用特殊值 'selection' 导出当前选中的第一个形状）以及期望的格式（PNG 或 SVG）。如果提供了 'filePath' 参数，则会将图像保存到指定路径。

示例 AI 交互：

  • 用户： “展示一下当前选中形状的 PNG 图片。”
  • AI： 调用 'export_shape' 工具，'shapeId' 为 'selection'，'format' 为 'png'。
  • 用户： “我想知道 Penpot 中 'Shape' 类型有哪些属性。”
  • AI： 调用 'penpot_api_info' 工具，'type' 为 'Shape'。
  • 用户： “编写代码将当前页面上所有文本图层的字体大小设置为 20。”
  • AI： 调用 'execute_code' 工具，'code' 为 'penpotUtils.findShapes(shape => shape.type === "text").forEach(textShape => textShape.fontSize = 20);'

通过这些工具，AI 能够以强大的编程方式理解和操作 Penpot 设计，从而实现自动化设计任务和更智能的创意辅助。

信息

分类

AI与计算

访问项目