# design-token-bridge-mcp

Преобразует дизайн-токены между Tailwind, CSS, Figma и W3C DTCG, а затем генерирует темы для Material 3 и SwiftUI. Подходит для переноса общей палитры и типографики между вебом и мобильными приложениями.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 5
- Автор: kenneives
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/kenneives/design-token-bridge-mcp
- Обновлён: 2026-08-17
- HTML: https://affpapa.org/nevibecode/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`.

## Требования
- Нужно: Node.js (команды через npx)

## Установка

### Claude Code (родная платформа)

**Командой платформы**
```bash
claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcp
```

### Codex

**Командой платформы**
```bash
codex mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcp
```

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "design-token-bridge-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "design-token-bridge-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "design-token-bridge-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "design-token-bridge-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add design-token-bridge-mcp npx -y design-token-bridge-mcp
```

## Когда брать
- перенести цвета и отступы из 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`.

## Похожие
- [Next AI Draw.io](https://affpapa.org/nevibecode/mcp/next-ai-drawio.md) — MCP-сервер · ★ 36427
- [tldraw](https://affpapa.org/nevibecode/mcp/tldraw.md) — MCP-сервер · ★ 51104
- [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · ★ 16073
- [Agent-Native Assets](https://affpapa.org/nevibecode/mcp/agent-native-assets.md) — MCP-сервер · ★ 7527
- [Remove AI Watermarks](https://affpapa.org/nevibecode/mcp/remove-ai-watermarks.md) — MCP-сервер · ★ 6144
- [Dembrandt](https://affpapa.org/nevibecode/mcp/dembrandt.md) — MCP-сервер · ★ 3851

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md