Design Token Bridge MCP server

by kenneives·io.github.kenneives/design-token-bridge-mcp·v1.0.2·5 stars

No reviews yet

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

A88/100grade A

Write a review Install

What users say

No reviews yet

Be the first

Safety scan

A88/100

full report

Adoption

New

5 stars

Reviews

Write one

Nobody has reviewed Design Token Bridge yet.

If you have run it, two minutes of your experience saves the next person an afternoon.

Design Token Bridge tools (9)

write = sends, deletes, buys or posts

Read from the package source without running it. The installed server may list more.

extract_tokens_from_css
Parse CSS custom properties (variables) and extract design tokens
extract_tokens_from_figma_variables
Parse Figma variables export JSON and extract design tokens
extract_tokens_from_json
Parse W3C Design Tokens Community Group (DTCG) format JSON into universal tokens
extract_tokens_from_tailwind
Parse a Tailwind config and extract theme values into universal design tokens
generate_css_variables
Generate CSS custom properties from universal design tokens with light/dark mode support
generate_material3_theme
Generate Kotlin Jetpack Compose Material 3 theme files from universal design tokens
generate_swiftui_theme
Generate SwiftUI theme files from universal design tokens, with optional Liquid Glass support
generate_tailwind_config
Generate a tailwind.config.js theme from universal design tokens
validate_contrast
Check color combinations in design tokens for WCAG AA/AAA accessibility compliance

Public scan report

scanner v0.1.10 · 2026-09-28 · same rubric, same numbers if you re-run it

no findings

Code scan27 source files scanned25/25
–Live reliabilityno gateway calls yet and no remote to proben/a
–Tool poisoningtools not inspected (local package is not executed); not countedn/a
Auth qualitylocal package, no credentials required12/15
Maintenancelast push 42 days ago12/15
Maintainer identityregistry namespace matches repository owner; GitHub account older than a year8/10

Overall 88/100. Components that don't apply are left out of the denominator. Any critical finding is an F.Rubric Appeal a finding JSON

How Design Token Bridge compares

Against every graded Media MCP server, from our own scans and uptime checks. Updated after each scan run.

Safety score: 88/100; higher than 78% of 1,336 Media servers
Tools: 9; the typical Media server has 6
Tools that change things: 0%; typical: 3%. Fewer write tools means less an agent can break
GitHub stars: 5; more than 83% of 716 Media servers

What its tools let an agent do: 5 read · 4 create

Install Design Token Bridge in Claude Code, Cursor or VS Code

Runs npx -y design-token-bridge-mcp on your machine. Read the scan report first; the gateway never runs local packages.

claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcp

Add to Cursor

What the publisher says

From the Design Token Bridge repository's README, as published. We do not edit it. Read it on GitHub

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

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

npm install -g design-token-bridge-mcp

From source

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):

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

Or if installed from source:

{
  "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

Generators — Universal Tokens → Output

Validation

Universal Token Schema

All tools speak this common format:

Shortened. The full README is on GitHub.

Nothing above is checked by us. What we check is on the safety report.

Design Token Bridge: common questions

Is Design Token Bridge MCP server safe?: Yes, by our scan: it is graded A (88/100). Read the Design Token Bridge safety report
How do I install Design Token Bridge?: It runs on your machine. Copy the Claude Code, Cursor, VS Code or Claude Desktop config from the install section.
Does Design Token Bridge need an API key?: Not as far as the registry entry and our scan can tell: no credentials are declared or required.
Is Design Token Bridge maintained?: The last commit was 80 days ago (2026-08-17). The latest release is v1.0.2.
What can I use instead of Design Token Bridge?: Servers from other publishers that do the same job: Figma Rust MCP server, Mimic AI MCP server and Figma Go MCP server.
How does Design Token Bridge compare with other Media MCP servers?: safety score 88/100 (higher than 78% of 1,336 Media servers); tools 9 (the typical Media server has 6); tools that change things 0% (typical: 3%. Fewer write tools means less an agent can break). Full comparison.

Alternatives to Design Token Bridge

Same job from other publishers: the closest match first, then the best rated.

Figma Rust
Figma MCP server in Rust: plugin bridge, no API token, no rate limits, 73 tools.
not reviewed
Established
A
Mimic AI
Builds Figma from your design system: real components and tokens, enforced, learning every build.
More from miapre →
not reviewed
Growing
A
Figma Go
Figma MCP server with full read/write access via plugin bridge — no API token or rate limits.
not reviewed
Growing
A
Dembrandt
Design tokens from any live site: colours, type, spacing, components, drift against a baseline.
not reviewed
Widely used
B
Figma MCP Server
The Figma MCP server brings Figma design context directly into your AI workflow.
not reviewed
Established
A