关键词

PenpotUI设计LLMAI设计自动化

项目简介

Penpot MCP服务器是一个基于Model Context Protocol (MCP) 的后端应用，旨在桥接Penpot设计平台和大型语言模型 (LLM) 客户端。它通过标准化的方式向LLM提供Penpot设计文件中的上下文信息和操作能力，例如获取项目、文件、对象的详细结构和属性，以及对象的渲染图像等。这使得LLM能够理解设计内容，并在此基础上执行代码生成、设计分析等任务。

主要功能点

  • Penpot数据访问: 允许LLM客户端获取Penpot项目、文件和其中设计对象的列表与详细信息。
  • 对象搜索: 支持在Penpot文件中按名称搜索特定的设计对象。
  • 结构树提取: 能够提取设计对象的层级结构树，并可根据需要过滤字段和层级深度。
  • 对象渲染: 提供将设计对象（如组件、画板）渲染为图像（PNG, SVG等）的能力。
  • 架构Schema: 提供Penpot API数据和对象树结构的JSON Schema，帮助LLM理解数据格式。
  • 缓存机制: 缓存已获取的设计文件数据，减少对Penpot API的重复请求。
  • 能力声明: 通过MCP标准声明服务器提供的资源和工具，客户端可以动态发现其能力。

安装步骤

  1. 克隆仓库: 
    git clone https://github.com/cale0b/penpot-mcp.git
  2. 进入项目目录: 
    cd penpot-mcp
  3. 安装依赖: 安装Python依赖库，包括'mcp'库和访问Penpot API所需的库。 
    pip install -r requirements.txt
    如果需要运行开发或测试相关的脚本（如linting），还需要安装开发依赖： 
    pip install -r requirements-dev.txt
  4. 配置Penpot API访问:
    • 创建 '.env' 文件在项目根目录。
    • 在 '.env' 文件中配置Penpot API的URL、用户名和密码。这些凭据用于服务器连接到Penpot API获取数据。
    PENPOT_API_URL=https://design.penpot.app/api
[email protected]
PENPOT_PASSWORD=your_penpot_password
# Optionally configure the HTTP server for images (defaults to localhost, random port)
# ENABLE_HTTP_SERVER=true
# HTTP_SERVER_HOST=127.0.0.1
# HTTP_SERVER_PORT=8000 # Specify a port, or leave as 0 for random
    请将示例中的占位符替换为您的实际Penpot账户信息。

服务器配置

MCP服务器通常不会直接作为HTTP服务运行（除非配置了SSE模式），而是通过标准输入/输出(Stdio)或Server-Sent Events (SSE) 协议与MCP客户端通信。MCP客户端需要知道如何启动这个服务器进程。

以下是MCP客户端连接此服务器时所需的启动配置信息（JSON格式注释）：

{
  // 服务器名称，用于在客户端中标识此MCP服务
  "name": "Penpot MCP Server",
  // 启动服务器进程的命令
  "command": "python",
  // 传递给命令的参数，用于指定运行penpot_mcp服务器模块
  "args": ["-m", "penpot_mcp.server.mcp_server"],
  // 启动模式，可以是 "stdio" 或 "sse" (如果服务器支持并配置为该模式)
  // "mode": "stdio", 
  // 如果使用 SSE 模式，可能需要指定端口等信息，但这通常由服务器端配置决定并在初始化时告知客户端
  // "port": 5000 
}

请注意，用户无需手动创建上述JSON，这只是向MCP客户端（如支持MCP协议的LLM应用）开发者提供的配置示例。客户端应用将使用这些信息启动服务器进程并建立通信。

服务器启动时会读取 '.env' 文件中的Penpot API凭据进行自身配置，这些凭据无需在客户端配置中暴露。

基本使用方法

启动服务器后，MCP客户端（例如支持MCP协议的LLM应用）将通过 StdIO 或 SSE 连接到服务器。客户端将发现服务器提供的资源和工具，并通过JSON-RPC调用这些能力来获取Penpot设计数据或执行操作。

典型的LLM与Penpot MCP服务器交互工作流：

  1. LLM通过调用 'list_projects' 工具获取用户在Penpot中的项目列表。
  2. LLM调用 'get_project_files' 工具，提供项目ID，获取该项目下的设计文件列表。
  3. LLM调用 'search_object' 工具，提供文件ID和搜索关键词，查找特定的设计对象（如组件、画板）。
  4. LLM可能调用 'penpot_tree_schema' 资源或工具，获取对象树结构的Schema，了解可用字段。
  5. LLM调用 'get_object_tree' 工具，提供文件ID、对象ID和需要的字段列表/深度，获取该对象的结构树和渲染图像（图片URI）。
  6. LLM可以使用获取到的对象结构树和图像 URI 来理解设计，并结合其他工具或自身能力执行代码生成、分析等任务。获取图像可以使用 'rendered-component://' 资源URI，或通过可选配置启动的HTTP服务器提供的URL。
  7. LLM调用其他工具如 'get_file' (不推荐用于生成任务) 或访问其他资源 ('server://info', 'penpot://schema', 'penpot://cached-files') 根据需要获取更多信息。

注意: 'get_object_tree' 工具是获取设计对象详细结构和可视化信息的主要方式，推荐用于代码生成等任务。

信息

分类

AI与计算

访问项目