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
Вариант 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 вы можете:
- Включите режим отладки в файле
.env , установив DEBUG=true - Используйте 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 в формате JSONpenpot://tree-schema — схема дерева объектов Penpot в формате JSONrendered-component://{component_id} — визуализированные изображения компонентовpenpot://cached-files — Список кэшированных файлов Penpot
Инструменты
list_projects — Список всех проектов Penpotget_project_files — Получить файлы для определенного проектаget_file — извлечь файл Penpot по его идентификатору и кэшировать егоexport_object — экспорт объекта Penpot как изображенияget_object_tree — Получить структуру дерева объектов для объекта Penpotsearch_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:
- Установите сервер MCP (если он еще не установлен):
- Настройте параметры курсора , добавив сервер 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"
}
}
}
}
- Альтернатива: используйте переменные среды , создав файл
.env в корневом каталоге проекта:PENPOT_API_URL=https://design.penpot.app/api
PENPOT_USERNAME=your_penpot_username
PENPOT_PASSWORD=your_penpot_password
- Запустите MCP-сервер в вашем проекте:
# In your project directory
penpot-mcp
- Использование в курсоре : После настройки вы можете взаимодействовать с вашими проектами 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
Внося вклад
Вклады приветствуются! Пожалуйста, не стесняйтесь отправлять запрос на включение.
- Форк репозитория
- Создайте ветку функций (
git checkout -b feature/amazing-feature ) - Зафиксируйте свои изменения (
git commit -m 'Add some amazing feature' ) - Отправить в ветку (
git push origin feature/amazing-feature ) - Открыть запрос на извлечение
Убедитесь, что ваш код соответствует стандартам кодирования проекта и включает соответствующие тесты.
Лицензия
Данный проект лицензирован по лицензии MIT — подробности см. в файле LICENSE .
Благодарности
- Penpot — платформа с открытым исходным кодом для проектирования и создания прототипов
- Протокол контекста модели — стандартизированный протокол для контекста модели ИИ.