Plumb MCP

Plumb MCP

tathagat22MIT
58 звёзд3 форков
Plumb MCP — это сервер для ИИ-агентов, который переносит дизайн из Figma в код с обратной связью. Он читает макеты через десктопный плагин Figma (без лимитов и планов) и возвращает компактную нормализованную спецификацию вместо многосоттысячного JSON от официального API. Главная особенность — встроенный цикл верификации. После того как агент сгенерирует код, команда plumb-mcp verify запускает headless Chrome и проверяет, что свёрстанный интерфейс в точности совпадает с дизайном. Расхождения показываются цветом, без пиксельного diff. Подходит для Claude Code, Cursor, Windsurf и любых MCP-клиентов.
ДизайнРазработкаFigma
Подключить MCPОткрыть на GitHubОфициальный сайт
Подключение

Подключить Plumb MCP

Выберите способ запуска и свой MCP-клиент. Ниже останется одна готовая инструкция, которую можно проверить и скопировать.

1

Способ подключения

2

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

3

Скопируйте и проверьте

Claude

Official Figma remote MCP server with OAuth.

  1. 1.Получите endpoint и токен доступа, если он требуется.
  2. 2.Добавьте remote MCP endpoint в Claude.
  3. 3.Проверьте подключение в списке доступных инструментов.
json
{
  "mcpServers": {
    "plumb-mcp": {
      "url": "https://mcp.figma.com/mcp",
      "transport": "http"
    }
  }
}

Official docs include Claude Code, Codex, Cursor, VS Code, and Xcode setup.

Claude Code plugin and Codex app plugin are preferred paths where available.

Инструкция собрана из данных карточки и пока не отмечена как проверенная редакцией. Сверьте команду с README источника и не передавайте лишние права или секреты.

Как оценить Plumb MCP

Plumb MCP относится к Дизайн, Разработка, Figma. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

Происхождение
Проект сообщества
Лицензия
MIT
Реализация
TypeScript
Транспорт
stdio

Что проверить перед выбором

  • Изучите README, открытые issues и историю последних изменений в репозитории.
  • Проверьте команду установки и зависимости перед запуском в рабочем окружении.
  • Ограничьте доступ MCP-сервера только нужными файлами, API и переменными окружения.

Карточка отредактирована 20.07.2026.

Автоматическая проверка источника ещё не выполнена. Внешних источников в карточке: 2.

Характеристики

Общее

  • СтатусСообщество
  • Разработчикtathagat22
  • ЛицензияMIT

Технологии

  • Языки
    TypeScript
  • Транспорт
    stdio

Описание

Возможности

  • Получение нормализованной спецификации узла из Figma — компактный JSON без лишних данных.
  • Экспорт узла в SVG — для иконок и иллюстраций, которые можно использовать напрямую.
  • Экспорт узла в PNG с настраиваемым масштабом — для растровых изображений.
  • Верификация свёрстанного кода: plumb_verify (MCP-инструмент) или plumb-mcp verify (CLI) сравнивает rendered код с дизайном через headless Chrome и показывает цветовые расхождения.
  • Работа на любом плане Figma — Free, Professional, Enterprise, без ограничения числа запросов.
  • Экспорт SVG-иконок и PNG-картинок прямо на диск агента.
  • Запуск верификации в CI — можно встроить проверку в пайплайн разработки.
  • Совместимость со всеми MCP-агентами: Claude Desktop, Cursor, Windsurf, VS Code и другими.

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

Установите сервер через npm. Убедитесь, что у вас установлен Node.js 18 или новее.

npx -y plumb-mcp

Добавьте конфигурацию в MCP-клиент. Пример для Claude Desktop:

{
  "mcpServers": {
    "plumb": {
      "command": "npx",
      "args": ["-y", "plumb-mcp"]
    }
  }
}

Перезапустите клиент. В интерфейсе появятся инструменты Plumb. Для работы с Figma откройте файл в десктопном приложении Figma и активируйте плагин (плагин установится автоматически после первого запроса).

Примеры запросов

  • «Получи спецификацию экрана логина из Figma.»
  • «Экспортируй иконку пользователя в SVG и сохрани на диск.»
  • «Проверь, соответствует ли моя вёрстка макету главной страницы с помощью инструмента verify.»
  • «Выгрузи изображение кнопки в PNG с масштабом x2.»

Технические детали

  • Язык разработки: TypeScript
  • Транспорт: stdio
  • Лицензия: MIT
  • Совместимые клиенты: Claude Desktop, Cursor, Windsurf, VS Code (Insiders), и любые MCP-хосты
  • Установка: npx -y plumb-mcp
  • Зависимости: Node.js 18+, headless Chrome (для верификации)

Поделиться