# design-token-bridge-mcp

Move design tokens between Tailwind, CSS, Figma, and W3C DTCG, then generate themes for Material 3 or SwiftUI. Useful when web and mobile projects need to share a token set.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 5
- Author: kenneives
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/kenneives/design-token-bridge-mcp
- Updated: 2026-08-17
- HTML: https://affpapa.org/en/nevibecode/mcp/design-token-bridge-mcp

## What it does

The server reads colors, type sizes, spacing, corner radii, and shadows from Tailwind configuration, CSS, Figma Variables JSON, or W3C DTCG JSON. It maps them into a shared token schema. The Figma extractor expects data from the Variables API, so a Figma file alone is not its input.

From that schema, it can produce Kotlin for Material 3, Swift code for SwiftUI, a Tailwind configuration, or CSS custom properties with light and dark modes. A separate tool checks color-pair contrast against WCAG AA or AAA. The server communicates over `stdio`; the listed setup command launches it through `npx`.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "design-token-bridge-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "design-token-bridge-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "design-token-bridge-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "design-token-bridge-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add design-token-bridge-mcp npx -y design-token-bridge-mcp
```

## When to use it
- convert Tailwind tokens into CSS custom properties
- read design values from CSS or Figma Variables JSON
- build a Material 3 theme from shared tokens
- generate SwiftUI theme code with Liquid Glass
- check color contrast against WCAG AAA

## Example prompts
- Use `extract_tokens_from_tailwind` to read the contents of `tailwind.config.js`.
- Create an Android theme from these tokens with `generate_material3_theme`.
- Check the colors against WCAG AAA using `validate_contrast`.

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

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md