Which outputs can it generate?

It generates Material 3 Kotlin themes, SwiftUI theme code, Tailwind configuration theme extensions, and CSS custom properties.

Can it validate accessibility?

Yes. The validate_contrast tool checks color pairs against WCAG AA or AAA and returns pass/fail results with contrast ratios.

It runs as a local MCP server over stdio and can be launched with npx or from a built source checkout.

Design Token Bridge MCP

design-tokensdeveloper-toolsfigmatailwindaccessibility

Extracts design tokens from common formats and generates themes for Kotlin, SwiftUI, Tailwind, and CSS with contrast validation.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

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

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Overview

This stdio MCP server converts tokens from Tailwind, CSS custom properties, Figma Variables JSON, or W3C DTCG JSON into a shared schema. It generates Material 3 Kotlin, SwiftUI, Tailwind configuration, and CSS variable output, and can validate WCAG contrast ratios. Use it when maintaining a design system across web, Android, and iOS platforms.

Use cases

Extract tokens from a Tailwind configuration

Convert Figma Variables JSON into a universal token schema

Generate a Material 3 theme for Jetpack Compose

Generate SwiftUI theme definitions

Check color pairs against WCAG AA or AAA

Key features

Extracts colors, typography, spacing, radii, and elevation tokens

Resolves aliases in Figma Variables and W3C DTCG JSON

Generates Material 3 Kotlin themes

Generates SwiftUI colors and fonts with optional Liquid Glass support

Generates Tailwind theme extensions and CSS variables

Reports WCAG contrast pass/fail results with ratios

Capabilities & Tool Schemas (9)Self-reported

Inspect callable tools, capabilities, and parameters exposed to AI agents by Design Token Bridge MCP.

extract_tokens_from_tailwind

Parses colors, fontSize, spacing, borderRadius, boxShadow

extract_tokens_from_css

Extracts `--color-*`, `--space-*`, `--radius-*`, `--shadow-*` custom properties

extract_tokens_from_figma_variables

Parses COLOR, FLOAT types, resolves aliases, handles multi-mode

extract_tokens_from_json

Parses `$value`/`$type`/`$description`, resolves `{aliases}`, handles groups

generate_material3_theme

lightColorScheme()`, `Typography`, `Shapes` with M3 naming

generate_swiftui_theme

Color extensions, Font structs, optional Liquid Glass (iOS 26+)

Documentation Overview

— signed, offline-verifiable tool-safety grade

design-token-bridge-mcp

_{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.

Code

┌──────────────┐     ┌──────────────┐     ┌────────────────────────┐
│  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

Terminal

npm install -g design-token-bridge-mcp

From source

bash

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

Configure with Claude Code

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

config.json

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

Or if installed from source:

config.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

Tool	Input	Description
`extract_tokens_from_tailwind`	`tailwind.config.js` content	Parses colors, fontSize, spacing, borderRadius, boxShadow
`extract_tokens_from_css`	CSS file content	Extracts `--color-`, `--space-`, `--radius-`, `--shadow-` custom properties
`extract_tokens_from_figma_variables`	Figma Variables API JSON	Parses COLOR, FLOAT types, resolves aliases, handles multi-mode
`extract_tokens_from_json`	W3C DTCG format JSON	Parses `$value`/`$type`/`$description`, resolves `{aliases}`, handles groups

Generators — Universal Tokens → Output

Tool	Output	Description
`generate_material3_theme`	Kotlin (Jetpack Compose)	`lightColorScheme()`, `Typography`, `Shapes` with M3 naming
`generate_swiftui_theme`	Swift (SwiftUI)	Color extensions, Font structs, optional Liquid Glass (iOS 26+)
`generate_tailwind_config`	`tailwind.config.js`	Theme extend block with rem units, ESM or CJS
`generate_css_variables`	CSS custom properties	`:root` block with light/dark mode via `prefers-color-scheme`

Validation

Tool	Description
`validate_contrast`	WCAG AA/AAA contrast checking for color pairs with pass/fail + ratios

Universal Token Schema

All tools speak this common format:

config.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

Code

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

2. Generate native themes from the extracted tokens

Code

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

Code

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:

v0 Setup Guide — free tier signup, web UI workflow
Figma Setup Guide — free tier MCP config (6 calls/month)
Claude Code Setup — full pipeline configuration
Token Extraction Guide — manual extraction when APIs aren't available

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 tests
npm test

# 31 Playwright visual/responsive tests
npm run test:e2e

Contributing

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

License

MIT — see LICENSE.

Read the full README →View source on GitHub →

Related MCP Servers

View all in Finance & Fintech View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

npm downloads

441

Package downloads in the last 30 days.

Last commit

25d ago

Most recent push to the default branch.

Tools exposed

Callable tools this server registers over MCP.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Design Token Bridge MCP

It reads Tailwind configuration content, CSS custom properties, Figma Variables API JSON, and W3C DTCG JSON.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Design Token Bridge MCP AllMCPs Directory Badge

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/kenneives-design-token-bridge-mcp?style=directory)](https://allmcps.com/mcp/kenneives-design-token-bridge-mcp)

HTML Embed

<a href="https://allmcps.com/mcp/kenneives-design-token-bridge-mcp"><img src="https://allmcps.com/api/badge/kenneives-design-token-bridge-mcp?style=directory" alt="Design Token Bridge MCP on AllMCPs" /></a>

Technical Specs & Signals

CategoryFinance & Fintech

PricingFree

11/11 checks healthy over the last 33d

61Quality signal: Good · 61/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools28/30

Adoption & activity8/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 27d ago via OSV.dev · design-token-bridge-mcp (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💰 Finance & Fintech →Best MCP servers for Finance & Fintech →Alternatives to Design Token Bridge MCP →Install in Claude Desktop Install in Cursor Install in VS Code

Design Token Bridge MCP

design-tokensdeveloper-toolsfigmatailwindaccessibility

Extracts design tokens from common formats and generates themes for Kotlin, SwiftUI, Tailwind, and CSS with contrast validation.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

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

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Overview

Use cases

Extract tokens from a Tailwind configuration

Convert Figma Variables JSON into a universal token schema

Generate a Material 3 theme for Jetpack Compose

Generate SwiftUI theme definitions

Check color pairs against WCAG AA or AAA

Key features

Extracts colors, typography, spacing, radii, and elevation tokens

Resolves aliases in Figma Variables and W3C DTCG JSON

Generates Material 3 Kotlin themes

Generates SwiftUI colors and fonts with optional Liquid Glass support

Generates Tailwind theme extensions and CSS variables

Reports WCAG contrast pass/fail results with ratios

Capabilities & Tool Schemas (9)Self-reported

Inspect callable tools, capabilities, and parameters exposed to AI agents by Design Token Bridge MCP.

extract_tokens_from_tailwind

Parses colors, fontSize, spacing, borderRadius, boxShadow

extract_tokens_from_css

Extracts `--color-*`, `--space-*`, `--radius-*`, `--shadow-*` custom properties

extract_tokens_from_figma_variables

Parses COLOR, FLOAT types, resolves aliases, handles multi-mode

extract_tokens_from_json

Parses `$value`/`$type`/`$description`, resolves `{aliases}`, handles groups

generate_material3_theme

lightColorScheme()`, `Typography`, `Shapes` with M3 naming

generate_swiftui_theme

Color extensions, Font structs, optional Liquid Glass (iOS 26+)

Documentation Overview

— signed, offline-verifiable tool-safety grade

design-token-bridge-mcp

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

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

Code

┌──────────────┐     ┌──────────────┐     ┌────────────────────────┐
│  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

Terminal

npm install -g design-token-bridge-mcp

From source

bash

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

Configure with Claude Code

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

config.json

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

Or if installed from source:

config.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

Tool	Input	Description
`extract_tokens_from_tailwind`	`tailwind.config.js` content	Parses colors, fontSize, spacing, borderRadius, boxShadow
`extract_tokens_from_css`	CSS file content	Extracts `--color-`, `--space-`, `--radius-`, `--shadow-` custom properties
`extract_tokens_from_figma_variables`	Figma Variables API JSON	Parses COLOR, FLOAT types, resolves aliases, handles multi-mode
`extract_tokens_from_json`	W3C DTCG format JSON	Parses `$value`/`$type`/`$description`, resolves `{aliases}`, handles groups

Generators — Universal Tokens → Output

Tool	Output	Description
`generate_material3_theme`	Kotlin (Jetpack Compose)	`lightColorScheme()`, `Typography`, `Shapes` with M3 naming
`generate_swiftui_theme`	Swift (SwiftUI)	Color extensions, Font structs, optional Liquid Glass (iOS 26+)
`generate_tailwind_config`	`tailwind.config.js`	Theme extend block with rem units, ESM or CJS
`generate_css_variables`	CSS custom properties	`:root` block with light/dark mode via `prefers-color-scheme`

Validation

Tool	Description
`validate_contrast`	WCAG AA/AAA contrast checking for color pairs with pass/fail + ratios

Universal Token Schema

All tools speak this common format:

config.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

Code

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

2. Generate native themes from the extracted tokens

Code

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

Code

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:

v0 Setup Guide — free tier signup, web UI workflow
Figma Setup Guide — free tier MCP config (6 calls/month)
Claude Code Setup — full pipeline configuration
Token Extraction Guide — manual extraction when APIs aren't available

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 tests
npm test

# 31 Playwright visual/responsive tests
npm run test:e2e

Contributing

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

License

MIT — see LICENSE.

Read the full README →View source on GitHub →

Related MCP Servers

View all in Finance & Fintech View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

npm downloads

441

Package downloads in the last 30 days.

Last commit

25d ago

Most recent push to the default branch.

Tools exposed

Callable tools this server registers over MCP.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Design Token Bridge MCP

It reads Tailwind configuration content, CSS custom properties, Figma Variables API JSON, and W3C DTCG JSON.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/kenneives-design-token-bridge-mcp?style=directory)](https://allmcps.com/mcp/kenneives-design-token-bridge-mcp)

HTML Embed

<a href="https://allmcps.com/mcp/kenneives-design-token-bridge-mcp"><img src="https://allmcps.com/api/badge/kenneives-design-token-bridge-mcp?style=directory" alt="Design Token Bridge MCP on AllMCPs" /></a>

Technical Specs & Signals

CategoryFinance & Fintech

PricingFree

11/11 checks healthy over the last 33d

61Quality signal: Good · 61/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools28/30

Adoption & activity8/15

Community engagement0/10

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 27d ago via OSV.dev · design-token-bridge-mcp (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💰 Finance & Fintech →Best MCP servers for Finance & Fintech →Alternatives to Design Token Bridge MCP →Install in Claude Desktop Install in Cursor Install in VS Code