design-token-bridge-mcp — Claude Code MCP server for design tokens
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.
claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcpWhat design-token-bridge-mcp 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.
What it helps with
- 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 for the agent
- Use
extract_tokens_from_tailwindto read the contents oftailwind.config.js. - Create an Android theme from these tokens with
generate_material3_theme. - Check the colors against WCAG AAA using
validate_contrast.
How to install design-token-bridge-mcp
Platform CLI
claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcpPlatform CLI
codex mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcpConfig file
{
"mcpServers": {
"design-token-bridge-mcp": {
"command": "npx",
"args": [
"-y",
"design-token-bridge-mcp"
]
}
}
}Config file
{
"servers": {
"design-token-bridge-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"design-token-bridge-mcp"
]
}
}
}Platform CLI
gemini mcp add design-token-bridge-mcp npx -y design-token-bridge-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about design-token-bridge-mcp
How do I install design-token-bridge-mcp in Claude Code?
Run claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcp.
What does design-token-bridge-mcp do?
It converts design values from Tailwind, CSS, Figma Variables JSON, or W3C DTCG into a shared token format. It can then generate Material 3, SwiftUI, Tailwind, and CSS outputs, plus check color contrast.
What input does the Figma extractor need?
extract_tokens_from_figma_variables takes JSON from the Figma Variables API. It can resolve aliases and handle multiple modes.
