Каталог MCP
kenneives
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.

README

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

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

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):

extract_tokens_from_css

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

Параметры

cssstringобязательный
The contents of a CSS file with custom properties

extract_tokens_from_figma_variables

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

Параметры

variablesstringобязательный
Figma Variables REST API JSON export as a string

extract_tokens_from_json

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

Параметры

jsonstringобязательный
W3C DTCG format JSON string

extract_tokens_from_tailwind

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

Параметры

configstringобязательный
The contents of a tailwind.config.js or tailwind.config.ts file

generate_css_variables

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

Параметры

tokensstringобязательный
Universal design tokens JSON string
darkTokensstring
Optional dark mode universal design tokens JSON string

generate_material3_theme

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

Параметры

tokensstringобязательный
Universal design tokens JSON string

generate_swiftui_theme

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

Параметры

tokensstringобязательный
Universal design tokens JSON string
liquidGlassboolean
Include iOS 26+ Liquid Glass modifiers

generate_tailwind_config

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

Параметры

tokensstringобязательный
Universal design tokens JSON string
formatenum
Output format: ES modules or CommonJS
esmcjs

validate_contrast

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

Параметры

tokensstringобязательный
Universal design tokens JSON string
levelenum
WCAG compliance level to check
AAAAA

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

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

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

Также kenneives/design-token-bridge-mcp можно установить в Cursor по ссылке автоматически.

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

Номер в рейтинге: #185
Звезд на Github: 3
Форков на Github: 1
Язык реализации: TypeScript
Лицензия: MIT
Официальный сервер: Нет
Дата обновления данных: 16.07 в 21:37
Идентификатор: ml-HRmYhiFT2mZzH
Категории: Визуализация данных, Инструменты дизайна, Инструменты для разработчиков

Другие проверенные MCP-сервера

caol64/wenyan-mcp

文颜 MCP Server — 基于 MCP 协议的排版发布工具，专为 AI 写作到微信公众号场景设计。直接在聊天框内完成 Markdown 转微信富文本、上传图片、存草稿，无需切换编辑器。适合需要快速发布高质量公众号文章的作者和团队。

QGIS MCP

QGISMCP - MCP-сервер, соединяющий QGIS с Claude AI. Позволяет AI-ассистенту управлять проектами, слоями, выполнять алгоритмы обработки и произвольный PyQGIS-код. Идеально для автоматизации ГИС без ...

jau123/MeiGen-AI-Design-MCP

MCP-сервер для генерации изображений и видео через ИИ. Работает в Claude Code, Cursor и других AI-инструментах, поддерживает 9 моделей и 1446 промптов. Параллельная генерация, управление стилями и ...

txn2/kubefwd

kubefwd — bulk порт-форвардинг для Kubernetes: сервисы из кластера становятся доступны локально по именам. Каждый сервис получает уникальный loopback IP, исключая конфликты портов. Авто-переподключ...

tavily-ai/tavily-mcp

MCP сервер Tavily предоставляет инструменты для веб-поиска, извлечения данных и построения карты сайта в реальном времени. Помогает разработчикам AI-ассистентов получать актуальную информацию из интернета.

skill-seekers/Skill_Seekers

MCP-сервер Skill Seekers преобразует документацию, GitHub, PDF, видео и 18 типов источников в структурированные знания для AI-систем. Подходит для создания AI-навыков (Claude, Gemini, OpenAI), RAG-...