Skip to main content
Glama
deenesjakoruzh
montevive

Penpot MCP Server

by montevive
OverviewSchemaRelated ServersScoreDiscussions
Python
Remote

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 в действии:

Демонстрация 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 — платформа с открытым исходным кодом для проектирования и создания прототипов

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

Install Server
A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

How are these scores calculated?

Resources

Tools

View all tools

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/montevive/penpot-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server