Представьте, что ваш файл PenPot содержит полный набор значков в дополнение к дизайну, в котором используются некоторые, но не все из этих значков. Если вы попросите ИИ, такой как Cloud или Gemini, экспортировать только те значки, которые вы используете, он не сможет этого сделать. Он не может взаимодействовать с файлами Penpot.
Тем не менее, mcp-сервер Penpot Могу сделать. Он может выполнять определенное количество операций в соответствии с установленными правилами и разрешениями, особенно потому, что PenPot имеет обширный API и тем более потому, что он открытый исходный код.
Задача ИИ состоит в том, чтобы просто понять ваши намерения, выбрать правильную операцию для сервера MCP (в данном случае экспорт) и передать любые параметры (например, используемый значок). Затем сервер MCP преобразует это в структурированный запрос API и выполняет его.
Возможно, будет полезно представить ИИ как сервер в ресторане, который принимает ваш заказ, сервер MCP как меню и шеф-повара, а запрос API — как (надеюсь) горячую пиццу на горячей тарелке.
Зачем вообще MCP Server? Что ж, Penpot не может понять ваши намерения, поскольку он не является LLM и не позволяет сторонним LLM взаимодействовать с вашими файлами Penpot, чтобы защитить безопасность и конфиденциальность ваших данных Penpot. Хотя серверы Penpot MCP действуют как безопасный мостПреобразование намерений ИИ в запросы API с использованием файлов и данных Penpot в качестве контекста.
Что еще лучше, так это то, что Пенпот берет Подход «дизайн-экспресс-код»Проекты можно создавать программно, редактировать и анализировать на детальном уровне. Это более актуально, более конкретно и, следовательно, более мощно, чем то, что предлагают другие серверы MCP. прочь Более продуманный, чем подпункт «описать → сгенерировать» рабочий процесс ИИ, который, я думаю, никому не нужен. В официальном документе Penpot по искусственному интеллекту этот подход описывается как плохой, а подход «преобразование в код» — как уродливый подход, тогда как серверы MCP более сложны и адаптируемы.
Особенности и технические детали
Прежде чем мы перейдем к вариантам использования, вот некоторые функции и технические детали, которые дополнительно объясняют, как работают серверы Penpot MCP:
- Соответствует стандартам MCP;
- Интегрируется с Penpot API для получения проектных данных в реальном времени;
- Он включает в себя Python SDK, REST API, систему плагинов и инструменты CLI;
- Работает с любым AI-помощником с поддержкой MCP (облако в VS Code, облако в курсоре, облачный рабочий стол и т. д.);
- ИИ поддерживает совместное использование контекста проектирования с моделями и позволяет им видеть и понимать компоненты;
- Облегчает общение с Penpot на естественном языке.
Итак, что же серверы MCP могут позволить нам делать в Penpot и чего уже достигли существующие эксперименты? давайте посмотрим.
Варианты использования сервера Penpot MCP
Если вы просто хотите почувствовать, на что способны серверы Penpot MCP, у Penpot есть несколько демо-версий MCP, хранящихся на Google Диске, которые стоит посмотреть. Генеральный директор Painpot Пабло Руис-Музкис отметил, что видео 03, 04, 06, 08 и 12 — его любимые.
Еще один быстрый способ подвести итоги о серверах MCP — посмотреть презентацию PennyPot Fest 2025.
В противном случае давайте взглянем на некоторые из более сложных примеров, которые Penpot продемонстрировала на своей публичной выставке.
Преобразование дизайна в код и обратно (и многое другое)
Опираясь на то, что я говорил ранее о том, как дизайн PenPot выражается в виде кода, это означает, что сервер MCP можно использовать для преобразования дизайна в код с помощью ИИ, но код также можно использовать для преобразования дизайна в код, от проекта к документации, для проектирования элементов системы и обратно в код. основанный на Об этой системе дизайна, а затем о совершенно новых компонентах, основанных на этой системе дизайна.
Это звучит нереально, но демо ниже показывает это. изменчивостьИ это не расплывчатые инструкции, а предыдущие варианты дизайна, независимо от того, как они были выражены (дизайн, код или документация). Здесь нет никаких сюрпризов – это просто решения, которые вы, возможно, приняли на основе предыдущих решений, и которые будут быстро реализованы.
В демо-версии Хуан де ла Крус Гарсия, дизайнер Penpot, плавно превращает несколько простых компонентов в целый проект сборника рассказов, дополненный документацией, элементами системы проектирования, кодом, новыми компонентами и даже кусочком пластилина Play-Doh:
Проектирование по коду, проверка проекта/кода и простота эксплуатации.
В той же демонстрации ниже Доминик Джайн, соучредитель Oreos AI, создает веб-приложение Node.js на основе дизайна перед обновлением стилей внешнего интерфейса, сохраняет имена и идентификаторы в памяти, чтобы обеспечить плавный перевод дизайна в код перед проверкой согласованности, добавляет комментарий рядом с выбранной фигурой в Penpot, а затем заменяет каракули в Penpot настраиваемым компонентом. Здесь много всего происходит, но вы можете видеть, что Доминик вводит на рабочий стол Cloud, а также ответы Cloud. Очень сильный:
Кстати, в предыдущей демонстрации Cloud в VS Code использовался, так что мне стоит сосредоточиться на этом. Серверы Penpot MCP не зависят от LLM. Ваш технологический стек полностью зависит от вас. IvanDaGeek сумел настроить свой MCP-сервер с помощью JetBrains Rider IDE и Juni AI.
больше вариантов использования
Переведите доску Penpot в готовый к использованию семантический HTML и модульный CSS, воспользовавшись преимуществами любых токенов дизайна Penpot (помните, что проекты Penpot уже выражены в виде кода, поэтому это не попытка вслепую):
Создайте интерактивный веб-прототип без изменения существующего HTML:
Преобразуйте набросок в компонент, используя существующие элементы дизайна и/или системы проектирования, как показано ранее:
Создайте документ системы проектирования из файла penpot:
И вот еще несколько вариантов использования от Penpot и сообщества:
- передовой экспорт,
- Откройте для себя элементы дизайна, используя естественный язык,
- Извлекайте данные из внешнего API, используя естественный язык,
- Легко подключайте PenPot к другим внешним устройствам.
- Сохранение повторяющихся задач в памяти и их выполнение,
- визуальное регрессионное тестирование,
- Проверка стабильности и избыточности конструкции,
- Анализ доступности и удобства использования и обратная связь,
- Проверка соответствия системы проектирования,
- Проверка соответствия рекомендациям (торговая марка, ингредиенты и т. д.),
- Отслеживайте внедрение и использование с помощью аналитики дизайна,
- Автоматически синхронизируйте документацию с проектами,
- Организация файлов проекта (например, маркировка/классификация).
По сути, серверы Penpot MCP открывают путь для бесконечное количество рабочих процессов Благодаря эффективности и простоте выбранного вами клиента LLM/LLM, но без раскрытия ваших данных.
Для чего вы будете использовать MCP Server?
Серверы Penpot MCP даже не находятся на стадии бета-тестирования, но этот активный эксперимент Частью которого вы можете стать. Пользователи Penpot уже начали изучать варианты использования MCP Server, но Penpot хочет увидеть больше. Чтобы инструменты проектирования следующего поколения отвечали потребностям дизайнеров, разработчиков и продуктовых команд в целом, их необходимо создавать в целом И форма сотрудничестваОсобенно в том, что касается ИИ.
Комментарий: : Penpot ищет бета-тестеров, которые готовы помочь исследовать, экспериментировать и совершенствовать сервер MCP Penpot. Чтобы присоединиться, напишите по адресу support@penpot.app, указав в теме письма «Волонтер бета-тестирования MCP».
Есть ли что-нибудь, что, по вашему мнению, могут делать серверы Penpot MCP, чего существующие инструменты не могут сделать достаточно хорошо, достаточно быстро или вообще?
Вы можете узнать, как настроить сервер Penpot MCP прямо здесь и начать вносить изменения сегодня, или, если у вас уже есть идеи, которые крутятся в вашей голове, Penpot хотел бы, чтобы вы присоединились к обсуждению, поделились своими отзывами и рассказали о своих вариантах использования. Альтернативно, раздел комментариев ниже тоже неплохое место для начала!
(ГГ, ЮК)
