AI导哈

Penpot MCP 服务器

Penpot MCP Server 是一个模型上下文协议（MCP）服务器，用于将 Penpot 与 AI 助手集成，提供获取面板、调试面板和获取设计令牌等功能。

  • by Mart1M
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 Mart1M/penpot-mcp-server

使用说明

Penpot MCP 服务器

一个用于将Penpot与AI助手集成的模型上下文协议（MCP）服务器。

安装与发布

为了开发

npm install
npm start

对于发布到npm

npm publish

对于用户（通过 npx）

无需安装 - 直接在您的MCP配置中使用npx即可。

配置

Penpot 配置

要使用Penpot API，您需要进行以下配置：

  1. 访问令牌登录到Penpot → 个人资料 → 访问令牌 → 创建新令牌
  2. API URL （可选）：对于自托管的 Penpot 实例

将两者都添加到您的MCP配置环境变量中：

  • PENPOT_ACCESS_TOKEN您的访问令牌
  • PENPOT_API_URLAPI基础URL（默认为 https://design.penpot.app/api）

可用工具

获取棋盘

检索一个Penpot画板。

参数：

  • url (字符串，必填)：包含完整Penpot板的URL board-id

返回： HTML、JSON对象、使用的令牌以及CSS变量

调试板

检索一个Penpot板并显示原始JSON以进行调试。

参数：

  • url (字符串，必填)：包含完整Penpot看板URL的 board-id

获取令牌

从Penpot文件中提取设计令牌。

参数：

  • url （字符串，必填）：完整的Penpot文件URL（仅需 file-id)

返回： DTCG格式的代币、CSS变量和摘要

项目结构

penpot-mcp/
├── index.js                 # Main server
├── src/
│   └── tools/
│       ├── get-board.js     # get_board tool
│       ├── debug-board.js   # debug_board tool
│       └── get-tokens.js    # get_tokens tool
├── package.json
└── README.md

MCP客户端配置

将此配置添加到您的MCP客户端：

{
  "mcpServers": {
    "penpot": {
      "command": "npx",
      "args": [
        "-y",
        "penpot-mcp-server@latest"
      ],
      "env": {
        "PENPOT_ACCESS_TOKEN": "your_penpot_token_here",
        "PENPOT_API_URL": "https://design.penpot.app/api"
      }
    }
  }
}

或者对于本地开发：

{
  "mcpServers": {
    "penpot": {
      "command": "node",
      "args": ["/path/to/penpot-mcp/index.js"],
      "env": {
        "PENPOT_ACCESS_TOKEN": "your_penpot_token_here",
        "PENPOT_API_URL": "https://design.penpot.app/api"
      }
    }
  }
}

相关 MCP