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