penpot-mcp-server

概述

这个 MCP 服务器为 Penpot 提供全面的设计操作能力，这是一个开源设计工具。它使 AI 助手能够通过 76 多个工具以编程方式创建、修改和管理 Penpot 设计，涵盖项目管理、形状创建和操作、组件系统、团队协作、评论、媒体导出、字体管理、Webhook、搜索等。服务器支持 stdio 和 HTTP 传输模式，使其兼容各种 MCP 客户端和外部应用程序。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

• list_teams

  List all accessible teams

  试试:List all teams I have access to试试:Show me the teams in my Penpot account
• list_projects

  List all accessible projects

  试试:List all projects in my account试试:Show me the available Penpot projects
• list_files

  List files in a project

  试试:Show me all files in the current project试试:List design files in my project
• create_file

  Create a new design file

  试试:Create a new design file for a mobile app试试:Make a new file named 'Website Mockup'
• create_rectangle

  Create rectangle shapes

  试试:Add a red rectangle at position 100,100试试:Create a blue rectangle that's 200x300 pixels
• create_text

  Create text elements with alignment and styling

  试试:Add a heading saying 'Welcome to our website'试试:Create centered text with Arial font
• update_shape

  Modify shape properties like position, size, and style

  试试:Make the blue circle larger试试:Move the rectangle to position 200,200
• export_shape

  Export shape or frame as image (PNG, JPG, SVG, PDF)

  试试:Export the hero section as PNG试试:Save the logo as SVG
• create_component

  Create reusable component from shape

  试试:Make a button component from the rectangle试试:Create a reusable header component
• search_shapes

  Search shapes within a file

  试试:Find all blue shapes on this page试试:Search for text elements containing 'menu'
• upload_file_media

  Upload image file (PNG, JPG, SVG, GIF, WEBP)

  试试:Upload company logo.png试试:Add background image to the design
• get_profile

  Get current user profile

  试试:Show me my profile information试试:Get my account details

可对比工具

安装

# 全局安装
npm install -g @zcubekr/penpot-mcp-server

# 运行服务器
penpot-mcp-server

{
  "mcpServers": {
    "penpot": {
      "command": "node",
      "args": ["/path/to/penpot-mcp-server/dist/index.js"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app",
        "PENPOT_ACCESS_TOKEN": "your-access-token"
      }
    }
  }
}

FAQ

如何获取 Penpot 访问令牌？

1. 登录您的 Penpot 账户 2. 转到设置 → 访问令牌 3. 创建新访问令牌 4. 复制并安全保存

我可以将其与自托管 Penpot 实例一起使用吗？

是的，您需要在自托管实例中通过在 PENPOT_FLAGS 配置中添加 'enable-access-tokens' 来启用访问令牌支持

penpot-mcp-server 对比