Design Token Bridge Mcp

io.github.kenneivesPublished by GitHub account kenneivesv1.0.2Updated Oct 24, 2026

Translate design tokens between Tailwind, Figma, CSS, Material 3, and SwiftUI

VerifiedSTDIODesktop onlyDeveloper ToolsMedia & Design

Overview

AI-generated overview

Local MCP server that converts design tokens between Tailwind, CSS, Figma variables, W3C DTCG JSON, Material 3 and SwiftUI themes.

What you can do
  • Extract tokens from Tailwind config, CSS custom properties, Figma Variables JSON and W3C DTCG JSON into one universal token schema
  • Generate a Material 3 Kotlin theme, a SwiftUI theme (optionally with Liquid Glass), a Tailwind config, or CSS variables with light/dark mode
  • Check color pairs for WCAG AA/AAA contrast and return pass/fail with ratios
  • Chain the steps so one source of tokens can be pushed out to web, Android and iOS targets
When to use it
Useful when a design system or brand palette has to be carried across web, Android and iOS codebases, or when you want an assistant to regenerate native theme files and check contrast from an existing Tailwind, CSS or Figma token source.
Requirements
Runs as a local stdio process on the desktop. Install the npm package globally or run it with npx, or build it from source with Node.js and run the built entry file. No accounts, API keys or environment variables are declared; token inputs are passed as file contents.
Before you install
The tools read token file contents you supply and return generated theme code, so review generated configs and themes before committing them to a project. No credentials or network access are declared, but the README links to external setup guides and a third-party trust profile that are outside the server itself.

Installation

In SourceWeft

  1. Open Design Token Bridge Mcp in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

[AgentAvow Trust] — signed, offline-verifiable tool-safety grade

design-token-bridge-mcp

[Image]
[AgentGraph Trust Score]

Verified on AgentGraph — trust infrastructure for AI agents. View profile

An MCP server that translates design tokens between platforms. Extract tokens from Tailwind, CSS, Figma, or W3C DTCG format — then generate native themes for Material 3 (Kotlin), SwiftUI (with Liquid Glass), Tailwind, and CSS Variables.

Built for the v0 → Figma → Claude Code design pipeline.

┌──────────────┐     ┌──────────────┐     ┌────────────────────────┐│  Tailwind     │     │              │     │  Material 3 (Kotlin)   ││  CSS Vars     │────▶│  Universal   │────▶│  SwiftUI (Swift)       ││  Figma Vars   │     │  Token       │     │  Tailwind Config       ││  W3C DTCG     │     │  Schema      │     │  CSS Variables         │└──────────────┘     └──────────────┘     └────────────────────────┘    Extractors           Bridge              Generators

Install

From npm

bash
npm install -g design-token-bridge-mcp

From source

bash
git clone https://github.com/kenneives/design-token-bridge-mcp.gitcd design-token-bridge-mcpnpm install && npm run build

Configure with Claude Code

Add to your Claude Code MCP settings (~/.claude/settings.json or project .mcp.json):

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

Or if installed from source:

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

Tools (9 total)

Extractors — Input → Universal Tokens

ToolInputDescription
extract_tokens_from_tailwindtailwind.config.js contentParses colors, fontSize, spacing, borderRadius, boxShadow
extract_tokens_from_cssCSS file contentExtracts --color-*, --space-*, --radius-*, --shadow-* custom properties
extract_tokens_from_figma_variablesFigma Variables API JSONParses COLOR, FLOAT types, resolves aliases, handles multi-mode
extract_tokens_from_jsonW3C DTCG format JSONParses $value/$type/$description, resolves {aliases}, handles groups

Generators — Universal Tokens → Output

ToolOutputDescription
generate_material3_themeKotlin (Jetpack Compose)lightColorScheme(), Typography, Shapes with M3 naming
generate_swiftui_themeSwift (SwiftUI)Color extensions, Font structs, optional Liquid Glass (iOS 26+)
generate_tailwind_configtailwind.config.jsTheme extend block with rem units, ESM or CJS
generate_css_variablesCSS custom properties:root block with light/dark mode via prefers-color-scheme

Validation

ToolDescription
validate_contrastWCAG AA/AAA contrast checking for color pairs with pass/fail + ratios

Universal Token Schema

All tools speak this common format:

json
{  "colors": {    "primary": { "value": "#6750A4", "description": "Brand primary", "category": "primary" }  },  "typography": {    "display-large": { "fontSize": 57, "lineHeight": 64, "fontWeight": 400, "fontFamily": "Inter" }  },  "spacing": { "xs": 4, "sm": 8, "md": 16 },  "radii": { "sm": 8, "md": 12, "lg": 16 },  "elevation": {    "low": {      "shadowColor": "#000000",      "shadowOffset": { "x": 0, "y": 2 },      "shadowRadius": 4,      "shadowOpacity": 0.1    }  },  "motion": {    "fast": { "duration": 150, "easing": "ease-out" }  }}

Example: Full Pipeline

1. Extract tokens from a Tailwind config

Use extract_tokens_from_tailwind with the contents of my tailwind.config.js

2. Generate native themes from the extracted tokens

Take those tokens and run them through:- generate_tailwind_config (for the web app)- generate_material3_theme (for Android)- generate_swiftui_theme with liquidGlass=true (for iOS)- generate_css_variables (for a vanilla CSS fallback)

3. Validate accessibility

Run validate_contrast on those tokens at AAA level

Example Output

See the examples/qt-games/ directory for a complete responsive landing page built entirely from MCP-generated tokens, including:

  • qt-games-tokens.json — extracted universal tokens
  • tailwind.config.js — generated Tailwind config
  • variables.css — generated CSS custom properties
  • contrast-report.json — WCAG validation (AAA pass)
  • index.html + styles.css — responsive landing page using the generated tokens

v0 + Figma Free Tier Setup

This MCP works with free tiers of both v0 and Figma. See the setup guides:

Tech Stack

  • TypeScript + Node.js
  • @modelcontextprotocol/sdk v1.x (stdio transport)
  • Zod for schema validation
  • Zero heavyweight dependencies — no Babel, no PostCSS, no Style Dictionary

Tests

bash
# 91 unit testsnpm test
# 31 Playwright visual/responsive testsnpm run test:e2e

Contributing

See CONTRIBUTING.md for development setup, project structure, and PR guidelines.

License

MIT — see LICENSE.

Source: README.md at commit d13c8b3

Tools

0
SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

1
  1. v1.0.2LatestSep 16, 2026

Score

50% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts

    Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.

  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts