# plumb-mcp

MCP-сервер для двусторонней связки Figma и кода: переносит макеты или сайты в React, проверяет верстку и генерирует страницы прямо в Figma.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 81
- Автор: tathagat22
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/tathagat22/plumb-mcp
- Обновлён: 2026-10-14
- HTML: https://affpapa.org/nevibecode/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`.

## Требования
- Нужно: Node.js (команды через npx)
- Переменные окружения: `FIGMA_TOKEN`, `PLUMB_SESSION_NAME` — это ключи и токены: значения спроси у человека, в репозиторий и общие файлы не записывай.
- Работает с: Figma

## Установка

### Claude Code (родная платформа)

**Командой платформы**
```bash
claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> --transport stdio plumb-mcp -- npx -y plumb-mcp
```
Вместо <…> подставьте свои значения

### Codex

**Командой платформы**
```bash
codex mcp add plumb-mcp --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> -- npx -y plumb-mcp
```
Вместо <…> подставьте свои значения

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "plumb-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "plumb-mcp"
            ],
            "env": {
                "FIGMA_TOKEN": "<FIGMA_TOKEN>",
                "PLUMB_SESSION_NAME": "<PLUMB_SESSION_NAME>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "plumb-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "plumb-mcp"
            ],
            "env": {
                "FIGMA_TOKEN": "<FIGMA_TOKEN>",
                "PLUMB_SESSION_NAME": "<PLUMB_SESSION_NAME>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> -e PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> plumb-mcp npx -y plumb-mcp
```
Вместо <…> подставьте свои значения

## Когда брать
- Сконвертировать фреймы Figma или веб-страницу в React с раскладкой на flexbox
- Сверить готовый сверстанный код с исходным макетом через `plumb_verify`
- Сгенерировать готовые экраны и палитру в Figma по текстовому описанию
- Извлечь структуру и дизайн-токены с работающего сайта через headless Chrome

## Примеры запросов агенту
- Сними токены и структуру с макета экрана в Figma через `plumb_node`
- Сравни сверстанный компонент с источником через `plumb_verify` и покажи расхождения
- Собери в Figma страницу дашборда по описанию и добавь блок референсов

## Похожие
- [Next AI Draw.io](https://affpapa.org/nevibecode/mcp/next-ai-drawio.md) — MCP-сервер · ★ 36398
- [tldraw](https://affpapa.org/nevibecode/mcp/tldraw.md) — MCP-сервер · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · ★ 16062
- [Agent-Native Assets](https://affpapa.org/nevibecode/mcp/agent-native-assets.md) — MCP-сервер · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/nevibecode/mcp/remove-ai-watermarks.md) — MCP-сервер · ★ 6114
- [Dembrandt](https://affpapa.org/nevibecode/mcp/dembrandt.md) — MCP-сервер · ★ 3821

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md