STARWARCLOUD STARWAR.AI
返回市场
绘图板-mcp

绘图板-mcp

作者：montevive171 星标更新：2025-11-01
安装使用来源：spider==github.com

项目介绍

Penpot MCP Server 🎨🤖

<p align="center"> <img src="images/penpot-mcp.png" alt="Penpot MCP Logo" width="400"/> </p> <p align="center"> <strong>基于AI的设计工作流自动化</strong><br> 通过模型上下文协议连接Claude AI和其他大型语言模型到Penpot设计 </p> <p align="center"> <a href="https://github.com/montevive/penpot-mcp/blob/main/LICENSE"> <img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT"> </a> <a href="https://www.python.org/downloads/"> <img src="https://img.shields.io/badge/python-3.12%2B-blue" alt="Python 版本"> </a> <a href="https://pypi.org/project/penpot-mcp/"> <img src="https://img.shields.io/pypi/v/penpot-mcp" alt="PyPI 版本"> </a> <a href="https://github.com/montevive/penpot-mcp/actions"> <img src="https://img.shields.io/github/workflow/status/montevive/penpot-mcp/CI" alt="构建状态"> </a> </p>

🚀 Penpot MCP 是什么？

Penpot MCP 是一个革命性的模型上下文协议（MCP）服务器，它弥合了AI语言模型与Penpot之间的差距，Penpot是一个开源的设计和原型平台。这种集成使得像Claude这样的AI助手（在Claude桌面和Cursor IDE中）能够理解、分析并以编程方式与你的设计文件互动。

🎯 主要优势

  • 🤖 基于AI的设计分析：让Claude AI分析你的UI/UX设计，提供反馈，并建议改进
  • ⚡ 自动化设计工作流：通过AI驱动的自动化简化重复的设计任务
  • 🔍 智能设计搜索：使用自然语言在项目中查找设计组件和模式
  • 📊 设计系统管理：自动记录和维护设计系统，有AI辅助
  • 🎨 跨平台集成：与任何兼容MCP的AI助手（如Claude桌面、Cursor IDE等）协同工作

🎥 演示视频

观看我们的演示视频，了解Penpot MCP的实际应用：

Penpot MCP 演示

✨ 功能

🔌 核心能力

  • MCP协议实现：完全符合模型上下文协议标准
  • 实时设计访问：直接整合Penpot的API获取实时设计数据
  • 组件分析：AI驱动的设计组件和布局分析
  • 导出自动化：程序化导出多种格式的设计资产
  • 设计验证：自动检查设计系统合规性

🛠️ 开发者工具

  • 命令行工具：强大的CLI工具用于设计文件分析和验证
  • Python SDK：全面的Python库用于自定义集成
  • REST API：HTTP端点用于Web应用程序集成
  • 可扩展架构：插件系统用于自定义AI工作流

🎨 AI集成特性

  • Claude桌面&Cursor集成：对Claude AI助手在Claude桌面和Cursor IDE中的原生支持
  • 设计上下文共享：向AI模型提供设计上下文以获得更好的响应
  • 视觉组件识别：AI可以“看到”并理解设计组件
  • 自然语言查询：用普通英语询问关于你的设计的问题
  • IDE集成：无缝集成到现代开发环境

💡 使用场景

对设计师

  • 设计审查自动化：即时获得关于可访问性、可用性和设计原则的AI反馈
  • 组件文档生成：自动为设计系统生成文档
  • 设计一致性检查：确保品牌指南在整个项目中的一致性
  • 资产组织：AI驱动的设计组件标签和分类

对开发者

  • 设计到代码的工作流：借助AI协助弥合设计与开发之间的差距
  • API集成：程序化访问设计数据以创建自定义工具和工作流
  • 自动化测试：从设计规范生成视觉回归测试
  • 设计系统同步：保持设计令牌和代码组件同步

对产品团队

  • 设计分析：跟踪设计系统采用情况和组件使用情况
  • 协作增强：AI驱动的设计审查和反馈收集
  • 工作流优化：自动化重复设计操作和审批
  • 跨工具集成：将Penpot与其他设计工作流中的工具连接起来

🚀 快速开始

先决条件

  • Python 3.12+（推荐最新版本以获得最佳性能）
  • Penpot账户（免费注册）
  • Claude桌面或Cursor IDE（可选，用于AI集成）

安装

先决条件

  • Python 3.12+
  • Penpot账户凭证

安装

方案1：从PyPI安装

pip install penpot-mcp

方案2：使用uv（推荐用于现代Python开发）

# 直接安装（已发布到PyPI）
uvx penpot-mcp

# 本地开发时使用uvx
uvx --from . penpot-mcp

# 或在项目中安装
uv add penpot-mcp

方案3：从源码安装

# 克隆仓库
git clone https://github.com/montevive/penpot-mcp.git
cd penpot-mcp

# 使用uv（推荐）
uv sync
uv run penpot-mcp

# 或使用传统pip
python -m venv .venv
source .venv/bin/activate  # 在Windows上：.venv\Scripts\activate
pip install -e .

配置

根据env.example创建.env文件，并填写你的Penpot凭证：

PENPOT_API_URL=https://design.penpot.app/api
PENPOT_USERNAME=your_penpot_username
PENPOT_PASSWORD=your_penpot_password
PORT=5000
DEBUG=true

⚠️ CloudFlare保护通知：Penpot云站点（penpot.app）使用CloudFlare保护，可能会偶尔阻止API请求。如果你遇到身份验证错误或被阻止的请求：

  1. 打开你的网络浏览器并导航至https://design.penpot.app
  2. 登录你的Penpot账户
  3. 如果提示，请完成CloudFlare的人类验证挑战
  4. 验证后，API请求应该在一段时间内正常工作

使用

运行MCP服务器

# 使用uvx（已发布到PyPI）
uvx penpot-mcp

# 使用uvx进行本地开发
uvx --from . penpot-mcp

# 使用uv在项目中运行（推荐用于本地开发）
uv run penpot-mcp

# 使用入口点（如果已安装）
penpot-mcp

# 或直接使用模块
python -m penpot_mcp.server.mcp_server

调试MCP服务器

要调试MCP服务器，你可以：

  1. 在你的.env文件中启用调试模式，设置DEBUG=true
  2. 使用Penpot API CLI测试API操作：
# 测试API连接并输出调试信息
python -m penpot_mcp.api.penpot_api --debug list-projects

# 获取特定项目的详细信息
python -m penpot_mcp.api.penpot_api --debug get-project --id YOUR_PROJECT_ID

# 列出项目中的文件
python -m penpot_mcp.api.penpot_api --debug list-files --project-id YOUR_PROJECT_ID

# 获取文件详细信息
python -m penpot_mcp.api.penpot_api --debug get-file --file-id YOUR_FILE_ID

命令行工具

该包包括实用的命令行工具：

# 生成Penpot文件的树形可视化
penpot-tree path/to/penpot_file.json

# 验证Penpot文件是否符合模式
penpot-validate path/to/penpot_file.json

MCP监控与测试

MCP CLI监控

# 在一个终端启动你的MCP服务器
python -m penpot_mcp.server.mcp_server

# 在另一个终端使用mcp-cli监控并与你的服务器交互
python -m mcp.cli monitor python -m penpot_mcp.server.mcp_server

# 或连接到特定端口上的已运行服务器
python -m mcp.cli monitor --port 5000

MCP检查器

# 在一个终端启动你的MCP服务器
python -m penpot_mcp.server.mcp_server

# 在另一个终端运行MCP检查器（需要Node.js）
npx @modelcontextprotocol/inspector

使用客户端

# 运行示例客户端
penpot-client

MCP资源与工具

资源

  • server://info - 服务器状态和信息
  • penpot://schema - Penpot API模式作为JSON
  • penpot://tree-schema - Penpot对象树模式作为JSON
  • rendered-component://{component_id} - 渲染的组件图像
  • penpot://cached-files - 缓存的Penpot文件列表

工具

  • list_projects - 列出所有Penpot项目
  • get_project_files - 获取特定项目的文件
  • get_file - 通过ID检索Penpot文件并缓存
  • export_object - 导出Penpot对象为图像
  • get_object_tree - 获取Penpot对象的对象树结构
  • search_object - 按名称在Penpot文件中搜索对象

AI集成

Penpot MCP服务器可以通过模型上下文协议与AI助手集成。它支持Claude桌面和Cursor IDE，以实现无缝的设计工作流自动化。

Claude桌面集成

详细的Claude桌面设置说明，请参阅CLAUDE_INTEGRATION.md。

在你的Claude桌面配置文件中添加以下配置（macOS上的~/Library/Application Support/Claude/claude_desktop_config.json或Windows上的%APPDATA%\Claude\claude_desktop_config.json）：

{
  "mcpServers": {
    "penpot": {
      "command": "uvx",
      "args": ["penpot-mcp"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app/api",
        "PENPOT_USERNAME": "your_penpot_username",
        "PENPOT_PASSWORD": "your_penpot_password"
      }
    }
  }
}

Cursor IDE集成

Cursor IDE通过其AI集成特性支持MCP服务器。要配置Penpot MCP与Cursor：

  1. 安装MCP服务器（如果尚未安装）：

    pip install penpot-mcp

  2. 配置Cursor设置，将MCP服务器添加到你的Cursor配置中。打开Cursor设置并添加：

    {
  "mcpServers": {
    "penpot": {
      "command": "uvx",
      "args": ["penpot-mcp"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app/api",
        "PENPOT_USERNAME": "your_penpot_username",
        "PENPOT_PASSWORD": "your_penpot_password"
      }
    }
  }
}

  3. 替代方案：使用环境变量，在项目根目录下创建一个.env文件：

    PENPOT_API_URL=https://design.penpot.app/api
PENPOT_USERNAME=your_penpot_username
PENPOT_PASSWORD=your_penpot_password

  4. 启动MCP服务器在你的项目中：

    # 在你的项目目录中
penpot-mcp

  5. 在Cursor中使用：配置完成后，你可以在Cursor中直接与你的Penpot设计互动，例如询问：

    • “显示我Penpot账户中的所有项目”
    • “分析项目X的设计组件”
    • “将主按钮组件导出为图像”
    • “这个文件中使用了哪些设计模式？”

关键集成特性

Claude桌面和Cursor集成都提供了：

  • 直接访问Penpot项目和文件
  • 视觉组件分析带有AI驱动的见解
  • 设计导出能力用于资产和组件
  • 自然语言查询关于你的设计文件
  • 实时设计反馈和建议
  • 设计系统文档生成

包结构

penpot_mcp/
├── api/              # Penpot API客户端
├── server/           # MCP服务器实现
│   ├── mcp_server.py # 主MCP服务器
│   └── client.py     # 客户端实现
├── tools/            # 实用工具
│   ├── cli/          # 命令行接口
│   └── penpot_tree.py # Penpot对象树可视化
├── resources/        # 资源文件和模式
└── utils/            # 辅助工具

开发

测试

该项目使用pytest进行测试：

# 使用uv（推荐）
uv sync --extra dev
uv run pytest

# 运行覆盖率测试
uv run pytest --cov=penpot_mcp tests/

# 使用传统pip
pip install -e ".[dev]"
pytest
pytest --cov=penpot_mcp tests/

代码检查

# 使用uv（推荐）
uv sync --extra dev

# 设置预提交钩子
uv run pre-commit install

# 运行代码检查
uv run python lint.py

# 自动修复代码检查问题
uv run python lint.py --autofix

# 使用传统pip
pip install -r requirements-dev.txt
pre-commit install
./lint.py
./lint.py --autofix

贡献

欢迎贡献！请随意提交Pull Request。

  1. 分叉仓库
  2. 创建你的功能分支（git checkout -b feature/amazing-feature）
  3. 提交你的更改（git commit -m 'Add some amazing feature'）
  4. 推送到分支（git push origin feature/amazing-feature）
  5. 打开Pull Request

请确保你的代码遵循项目的编码标准，并包含适当的测试。

许可证

此项目采用MIT许可证 - 详情见LICENSE文件。

致谢