Skip to main content
Glama
deenesjakoruzh

Penpot MCP Server

by montevive
GitHub
Python
109
  • Apple
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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 и т. д.)

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

Посмотрите наше демонстрационное видео, чтобы увидеть 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 — платформа с открытым исходным кодом для проектирования и создания прототипов
  • Протокол контекста модели — стандартизированный протокол для контекста модели ИИ.
Deploy Server
A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

View all tools

Объединяет языковые модели ИИ с платформой проектирования Penpot, позволяя помощникам ИИ анализировать, искать и взаимодействовать с файлами проектов программным способом для автоматизированных рабочих процессов проектирования.

  1. 🚀 Что такое Penpot MCP?
    1. 🎯 Основные преимущества
  2. 🎥 Демонстрационное видео
    1. ✨ Особенности
      1. 🔌 Основные возможности
      2. 🛠️ Инструменты разработчика
      3. 🎨 Возможности интеграции ИИ
    2. 💡 Варианты использования
      1. Для дизайнеров
      2. Для разработчиков
      3. Для продуктовых команд
    3. 🚀 Быстрый старт
      1. Предпосылки
    4. Установка
      1. Предпосылки
      2. Установка
      3. Конфигурация
    5. Использование
      1. Запуск сервера MCP
      2. Отладка сервера MCP
      3. Инструменты командной строки
      4. Мониторинг и тестирование MCP
      5. Использование клиента
    6. Ресурсы и инструменты MCP
      1. Ресурсы
      2. Инструменты
    7. Интеграция ИИ
      1. Интеграция рабочего стола Клода
      2. Интеграция курсора IDE
      3. Ключевые особенности интеграции
    8. Структура пакета
      1. Разработка
        1. Тестирование
        2. Линтинг
      2. Внося вклад
        1. Лицензия
          1. Благодарности

            Related MCP Servers

            • Metasploit MCP Server

              GH05TCREW
              -
              security
              A
              license
              -
              quality
              Provides a bridge between large language models and the Metasploit Framework, enabling AI assistants to access and control penetration testing functionality through natural language.
              Last updated -
              260
              Apache 2.0
              • Linux
              • Apple

            • 21st.dev Magic AI Agent

              zackbissell
              A
              security
              F
              license
              A
              quality
              A powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.
              Last updated -
              4
              3,918

            • @bldbl/mcp

              chunkydotdev
              A
              security
              A
              license
              A
              quality
              This package enables AI assistants (Claude, GPT, etc.) to work directly with Buildable projects using the Model Context Protocol (MCP). AI assistants can get project context, manage tasks and track progress (for projects created at https://bldbl.dev).
              Last updated -
              7
              10
              4
              MIT License

            • WaniKani MCP Server

              jackedney
              -
              security
              F
              license
              -
              quality
              A bridge that provides AI assistants with access to WaniKani user data and functionality, enabling them to retrieve learning progress, identify difficult items, and offer personalized Japanese language learning assistance.
              Last updated -
              1

            View all related MCP servers

            Appeared in Searches

            New MCP Servers

            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