figbridge

figbridge

rudraptpsinghMIT
7 звёзд1 форков
Figbridge — бесплатный локальный мост между Figma и кодом. Это одновременно плагин для Figma Desktop и MCP-сервер для передачи данных. Figbridge решает конкретную задачу: дать ИИ-агенту прямой доступ к дизайну и наоборот — импортировать код в Figma. Агент читает экраны, токены и компоненты. Или загружает в Figma целый сайт по URL. После импорта агент может проверить качество вёрстки, сравнить её с эталоном из репозитория и даже сгенерировать патч. Всё работает полностью локально. Не нужен аккаунт, API-ключи или интернет (кроме самого Figma и агента).
DesignFigma
Открыть на GitHub

Установка

npx -y figbridge-mcp

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

Общее

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

Технологии

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

Описание

Возможности

  • Живой мост: включите Live bridge в плагине — любое выделение в Figma автоматически передаётся агенту.
  • Импорт URL: загрузите любую веб-страницу прямо в Figma как набор фреймов, слоёв и стилей.
  • Предварительная диагностика: команда preflight_import оценивает сложность страницы перед скачиванием.
  • Аудит дизайна: проверьте импортированный макет по пяти критериям соответствия оригиналу.
  • Патчи для репозитория: сравните импорт с исходным кодом и получите готовый патч.
  • Пакет для офлайн-анализа: get_agent_bundle создаёт ZIP с иерархией, токенами, компонентами и инструкциями.
  • Гибридная загрузка: для видео и динамических страниц под редактируемые слои подкладывается скриншот.
  • Захват из Chrome/Edge: расширение передаёт видимую область, всю страницу или выбранный элемент в Figbridge.
  • 45 инструментов MCP: чтение, каталогизация, запись, проверка и экспорт дизайн-систем.
  • Детерминированность: что выбрали в Figma — то и получает агент, без перезаписи LLM.

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

  1. Клонируйте репозиторий плагина для Figma.
  2. Запустите инициализацию MCP-сервера: npx -y figbridge-mcp init
  3. Откройте Figma Desktop, запустите плагин и включите Live bridge.
  4. Добавьте конфигурацию в ваш MCP-клиент (например, Claude Desktop): { "mcpServers": { "figbridge": { "command": "npx", "args": ["-y", "figbridge-mcp"] } } }
  5. Перезапустите клиент.

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

  • «Прочитайте текущий фрейм в Figma, извлеките токены цветов и напишите Tailwind-конфигурацию».
  • «Импортируйте страницу example.com в Figma как новый файл, разбейте на слои по тегам».
  • «Проверьте импортированный макет на отличия от оригинала, особенно шрифты и отступы».
  • «Соберите пакет данных с текущего экрана и подготовьте AGENTS.md для передачи другому разработчику».

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

  • Язык: JavaScript
  • Транспорт: stdio
  • Лицензия: MIT (полностью бесплатно, открытый код)
  • Совместимость: Claude Desktop, Claude Code, Cursor, Continue, Cline и любые другие MCP-клиенты

Поделиться