Каталог MCP
kenneives/design-token-bridge-mcp

kenneives/design-token-bridge-mcp

Name: kenneives/design-token-bridge-mcp
Availability: InStock
Author: kenneives

MCP сервер для трансляции дизайн-токенов: извлекает из Tailwind, CSS, Figma или W3C DTCG и генерирует темы под Kotlin, SwiftUI, Tailwind и CSS-переменные. Полезен разработчикам и дизайнерам в пайплайне v0 → Figma → Claude Code.

Github NPM Сайт сервера

README

9 инструментов

Версии

Установить сервер

— signed, offline-verifiable tool-safety grade

design-token-bridge-mcp

_{Verified on AgentGraph — trust infrastructure for AI agents. View profile}

An MCP server that translates design tokens between platforms. Extract tokens from Tailwind, CSS, Figma, or W3C DTCG format — then generate native themes for Material 3 (Kotlin), SwiftUI (with Liquid Glass), Tailwind, and CSS Variables.

Built for the v0 → Figma → Claude Code design pipeline.

┌──────────────┐     ┌──────────────┐     ┌────────────────────────┐
│  Tailwind     │     │              │     │  Material 3 (Kotlin)   │
│  CSS Vars     │────▶│  Universal   │────▶│  SwiftUI (Swift)       │
│  Figma Vars   │     │  Token       │     │  Tailwind Config       │
│  W3C DTCG     │     │  Schema      │     │  CSS Variables         │
└──────────────┘     └──────────────┘     └────────────────────────┘
    Extractors           Bridge              Generators

Install

From npm

npm install -g design-token-bridge-mcp

From source

git clone https://github.com/kenneives/design-token-bridge-mcp.git
cd design-token-bridge-mcp
npm install && npm run build

Configure with Claude Code

Add to your Claude Code MCP settings (~/.claude/settings.json or project .mcp.json):

Инструменты были проиндексированы: 18.10.2026

extract_tokens_from_css

Разбирает CSS-кастомные свойства (переменные) и извлекает дизайн-токены

Параметры

cssstringобязательный
Содержимое CSS-файла с пользовательскими свойствами.

extract_tokens_from_figma_variables

Разобрать JSON экспорта переменных Figma и извлечь дизайн-токены

Параметры

variablesstringобязательный
Экспортирует JSON из REST API Figma Variables в виде строки.

extract_tokens_from_json

Парсит JSON в формате W3C Design Tokens Community Group (DTCG) в универсальные токены

Параметры

jsonstringобязательный
JSON-строка в формате W3C DTCG

extract_tokens_from_tailwind

Разобрать конфигурацию Tailwind и извлечь значения темы в универсальные дизайн-токены

Параметры

configstringобязательный
Содержимое файла tailwind.config.js или tailwind.config.ts.

generate_css_variables

Сгенерировать CSS-кастомные свойства из универсальных токенов дизайна с поддержкой светлой и тёмной темы

Параметры

darkTokensstring
Необязательная строка JSON с универсальными дизайн-токенами тёмного режима.
tokensstringобязательный
Универсальные дизайн-токены в формате JSON-строки

generate_material3_theme

Создаёт файлы темы Kotlin Jetpack Compose Material 3 из универсальных design tokens.

Параметры

tokensstringобязательный
Универсальные дизайн-токены в формате JSON-строки

generate_swiftui_theme

Сгенерировать файлы темы SwiftUI из универсальных дизайн-токенов, с опциональной поддержкой Liquid Glass

Параметры

liquidGlassboolean
Включает модификаторы Liquid Glass для iOS 26+.
tokensstringобязательный
Универсальные дизайн-токены в формате JSON-строки

generate_tailwind_config

Создай тему tailwind.config.js из универсальных токенов дизайна

Параметры

formatenum
Формат вывода: ES modules или CommonJS
tokensstringобязательный
Универсальные дизайн-токены в формате JSON-строки

validate_contrast

Проверяет цветовые комбинации в design tokens на соответствие требованиям доступности WCAG AA/AAA.

Параметры

levelenum
Уровень соответствия WCAG для проверки
tokensstringобязательный
Универсальные дизайн-токены в формате JSON-строки

`1.0.2`основная	19.02.2026
`1.0.1`	19.02.2026
`1.0.0`	19.02.2026

Выберите клиент, чтобы установить kenneives/design-token-bridge-mcp:

Любой клиент

Конфиг добавления MCP сервера стандартный, обычно он не меняется вообще, поэтому подходит практически к любому ИИ клиенту, поддерживающему MCP.

{
  "mcpServers": {
    "kenneives-design-token-bridge-mcp-u8c1f8jpxx": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "design-token-bridge-mcp"
      ]
    }
  }
}

Cursor

Перейдите по ссылке и сервер автоматически будет добавлен в Cursor. Либо откройте/создайте файл ~/.cursor/mcp.json(%USERPROFILE%\.cursor\mcp.json на Windows) и добавьте конфиг сервера:

{
  "mcpServers": {
    "kenneives-design-token-bridge-mcp-u8c1f8jpxx": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "design-token-bridge-mcp"
      ]
    }
  }
}

VS Code

Создайте .vscode/mcp.json в проекте (ключ верхнего уровня — servers):

{
  "servers": {
    "kenneives-design-token-bridge-mcp-u8c1f8jpxx": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "design-token-bridge-mcp"
      ]
    }
  }
}

Либо добавьте сервер через терминал:

code --add-mcp "{\"name\":\"kenneives-design-token-bridge-mcp-u8c1f8jpxx\",\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"-y\",\"design-token-bridge-mcp\"]}"

Claude Desktop

Откройте Settings → Developer → Edit Config — это откроет файл claude_desktop_config.json:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Впишите сервер и полностью перезапустите Claude Desktop:

{
  "mcpServers": {
    "kenneives-design-token-bridge-mcp-u8c1f8jpxx": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "design-token-bridge-mcp"
      ]
    }
  }
}

Claude Code

Добавьте сервер одной командой в терминале:

claude mcp add kenneives-design-token-bridge-mcp-u8c1f8jpxx -- npx -y design-token-bridge-mcp

Либо через JSON-конфиг:

claude mcp add-json kenneives-design-token-bridge-mcp-u8c1f8jpxx "{\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"-y\",\"design-token-bridge-mcp\"]}"

Codex

Добавьте сервер командой в терминале:

codex mcp add kenneives-design-token-bridge-mcp-u8c1f8jpxx -- npx -y design-token-bridge-mcp

Либо вручную в ~/.codex/config.toml(%USERPROFILE%\.codex\config.toml на Windows):

[mcp_servers.kenneives-design-token-bridge-mcp-u8c1f8jpxx]
command = "npx"
args = ["-y", "design-token-bridge-mcp"]

Perplexity

MCP доступен подписчикам Perplexity Pro / Max / Enterprise. Локальные серверы — только в приложении для macOS.

Откройте Настройки аккаунта → Connectors.
Установите вспомогательное приложение PerplexityXPC (один раз).
Нажмите Add Connector → вкладка Simple.
В поле Server Name укажите kenneives/design-token-bridge-mcp, а в поле команды запуска — строку ниже:

npx -y design-token-bridge-mcp

Нажмите Save и дождитесь статуса Running.

Windsurf

Откройте Windsurf Settings → Cascade → MCP Servers или отредактируйте файл ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "kenneives-design-token-bridge-mcp-u8c1f8jpxx": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "design-token-bridge-mcp"
      ]
    }
  }
}

Cline

В панели Cline нажмите иконку MCP Servers → Configure → Configure MCP Servers (или отредактируйте ~/.cline/mcp.json) и добавьте сервер:

{
  "mcpServers": {
    "kenneives-design-token-bridge-mcp-u8c1f8jpxx": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "design-token-bridge-mcp"
      ],
      "disabled": false,
      "autoApprove": []
    }
  }
}

Continue

Создайте файл в .continue/mcpServers/ (например kenneives-design-token-bridge-mcp-u8c1f8jpxx.yaml) или добавьте блок в config.yaml. MCP работает только в режиме agent:

mcpServers:
  - name: kenneives-design-token-bridge-mcp-u8c1f8jpxx
    command: npx
    args:
      - "-y"
      - "design-token-bridge-mcp"

Zed

Выполните agent: add context server или откройте настройки (zed: open settings file) и добавьте сервер в объект context_servers:

{
  "context_servers": {
    "kenneives-design-token-bridge-mcp-u8c1f8jpxx": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "design-token-bridge-mcp"
      ]
    }
  }
}

Конфиг для установки сервера

{
  "command": "npx",
  "args": [
    "-y",
    "design-token-bridge-mcp"
  ],
  "type": "stdio"
}

Нужен npx

Сервер запускается через npx
Без него ничего работать не будет.

Как установить npx

Информация о сервере

Номер в рейтинге: #197
Звезд на Github: 5
Форков на Github: 1
Загрузок: 2 358
Язык реализации: TypeScript
Лицензия: MIT
Официальный сервер: Нет
Дата обновления данных: 19.10 в 09:45
Идентификатор: ml-HRmYhiFT2mZzH
Категории: Инструменты дизайна, Инструменты для разработчиков

kenneives/design-token-bridge-mcp

design-token-bridge-mcp

Install

From npm

From source

Configure with Claude Code

Похожие MCP-сервера

themesberg/flowbite-mcp

musepy/genable

GLips/Figma-Context-MCP

vkhanhqui/figma-mcp-go

ethbak/icon-composer-mcp

attalla1/photopea-mcp-server