Penpot MCP-сервер 🎨🤖

🚀 Что такое Penpot MCP?

Penpot MCP — это революционный сервер Model Context Protocol (MCP), который заполняет пробел между моделями языка ИИ и Penpot , платформой проектирования и прототипирования с открытым исходным кодом. Эта интеграция позволяет помощникам ИИ, таким как Claude (как в Claude Desktop, так и в Cursor IDE), понимать, анализировать и взаимодействовать с вашими файлами дизайна программным способом.

🎯 Основные преимущества

• 🤖 Анализ дизайна AI-Native : позвольте Claude AI проанализировать ваши UI/UX-дизайны, предоставить обратную связь и предложить улучшения

• ⚡ Автоматизированные рабочие процессы проектирования : оптимизируйте повторяющиеся задачи проектирования с помощью автоматизации на базе ИИ

• 🔍 Интеллектуальный поиск по дизайну : находите компоненты и шаблоны дизайна в своих проектах, используя естественный язык

• 📊 Управление дизайн-системами : автоматическое документирование и поддержка дизайн-систем с помощью ИИ

• 🎨 Кроссплатформенная интеграция : работает с любым совместимым с MCP помощником на основе искусственного интеллекта (Claude Desktop, Cursor IDE и т. д.)

Related MCP server: 21st.dev Magic AI Agent

🎥 Демонстрационное видео

Посмотрите наше демонстрационное видео, чтобы увидеть Penpot MCP в действии:

✨ Особенности

🔌 Основные возможности

• Реализация протокола MCP : полное соответствие стандартам Model Context Protocol

• Доступ к проекту в режиме реального времени : прямая интеграция с API Penpot для получения данных о проекте в режиме реального времени

• Анализ компонентов : анализ компонентов и макетов проекта с использованием искусственного интеллекта

• Автоматизация экспорта : программный экспорт ресурсов дизайна в различные форматы

• Проверка проекта : автоматическая проверка соответствия системы проектирования

🛠️ Инструменты разработчика

• Утилиты командной строки : мощные инструменты CLI для анализа и проверки файлов проекта

• Python SDK : комплексная библиотека Python для индивидуальной интеграции

• REST API : конечные точки HTTP для интеграции веб-приложений

• Расширяемая архитектура : система плагинов для пользовательских рабочих процессов ИИ

🎨 Возможности интеграции ИИ

• Интеграция Claude Desktop и Cursor : встроенная поддержка помощника Claude AI в Claude Desktop и Cursor IDE

• Обмен контекстом проектирования : предоставление контекста проектирования моделям ИИ для более точного реагирования.

• Визуальное распознавание компонентов : ИИ может «видеть» и понимать компоненты дизайна

• Запросы на естественном языке : задавайте вопросы о своих проектах на простом английском языке.

• Интеграция с IDE : бесшовная интеграция с современными средами разработки

💡 Варианты использования

Для дизайнеров

• Автоматизация обзора дизайна : получайте мгновенную обратную связь от ИИ по доступности, удобству использования и принципам дизайна.

• Компонентная документация : автоматическое создание документации для систем проектирования

• Проверки согласованности дизайна : обеспечение соответствия принципам бренда во всех проектах.

• Организация активов : маркировка и категоризация компонентов дизайна с помощью искусственного интеллекта

Для разработчиков

• Рабочие процессы «дизайн-код» : сократите разрыв между дизайном и разработкой с помощью ИИ

• Интеграция API : программный доступ к данным проектирования для пользовательских инструментов и рабочих процессов

• Автоматизированное тестирование : создание визуальных регрессионных тестов на основе спецификаций проекта.

• Синхронизация системы проектирования : синхронизация токенов дизайна и компонентов кода.

Для продуктовых команд

• Аналитика дизайна : отслеживание внедрения системы дизайна и использования компонентов

• Улучшение совместной работы : обзоры проектов и сбор отзывов с использованием искусственного интеллекта

• Оптимизация рабочего процесса : автоматизация повторяющихся операций проектирования и утверждения

• Интеграция между инструментами : подключайте Penpot к другим инструментам в вашем рабочем процессе проектирования.

🚀 Быстрый старт

Предпосылки

• Python 3.12+ (для оптимальной производительности рекомендуется последняя версия Python)

• Аккаунт Penpot ( регистрация бесплатная )

• Claude Desktop или Cursor IDE (опционально, для интеграции ИИ)

Установка

Предпосылки

• Питон 3.12+

• Данные учетной записи Penpot

Установка

Вариант 1: Установка из PyPI

pip install penpot-mcp

Вариант 2: Использование uv (рекомендуется для современной разработки на Python)

# Install directly with uvx (when published to PyPI)
uvx penpot-mcp

# For local development, use uvx with local path
uvx --from . penpot-mcp

# Or install in a project with uv
uv add penpot-mcp

Вариант 3: Установка из исходного кода

# Clone the repository
git clone https://github.com/montevive/penpot-mcp.git
cd penpot-mcp

# Using uv (recommended)
uv sync
uv run penpot-mcp

# Or using traditional pip
python -m venv .venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate
pip install -e .

Конфигурация

Создайте файл .env на основе env.example с вашими учетными данными Penpot:

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

Использование

Запуск сервера MCP

# Using uvx (when published to PyPI)
uvx penpot-mcp

# Using uvx for local development
uvx --from . penpot-mcp

# Using uv in a project (recommended for local development)
uv run penpot-mcp

# Using the entry point (if installed)
penpot-mcp

# Or using the module directly
python -m penpot_mcp.server.mcp_server

Отладка сервера MCP

Для отладки сервера MCP вы можете:

1. Включите режим отладки в файле .env , установив DEBUG=true

2. Используйте Penpot API CLI для тестирования операций API:

# Test API connection with debug output
python -m penpot_mcp.api.penpot_api --debug list-projects

# Get details for a specific project
python -m penpot_mcp.api.penpot_api --debug get-project --id YOUR_PROJECT_ID

# List files in a project
python -m penpot_mcp.api.penpot_api --debug list-files --project-id YOUR_PROJECT_ID

# Get file details
python -m penpot_mcp.api.penpot_api --debug get-file --file-id YOUR_FILE_ID

Инструменты командной строки

В пакет входят служебные инструменты командной строки:

# Generate a tree visualization of a Penpot file
penpot-tree path/to/penpot_file.json

# Validate a Penpot file against the schema
penpot-validate path/to/penpot_file.json

Мониторинг и тестирование MCP

Монитор MCP CLI

# Start your MCP server in one terminal
python -m penpot_mcp.server.mcp_server

# In another terminal, use mcp-cli to monitor and interact with your server
python -m mcp.cli monitor python -m penpot_mcp.server.mcp_server

# Or connect to an already running server on a specific port
python -m mcp.cli monitor --port 5000

Инспектор МКП

# Start your MCP server in one terminal
python -m penpot_mcp.server.mcp_server

# In another terminal, run the MCP Inspector (requires Node.js)
npx @modelcontextprotocol/inspector

Использование клиента

# Run the example client
penpot-client

Ресурсы и инструменты MCP

Ресурсы

• server://info - Состояние сервера и информация

• penpot://schema — схема API Penpot в формате JSON

• penpot://tree-schema — схема дерева объектов Penpot в формате JSON

• rendered-component://{component_id} — визуализированные изображения компонентов

• penpot://cached-files — Список кэшированных файлов Penpot

Инструменты

• list_projects — Список всех проектов Penpot

• get_project_files — Получить файлы для определенного проекта

• get_file — извлечь файл Penpot по его идентификатору и кэшировать его

• export_object — экспорт объекта Penpot как изображения

• get_object_tree — Получить структуру дерева объектов для объекта Penpot

• search_object — Поиск объектов в файле Penpot по имени

Интеграция ИИ

Сервер Penpot MCP может быть интегрирован с помощниками ИИ с помощью Model Context Protocol. Он поддерживает как Claude Desktop, так и Cursor IDE для бесшовной автоматизации рабочего процесса проектирования.

Интеграция рабочего стола Клода

Подробные инструкции по настройке Claude Desktop см. в CLAUDE_INTEGRATION.md .

Добавьте следующую конфигурацию в файл конфигурации Claude Desktop ( ~/Library/Application Support/Claude/claude_desktop_config.json на macOS или %APPDATA%\Claude\claude_desktop_config.json на Windows):

{
  "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"
      }
    }
  }
}

Интеграция курсора IDE

Cursor IDE поддерживает серверы MCP через свои функции интеграции AI. Чтобы настроить Penpot MCP с Cursor:

1. Установите сервер MCP (если он еще не установлен):

   pip install penpot-mcp

2. Настройте параметры курсора , добавив сервер MCP в конфигурацию курсора. Откройте настройки курсора и добавьте:

   {
     "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-сервер в вашем проекте:

   # In your project directory
   penpot-mcp

5. Использование в курсоре : После настройки вы можете взаимодействовать с вашими проектами Penpot непосредственно в курсоре, задавая такие вопросы:

   • «Покажите мне все проекты в моем аккаунте Penpot»

   • «Проанализируйте компоненты дизайна в проекте X»

   • «Экспортировать компонент основной кнопки как изображение»

   • «Какие шаблоны проектирования используются в этом файле?»

Ключевые особенности интеграции

Интеграция Claude Desktop и Cursor обеспечивает:

• Прямой доступ к проектам и файлам Penpot

• Визуальный компонентный анализ с использованием идей на основе искусственного интеллекта

• Проектирование возможностей экспорта для активов и компонентов

• Запросы на естественном языке о ваших файлах дизайна

• Отзывы и предложения по дизайну в режиме реального времени

• Создание документации по проектированию системы

Структура пакета

penpot_mcp/
├── api/              # Penpot API client
├── server/           # MCP server implementation
│   ├── mcp_server.py # Main MCP server
│   └── client.py     # Client implementation
├── tools/            # Utility tools
│   ├── cli/          # Command-line interfaces
│   └── penpot_tree.py # Penpot object tree visualization
├── resources/        # Resource files and schemas
└── utils/            # Helper utilities

Разработка

Тестирование

Проект использует pytest для тестирования:

# Using uv (recommended)
uv sync --extra dev
uv run pytest

# Run with coverage
uv run pytest --cov=penpot_mcp tests/

# Using traditional pip
pip install -e ".[dev]"
pytest
pytest --cov=penpot_mcp tests/

Линтинг

# Using uv (recommended)
uv sync --extra dev

# Set up pre-commit hooks
uv run pre-commit install

# Run linting
uv run python lint.py

# Auto-fix linting issues
uv run python lint.py --autofix

# Using traditional pip
pip install -r requirements-dev.txt
pre-commit install
./lint.py
./lint.py --autofix

Внося вклад

Вклады приветствуются! Пожалуйста, не стесняйтесь отправлять запрос на включение.

1. Форк репозитория

2. Создайте ветку функций ( git checkout -b feature/amazing-feature )

3. Зафиксируйте свои изменения ( git commit -m 'Add some amazing feature' )

4. Отправить в ветку ( git push origin feature/amazing-feature )

5. Открыть запрос на извлечение

Убедитесь, что ваш код соответствует стандартам кодирования проекта и включает соответствующие тесты.

Лицензия

Данный проект лицензирован по лицензии MIT — подробности см. в файле LICENSE .

Благодарности

• Penpot — платформа с открытым исходным кодом для проектирования и создания прототипов

• Протокол контекста модели — стандартизированный протокол для контекста модели ИИ.