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

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

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

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

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

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

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

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

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

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

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

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

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

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

Монитор MCP CLI

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

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

Ресурсы и инструменты 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):

Интеграция курсора 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

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

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

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

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

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

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

Разработка

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

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

Линтинг

Внося вклад

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

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

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