design-token-bridge-mcp — MCP-сервер для Claude Code: перенос токенов
Преобразует дизайн-токены между Tailwind, CSS, Figma и W3C DTCG, а затем генерирует темы для Material 3 и SwiftUI. Подходит для переноса общей палитры и типографики между вебом и мобильными приложениями.
claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcpЧто делает design-token-bridge-mcp
Сервер извлекает цвета, размеры шрифтов, отступы, скругления и тени из конфигурации Tailwind, CSS, JSON переменных Figma или W3C DTCG. Данные приводит к общей схеме токенов. Для Figma на вход нужен JSON из Variables API: извлекатель работает именно с ним.
Из общей схемы можно получить тему Kotlin для Material 3, Swift-код для SwiftUI, конфигурацию Tailwind или CSS-переменные с режимами светлой и тёмной темы. Отдельный инструмент проверяет контраст цветовых пар по WCAG AA или AAA. Подключение использует stdio; для запуска через команду установки нужен npx.
Какие задачи решает
- перенести цвета и отступы из Tailwind в CSS-переменные
- извлечь токены из CSS или JSON переменных Figma
- сгенерировать тему Material 3 из общей схемы токенов
- создать SwiftUI-тему с Liquid Glass
- проверить контраст цветовой пары по WCAG AAA
Примеры запросов агенту
- Извлеки токены из содержимого
tailwind.config.jsс помощьюextract_tokens_from_tailwind. - Сгенерируй тему Material 3 для Android из этих токенов через
generate_material3_theme. - Проверь контраст цветов по WCAG AAA с помощью
validate_contrast.
Как установить design-token-bridge-mcp
Командой платформы
claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcpКомандой платформы
codex mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcpФайл настроек
{
"mcpServers": {
"design-token-bridge-mcp": {
"command": "npx",
"args": [
"-y",
"design-token-bridge-mcp"
]
}
}
}Файл настроек
{
"servers": {
"design-token-bridge-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"design-token-bridge-mcp"
]
}
}
}Командой платформы
gemini mcp add design-token-bridge-mcp npx -y design-token-bridge-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о design-token-bridge-mcp
Как установить design-token-bridge-mcp в Claude Code?
Выполните claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcp.
Что делает design-token-bridge-mcp?
Извлекает дизайн-токены из Tailwind, CSS, JSON переменных Figma и W3C DTCG, затем генерирует темы для Material 3, SwiftUI, Tailwind или CSS. Также проверяет контраст цветов по WCAG.
Как передать серверу переменные из Figma?
Инструмент extract_tokens_from_figma_variables принимает JSON из Figma Variables API, разрешает псевдонимы и обрабатывает несколько режимов.
