Penpot MCP: сервер Penpot и сторонние варианты для Claude и Cursor

penpot/penpot· Проверено 12.11.2026· 62,3 тыс.на GitHub

Подключает агента к макетам Penpot: прочитать структуру файла, создать фреймы, тексты и компоненты, выгрузить элемент в PNG или SVG и забрать CSS и токены для вёрстки.

3 реализации:

Сервер самой Penpot: работает через плагин Penpot MCP в открытом файле, агент пишет и выполняет код на Plugin API; есть облачный вариант, локальный нужен для работы с файлами на диске.

Как подключить

Что сделать до подключения

Node.js 20 или новее; запустить сервер и сервер плагина: npx -y @penpot/mcp@latest

В Penpot открыть файл, в меню Plugins загрузить http://localhost:4400/manifest.json, открыть плагин и нажать Connect to MCP server

Не закрывать окно плагина и держать вкладку Penpot активной во время работы

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --transport http penpot http://localhost:4401/mcp

Проверка: claude mcp list показывает статус рядом с каждым сервером: ✔ Connected, ! Needs authentication или ✘ Failed to connect. Внутри сессии то же видно по команде /mcp.

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.penpot]
url = "http://localhost:4401/mcp"

Проверка: В интерфейсе codex введите /mcp: появится список активных серверов. Из терминала то же покажет codex mcp list.

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "penpot": {
      "url": "http://localhost:4401/mcp"
    }
  }
}

Проверка: Откройте Customize в боковой панели: там список серверов с переключателями. Ошибки подключения смотрите в панели Output (Cmd+Shift+U), пункт MCP Logs в выпадающем списке.

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "penpot": {
      "type": "http",
      "url": "http://localhost:4401/mcp"
    }
  }
}

Проверка: Попросите Copilot выполнить безобидную задачу через сервер и раскройте вызов инструмента в чате. Одна запись в конфиге подключение не подтверждает.

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "penpot": {
      "httpUrl": "http://localhost:4401/mcp"
    }
  }
}

Проверка: Запустите qwen и введите /mcp: откроется окно управления серверами. Из терминала статус покажет qwen mcp list.

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "penpot": {
      "httpUrl": "http://localhost:4401/mcp"
    }
  }
}

Проверка: gemini mcp list показывает каждый сервер, его настройки и статус Connected или Disconnected. В сессии /mcp выводит CONNECTED, CONNECTING или DISCONNECTED и список инструментов.

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "penpot": {
        "type": "remote",
        "url": "http://localhost:4401/mcp"
      }
    }
  }
}

Проверка: opencode mcp list показывает состояние каждого сервера, подключённый выглядит как ✓ context7 connected. Внутри OpenCode то же видно в /mcps.

Настройки → Разработчик → Изменить конфиг: файл claude_desktop_config.json. После правки перезапустите приложение. Подробно о Claude Desktop

Customize → Connectors → добавить свой коннектор.
Адрес сервера: http://localhost:4401/mcp

Проверка: Нажмите «Add files, connectors, and more /» в левом нижнем углу поля ввода, наведите на Connectors и откройте Manage connectors. Выберите сервер, чтобы увидеть его инструменты.

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "penpot": {
      "url": "http://localhost:4401/mcp"
    }
  }
}

Проверка: Попросите модель в чате выполнить задачу через инструмент сервера. Через API сервер из mcp.json вызывают по id в integrations, например mcp/playwright.

Инструменты сервера

high_level_overviewдаёт обзор файла

execute_codeвыполняет код на Plugin API

penpot_api_infoподсказывает по Plugin API

export_shapeвыгружает элемент в PNG или SVG

import_imageвставляет картинку в макет

submit_feedbackотправляет отзыв в Penpot

Работает через API Penpot по токену без плагина: 76 инструментов на файлы, страницы, фигуры, компоненты, комментарии, шрифты, вебхуки и команды.

Как подключить

Что сделать до подключения

Node.js и пакет @zcubekr/penpot-mcp-server: npm install -g @zcubekr/penpot-mcp-server или как зависимость проекта; есть образ ghcr.io/zcube/penpot-mcp-server

Токен доступа Penpot; на своём сервере Penpot добавьте enable-access-tokens в PENPOT_FLAGS

PENPOT_ACCESS_TOKEN

Penpot → Settings → Access Tokens → создать токен

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --env PENPOT_API_URL=https://design.penpot.app --env 'PENPOT_ACCESS_TOKEN=<токен доступа Penpot>' --transport stdio penpot-mcp-server \
  -- npx penpot-mcp-server

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.penpot-mcp-server]
command = "npx"
args = ["penpot-mcp-server"]

[mcp_servers.penpot-mcp-server.env]
PENPOT_API_URL = "https://design.penpot.app"
PENPOT_ACCESS_TOKEN = "<токен доступа Penpot>"

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "penpot-mcp-server": {
      "command": "npx",
      "args": ["penpot-mcp-server"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app",
        "PENPOT_ACCESS_TOKEN": "<токен доступа Penpot>"
      }
    }
  }
}

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "penpot-mcp-server": {
      "type": "stdio",
      "command": "npx",
      "args": ["penpot-mcp-server"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app",
        "PENPOT_ACCESS_TOKEN": "<токен доступа Penpot>"
      }
    }
  }
}

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "penpot-mcp-server": {
      "command": "npx",
      "args": ["penpot-mcp-server"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app",
        "PENPOT_ACCESS_TOKEN": "<токен доступа Penpot>"
      }
    }
  }
}

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "penpot-mcp-server": {
      "command": "npx",
      "args": ["penpot-mcp-server"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app",
        "PENPOT_ACCESS_TOKEN": "<токен доступа Penpot>"
      }
    }
  }
}

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "penpot-mcp-server": {
        "type": "local",
        "command": ["npx", "penpot-mcp-server"],
        "environment": {
          "PENPOT_API_URL": "https://design.penpot.app",
          "PENPOT_ACCESS_TOKEN": "<токен доступа Penpot>"
        }
      }
    }
  }
}

{
  "mcpServers": {
    "penpot-mcp-server": {
      "command": "npx",
      "args": ["penpot-mcp-server"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app",
        "PENPOT_ACCESS_TOKEN": "<токен доступа Penpot>"
      }
    }
  }
}

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "penpot-mcp-server": {
      "command": "npx",
      "args": ["penpot-mcp-server"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app",
        "PENPOT_ACCESS_TOKEN": "<токен доступа Penpot>"
      }
    }
  }
}

Инструменты сервера

list_projectsперечисляет проекты

create_fileсоздаёт файл дизайна

add_pageдобавляет страницу

query_shapesищет фигуры по фильтрам

get_shape_propertiesчитает свойства фигуры

create_frameсоздаёт фрейм

create_rectangleрисует прямоугольник

create_textсоздаёт текст

create_svgвставляет SVG

update_shapeменяет свойства фигуры

align_shapesвыравнивает фигуры

distribute_shapesраспределяет фигуры

create_componentделает компонент

create_comment_threadоткрывает ветку комментариев

export_shapeвыгружает в PNG, JPG, SVG или PDF

upload_file_mediaзагружает картинку

upload_fontзагружает шрифт

create_share_linkсоздаёт ссылку на файл

Показано 18 из 76.

Только для своего Penpot в Docker: читает прямо из PostgreSQL, пишет через RPC API, отдаёт CSS и токены дизайн-системы; 68 инструментов по HTTP.

Как подключить

Что сделать до подключения

Свой Penpot в Docker Compose, Docker Compose v2 и токены доступа: enable-access-tokens в PENPOT_FLAGS

Склонировать репозиторий и запустить ./setup.sh, либо заполнить .env (PENPOT_ACCESS_TOKEN, PENPOT_DB_PASS, PENPOT_PUBLIC_URL) и добавить сервис penpot-mcp в docker-compose.yml Penpot

Для работы с открытым холстом — плагин http://localhost:8787/plugin/manifest.json и флаг enable-plugins-runtime

PENPOT_ACCESS_TOKEN

аватар в Penpot → Access Tokens → Generate new token; токен кладётся в .env сервера

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --transport http penpot-mcp-server http://localhost:8787/mcp

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.penpot-mcp-server]
url = "http://localhost:8787/mcp"

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "penpot-mcp-server": {
      "url": "http://localhost:8787/mcp"
    }
  }
}

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "penpot-mcp-server": {
      "type": "http",
      "url": "http://localhost:8787/mcp"
    }
  }
}

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "penpot-mcp-server": {
      "httpUrl": "http://localhost:8787/mcp"
    }
  }
}

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "penpot-mcp-server": {
      "httpUrl": "http://localhost:8787/mcp"
    }
  }
}

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "penpot-mcp-server": {
        "type": "remote",
        "url": "http://localhost:8787/mcp"
      }
    }
  }
}

Customize → Connectors → добавить свой коннектор.
Адрес сервера: http://localhost:8787/mcp

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "penpot-mcp-server": {
      "url": "http://localhost:8787/mcp"
    }
  }
}

Инструменты сервера

list_projectsперечисляет проекты

get_shape_treeчитает дерево фигур

get_shape_cssвыдаёт CSS фигуры

get_design_tokensвыгружает токены дизайн-системы

get_colors_libraryчитает библиотеку цветов

create_frameсоздаёт фрейм

create_textсоздаёт текст

set_fillменяет заливку

set_layoutзадаёт раскладку

set_fontменяет шрифт

create_commentоставляет комментарий

export_frame_svgвыгружает фрейм в SVG

export_frame_pngвыгружает фрейм в PNG

create_snapshotсохраняет снимок версии

compare_revisionsсравнивает версии

query_databaseвыполняет запрос к базе

Показано 16 из 68.

Что попросить агента

«Покажи мои проекты в Penpot»Сервер zcube или ancrz вызовет list_projects

«Создай форму входа с полями почты и пароля и кнопкой отправки»Penpot MCP Server напишет код через execute_code; ancrz соберёт её через create_frame, create_text и set_fill

«Выгрузи фрейм Login Card в SVG»ancrz вызовет export_frame_svg, Penpot MCP Server — export_shape

«Какие цвета заданы в дизайн-системе?»ancrz вызовет get_colors_library или get_design_tokens

«Сдвинь прямоугольник в 200,200 и сделай его 300×200»Сервер zcube вызовет update_shape

Для каких задач

Собрать форму входа с полями почты и пароля и кнопкой

Создать файл под лендинг мобильного приложения и разложить блоки по фреймам

Выгрузить фрейм в SVG или PNG

Забрать CSS фигуры и токены цветов и шрифтов для вёрстки

Оставить комментарий к макету и отметить ветку решённой

Ограничения

Серверу Penpot нужен открытый плагин в активной вкладке браузера: если вкладку усыпить или закрыть окно плагина, задачи отклоняются

Сервер zcube в облачной design.penpot.app может упереться в защиту Cloudflare; для API автор советует свой сервер Penpot

Вариант ancrz работает только со своим Penpot в Docker и лезет напрямую в базу; у него 12 звёзд и последнее обновление в феврале 2026

У сервера zcube 20 звёзд, часть инструментов (create_path, duplicate_shapes, group_shapes) пока только в планах

Если не работает

Penpot MCP Server перестал выполнять задачи на долгой сессии

Браузер усыпил вкладку Penpot. Держите её активной: в Chrome добавьте сайт в Settings → Performance → Always keep these sites active или закрепите вкладку.

Claude Desktop не видит Penpot MCP Server

Claude Desktop умеет только stdio: подключайте через npx -y mcp-remote http://localhost:4401/mcp --allow-http и полностью выйдите из приложения через Menu → File → Quit.

Claude Code ругается на схему при подключении ancrz

Укажите в конфиге "type": "http". Со значением "streamable-http" Claude Code выдаёт ошибку проверки схемы.

Плагин ancrz в Brave не подключается

Отключите Shield для localhost:9001 и перезагрузите вкладку Penpot.

Какую реализацию выбрать

Реализация	Кто делает	Звёзды	Запуск	Ключ	Инструменты	Обновлён
Penpot MCP Serverразработчик сервиса	Penpot	62,3 тыс.	HTTP	не нужен	6	12 ноября 2026
Penpot MCP Server (zcube)	zcube	20	локально	токен	76	24 июня 2026
Penpot MCP Server (ancrz)	ancrz	12	HTTP	не нужен	68	22 февраля 2026

Частые вопросы

Есть ли у Penpot свой MCP-сервер?

Есть: Penpot MCP Server лежит в репозитории penpot/penpot, в папке mcp. Для работы только с дизайном Penpot советует облачный вариант из справочного центра, локальный запуск нужен, когда серверу нужен доступ к файлам на диске.

Какую модель подключать к Penpot MCP?

Penpot советует самую сильную модель из доступных и обязательно со зрением: многие задачи требуют посмотреть на макет. Слабые и большинство локальных моделей справляются только с простыми задачами.

Плагин не подключается к локальному серверу в Chrome. Что делать?

Начиная с Chromium 142 доступ с design.penpot.app к localhost нужно разрешить во всплывающем окне. В Brave отключите Shield для сайта Penpot. Если не помогло, попробуйте Firefox.

Как получить токен для серверов zcube и ancrz?

В Penpot откройте настройки и раздел Access Tokens, создайте токен. На своём сервере Penpot сначала добавьте enable-access-tokens в PENPOT_FLAGS и перезапустите его.

Как подключить Penpot MCP к Claude Code?

Запустите npx -y @penpot/mcp@latest, подключите плагин в файле и добавьте в Claude Code HTTP-сервер http://localhost:4401/mcp; готовая команда — на вкладке Claude Code в блоке «Как подключить».

Можно ли настроить Penpot MCP одной командой?

Да: npx -y add-mcp -g -n penpot http://localhost:4401/mcp пропишет сервер в выбранные клиенты через интерактивный диалог.

Работает ли сервер из России?

Серверы запускаются у вас; Penpot MCP Server и zcube работают и с облаком design.penpot.app, и со своим сервером Penpot, ancrz — только со своим.

Penpot MCP: сервер Penpot и сторонние варианты для Claude и Cursor

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Что попросить агента

Для каких задач

Ограничения

Если не работает

Какую реализацию выбрать

Частые вопросы

Похожие серверы