Penpot MCP Server

Что умеет сервер

Penpot MCP Server соединяет ИИ-клиента с открытым дизайн-инструментом Penpot. Сервер общается с Penpot через плагин, который работает в открытой вкладке браузера и подключён к серверу по WebSocket. Модель выполняет код на Plugin API Penpot, поэтому может читать и менять структуру файла: компоненты, стили, токены, страницы и слои. В локальной версии доступны инструменты execute_code, high_level_overview, penpot_api_info, export_shape и import_image.

В документации Penpot перечислены типичные задачи. Дизайнерам: создавать токены интервалов, типографики и цвета, генерировать варианты компонентов, переименовывать слои по схеме, проверять дизайн-систему на лишнее и несогласованное, делать новые экраны по существующей системе. Разработчикам: извлекать структуру страницы, получать из макета семантичный HTML и CSS, переводить токены в переменные кода, выгружать иконки.

Когда использовать

Сервер удобен тем, кто работает в Penpot или хочет открытую альтернативу закрытым дизайн-сервисам и нуждается в связке «дизайн и код» в обе стороны. Начинайте с запросов только на чтение: перечислить страницы, показать компоненты, описать структуру. Когда вывод вас устроит, переходите к небольшим правкам, например к переименованию слоёв с предварительным описанием планируемых изменений.

Облачный вариант проще и подходит большинству: ничего не нужно запускать, но у него нет доступа к вашей файловой системе, и импорт картинок с локальных путей недоступен. Локальный вариант рассчитан на опытных пользователей и позволяет работать с файлами на диске.

Ограничения и безопасность

Пока подключен MCP, клиент может создавать, переименовывать, перемещать и удалять объекты на странице, которая сейчас в фокусе. Документация советует мелкие обратимые шаги. MCP работает только в одной вкладке браузера за раз, и вкладка должна оставаться активной: если браузер усыпит её, сервер не сможет выполнять задачи. Рекомендуется сильная модель с поддержкой изображений.

MCP-ключ для облачного режима личный, показывается один раз и считается паролем: не публикуйте его и перевыпустите при утечке, при этом старый ключ сразу перестанет работать. Отключение сервера в настройках или плагина в файле останавливает правки. Код сервера и плагина лежит в каталоге mcp основного репозитория Penpot.

Облачный сервер Penpot (удалённый)

В Penpot откройте Your account -> Integrations -> MCP Server, включите переключатель Status и создайте MCP-ключ (он показывается один раз). Скопируйте адрес сервера, в который уже вшит ключ как userToken. Для подключения клиента документация рекомендует проект add-mcp:

npx -y add-mcp -g -n penpot <URL>

где <URL> имеет вид https://<your-penpot-domain>/mcp/stream?userToken=YOUR_MCP_KEY (в официальном облаке домен design.penpot.app). Для Claude Desktop Penpot советует добавить сервер как собственный коннектор. Затем откройте файл в Penpot и выберите File -> MCP Server -> Connect.

Локальный сервер

Нужен Node.js (проверено на версии 22, версия 20 тоже должна работать). Запустите серверы и держите терминал открытым:

npx @penpot/mcp@stable

В README репозитория для последней версии Penpot указана команда:

npx -y @penpot/mcp@latest

Затем в Penpot откройте файл, выберите Plugins -> Load from URL и укажите http://localhost:4400/manifest.json, запустите плагин и нажмите Connect to MCP server. Плагин должен показать Connected, окно плагина закрывать нельзя.

Подключите клиент к локальному адресу:

npx -y add-mcp -g -n penpot http://localhost:4401/mcp

Claude Desktop (локальный сервер через mcp-remote)

Claude Desktop поддерживает только stdio, поэтому нужен прокси mcp-remote. Добавьте в claude_desktop_config.json (Windows: %APPDATA%/Claude/claude_desktop_config.json, macOS: ~/Library/Application Support/Claude/claude_desktop_config.json):

{
    "mcpServers": {
        "penpot": {
            "command": "npx",
            "args": ["-y", "mcp-remote", "http://localhost:4401/mcp", "--allow-http"]
        }
    }
}

После правки конфигурации полностью закройте Claude Desktop через меню и откройте заново.