plumb-mcp — MCP-сервер для Claude Code: что делает и как установить
MCP-сервер для двусторонней связки Figma и кода: переносит макеты или сайты в React, проверяет верстку и генерирует страницы прямо в Figma.
claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> --transport stdio plumb-mcp -- npx -y plumb-mcpЧто делает plumb-mcp
Сервер разбирает экраны Figma или живые веб-страницы в семантический граф. Вместо тяжелого JSON из Figma API инструмент формирует компактную спецификацию: точные flexbox-параметры, объединенные токены и роли блоков вроде nav, hero и card. Для чтения Figma используется плагин десктопного приложения, поэтому ограничений REST API нет даже на бесплатном тарифе.
Инструмент работает в обе стороны. Функция plumb_emit_react генерирует React-код, а plumb_verify сравнивает сверстанный интерфейс с источником и выдаёт список правок. В обратном направлении сервер по текстовому описанию находит референсы через headless Chrome, извлекает палитру и собирает готовый макет в Figma.
Для взаимодействия с холстом нужен плагин десктопной Figma и переменные окружения FIGMA_TOKEN и PLUMB_SESSION_NAME.
Какие задачи решает
- Сконвертировать фреймы Figma или веб-страницу в React с раскладкой на flexbox
- Сверить готовый сверстанный код с исходным макетом через
plumb_verify - Сгенерировать готовые экраны и палитру в Figma по текстовому описанию
- Извлечь структуру и дизайн-токены с работающего сайта через headless Chrome
Примеры запросов агенту
- Сними токены и структуру с макета экрана в Figma через
plumb_node - Сравни сверстанный компонент с источником через
plumb_verifyи покажи расхождения - Собери в Figma страницу дашборда по описанию и добавь блок референсов
Как установить plumb-mcp
Командой платформы
claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> --transport stdio plumb-mcp -- npx -y plumb-mcpВместо <…> подставьте свои значения
Командой платформы
codex mcp add plumb-mcp --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> -- npx -y plumb-mcpВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"plumb-mcp": {
"command": "npx",
"args": [
"-y",
"plumb-mcp"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"PLUMB_SESSION_NAME": "<PLUMB_SESSION_NAME>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"plumb-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"plumb-mcp"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"PLUMB_SESSION_NAME": "<PLUMB_SESSION_NAME>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> -e PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> plumb-mcp npx -y plumb-mcpВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о plumb-mcp
Как установить plumb-mcp в Claude Code?
Выполните команду claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> --transport stdio plumb-mcp -- npx -y plumb-mcp. Перед запуском подставьте персональный токен Figma.
Зачем нужен plumb-mcp?
Сервер связывает агентов с холстом Figma и реальными сайтами. Он выдаёт сжатые деревья стилей для фронтенда, ищет расхождения в коде и строит новые макеты по текстовому описанию.
Нужен ли платный тариф Figma для работы?
Платный тариф не требуется, сервер работает и на бесплатном плане. Чтение и запись макетов выполняются через плагин десктопного приложения в обход лимитов REST API.
