Design Token Bridge MCP

Design Token Bridge MCP

kenneivesMIT
2 звёзд1 форков
Дизайн-токены — это переменные для цветов, шрифтов, отступов и других свойств интерфейса. Figma, Tailwind, Android (Material 3) и iOS (SwiftUI) используют разные форматы. Синхронизировать их вручную — долго и чревато ошибками. Design Token Bridge — MCP-сервер, который автоматизирует эту синхронизацию. Он извлекает токены из Tailwind Config, CSS Variables, Figma Variables API JSON и W3C DTCG. На выходе — нативный код: Material 3 на Kotlin, SwiftUI с Liquid Glass, конфигурация Tailwind или CSS-переменные. Всё работает прямо в Claude. Вы передаёте файл или ссылку, ассистент делает конвертацию. Сервер подходит фронтендерам, мобильным разработчикам и дизайнерам дизайн-систем. Подробности в репозитории проекта.
ДизайнFigma
Подключить MCPОткрыть на GitHub
Подключение

Подключить Design Token Bridge 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": {
    "design-token-bridge-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 источника и не передавайте лишние права или секреты.

Как оценить Design Token Bridge MCP

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

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

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

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

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

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

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

Общее

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

Технологии

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

Описание

Возможности

Сервер включает 9 инструментов: 4 экстрактора для чтения токенов и 5 генераторов для создания кода.

  • Извлекает цвета, размеры шрифтов, отступы, радиусы и тени из tailwind.config.js
  • Парсит CSS-переменные с префиксами —color, —space, —radius, —shadow
  • Читает Figma Variables API: понимает тип COLOR, FLOAT, разрешает алиасы и мультимоды
  • Разбирает W3C DTCG JSON: значения $value, типы $type, описания $description и ссылки на другие токены
  • Собирает все токены в единую промежуточную схему
  • Генерирует код темы Material 3 на Kotlin для Jetpack Compose
  • Создаёт SwiftUI-тему с поддержкой Liquid Glass для эффектов стекла
  • Обновляет конфигурационный файл Tailwind на основе новых токенов
  • Экспортирует результат в CSS-переменные для веб-проектов

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

  1. Установите сервер глобально через npm:
    npm install -g design-token-bridge-mcp
  2. Пропишите сервер в настройках вашего MCP-клиента. Файл называется claude_desktop_config.json, .mcp.json или settings.json в зависимости от клиента. Пример для Claude Desktop:
{ "mcpServers": { "design-token-bridge": { "type": "stdio", "command": "npx", "args": ["-y", "design-token-bridge-mcp"] } } }

Если вы собрали проект из исходников, укажите путь к скрипту:

"command": "node", "args": ["/путь/к/проекту/build/index.js"]

Перезапустите клиент. Сервер готов к работе.

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

  • «Вот содержимое tailwind.config.js. Создай на его основе тему Material 3 для Android на Kotlin.»
  • «У меня есть JSON-экспорт Figma Variables. Преврати его в CSS-переменные.»
  • «Возьми этот DTCG JSON и сгенерируй под него SwiftUI-тему с Liquid Glass.»
  • «Распарси CSS-файл с кастомными свойствами и создай на его основе обновлённый tailwind.config.js.»

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

  • Язык: TypeScript
  • Транспорт: stdio
  • Лицензия: MIT
  • Количество инструментов: 9
  • Разработчик: kenneives
  • Архитектура: экстракторы приводят токены к универсальной схеме, генераторы конвертируют её в целевой формат
  • Совместимость: Claude Desktop, Claude Code, Continue.dev, Cursor, VS Code GenAI и любые другие MCP-клиенты

Поделиться