Design Token Bridge MCP Server

How to use

You integrate this MCP server with your MCP client by configuring one or more MCP connections. Start by choosing a local (stdio) server if you want to run the bridge directly on your machine, or connect through a remote MCP URL if you have an HTTP endpoint. Use the world of extractors to bring tokens into a universal schema, then employ generators to produce platform-specific themes and CSS variables. Finally, validate accessibility to ensure color contrast meets your standards.

How to install

Prerequisites: Node.js and npm (or Node.js with npx). You should also have a text editor and a shell to run commands.

From npm install the MCP server globally.

npm install -g design-token-bridge-mcp

If you prefer building from source, clone the project, install dependencies, and build.

git clone https://github.com/kenneives/design-token-bridge-mcp.git
cd design-token-bridge-mcp
npm install
npm run build

Configuration and usage notes

You configure MCP connections in Claude Code or your project’s MCP settings file. The examples below show how to expose a local, stdio-based server and how to reference the server from Claude Code.

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

If you install from source, you can reference the built index file directly.

{
  "mcpServers": {
    "design-token-bridge": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/design-token-bridge-mcp/build/index.js"]
    }
  }
}

Universal tokens, pipelines, and outputs

The bridge uses a universal token schema to move data from input extractors through a processing token bridge to a set of generators that produce platform-specific outputs.

A typical pipeline starts with extracting tokens from a source (Tailwind config, CSS variables, Figma variables, or W3C DTCG JSON). Then you generate outputs for Tailwind, Material 3, SwiftUI, and CSS variables, and finally validate contrast.

Validation and examples

You can run a contrast check to verify WCAG AA/AAA compliance for color combinations.

An end-to-end example shows you how to extract tokens from a Tailwind config, generate outputs for web and native platforms, and validate accessibility.

See the example project layout for token artifacts such as the universal token file, Tailwind config, CSS variables, and a contrast report.

Notes on the v0 + Figma Free Tier setup

It is designed to work with free tier plans for v0 and Figma. You can sign up for v0, configure Figma MCP, and connect through Claude Code for full pipeline support.

Tech stack and tests

The server is built with TypeScript and Node.js. It uses a standardized MCP transport and Zod for schema validation, with minimal external dependencies.

Testing includes unit tests and Playwright-based end-to-end visual tests to verify behavior across responsive layouts.

extract_tokens_from_tailwind

Parses Tailwind configuration to extract colors, font sizes, spacing, border radius, and shadows.

extract_tokens_from_css

Parses CSS files to extract custom properties like --color-*, --space-*, --radius-*, and --shadow-*.

extract_tokens_from_figma_variables

Fetches and parses Figma Variables API JSON to extract COLOR and FLOAT values, resolves aliases, and handles multi-mode setups.

extract_tokens_from_json

Parses W3C DTCG format JSON to extract token values from $value, $type, $description, and aliases.

generate_material3_theme

Generates a Material 3 theme in Kotlin (Jetpack Compose) including lightColorScheme, Typography, and Shapes.

generate_swiftui_theme

Generates a SwiftUI theme with color extensions, font structs, and optional Liquid Glass styling.

generate_tailwind_config

Produces a Tailwind theme extension block with rem-based values in a config file.

generate_css_variables

Creates a :root CSS block with CSS variables for light and dark modes.

validate_contrast

Checks color pairs for WCAG AA/AAA contrast levels and reports pass/fail with ratios.