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. Its 9 documented tools cover extract, tokens, from, generate.

People connecting design tools to Claude, Cursor, VS Code, or another MCP client. The project is written in TypeScript.

VERIFIED ACTIVE

LAST COMMIT 2026-08-17 · ★ 5 · #44 OF 74 MAINTAINED DESIGN · VERIFIED 2026-08-25

MIT · TypeScript servers · how we verify → /methodology

01 · Install Design Token Bridge MCP

Claude Code

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

Claude Desktop / Cursor / VS Code - add to config

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

Same JSON for Cursor. For VS Code, rename the top-level key from `mcpServers` to `servers`.

Using another client? Same JSON, different key

Claude Desktop · mcpServers

Cursor · mcpServers

VS Code · servers

Windsurf · mcpServers

Zed · context_servers

Cline · mcpServers

Roo Code · mcpServers

Continue · mcpServers

LibreChat · mcpServers

Gemini CLI · mcpServers

Codex CLI · mcp_servers

Full setup guides: every client.

02 · Evidence

Security posture

What to check before giving this server access to your agent - from the registry, GitHub, and our own probes. We don't score safety; we show what's verifiable.

runs as local process (stdio) - runs on your machine with your user's permissions

license MIT - declared in the repository

npm package design-token-bridge-mcp - unscoped; check the name against the project README before installing

registry namespace io.github.kenneives is GitHub-verified and matches the repo owner

03 · What Design Token Bridge MCP can do

Prose above is summarized from the project's README and registry record - no invented capabilities.

What you can build

With this server connected, an agent can parse colors, fontSize, spacing, borderRadius, boxShadow, extract --color-, --space-, --radius-, --shadow- custom properties, and parse $value/$type/$description, resolves {aliases}, handles groups.

Capability map

Tools grouped from the project's README - what Design Token Bridge MCP lets an agent do.

Extract

4 tools - e.g. Parses colors, fontSize, spacing, borderRadius, boxShadow; Extracts --color-, --space-, --radius-, --shadow- custom properties; Parses COLOR, FLOAT types, resolves aliases, handles multi-mode

extract_tokens_from_tailwind · extract_tokens_from_css · extract_tokens_from_figma_variables · extract_tokens_from_json

Generate

4 tools - e.g. lightColorScheme(), Typography, Shapes with M3 naming; Color extensions, Font structs, optional Liquid Glass (iOS 26+); Theme extend block with rem units, ESM or CJS

generate_material3_theme · generate_swiftui_theme · generate_tailwind_config · generate_css_variables

Validate

1 tool - e.g. WCAG AA/AAA contrast checking for color pairs with pass/fail + ratios

validate_contrast

Latest releases

v1.0.2 · 2026-02-26

Security & Hardening · Removed eval/Function code paths from Tailwind extractor - uses regex-only static analysis · Protected secret tokens via .gitignore · Fixed version consistency across package.json, server.json…

v1.0.0 · 2026-02-19

design-token-bridge-mcp v1.0.0 · An MCP server that translates design tokens between platforms. Extract from any source, generate for any target. · 9 Tools · Extractors (4): · extract_tokens_from_tailwind - Tailwind…

04 · Who maintains Design Token Bridge MCP

design-token-bridge-mcp is maintained by kenneives. It's the only MCP server we track from this author; the repo dates to Feb 2026.

05 · Facts

repository
github.com/kenneives/design-token-bridge-mcp
category
design - ranked #44 of 74 actively-maintained design servers as of 2026-08-25.
registry
io.github.kenneives/design-token-bridge-mcp (active, first published 2026-02-19 · 2 versions)
packages
npm:design-token-bridge-mcp

06 · Design Token Bridge MCP FAQ

Is Design Token Bridge MCP still maintained?

Yes - as of 2026-08-25, its last commit was 2026-08-17. We re-verify nightly.

What can Design Token Bridge MCP do?

With this server connected, an agent can parse colors, fontSize, spacing, borderRadius, boxShadow, extract --color-, --space-, --radius-, --shadow- custom properties, and parse $value/$type/$description, resolves {aliases}, handles groups.

How do I install Design Token Bridge MCP?

Run `npx -y design-token-bridge-mcp`. You can also paste the ready-made client config above.

Does Design Token Bridge MCP run locally?

Yes - it's a stdio server: it runs on your machine (via npx) with your user's permissions. Your data stays local unless the server itself calls external APIs.

07 · Alternatives to Design Token Bridge MCP

Alternatives to Design Token Bridge MCP

Maintained design servers if Design Token Bridge MCP isn't the fit.

  1. Figma Context MCP Give your coding agent access to your Figma data. Implement designs in any framework in one-shot. ★ 15,705 · 2026-08-07
  2. Figma MCP Server (figma) The Figma MCP server brings Figma design context directly into your AI workflow. ★ 1,915 · 2026-08-20
  3. Type UI Design systems, UI prompts, and layout variations for AI coding tools. ★ 1,816 · 2026-07-04
  4. Openflowkit MCP Local-first OpenFlowKit diagramming tools for Claude, Cursor, Windsurf & other MCP clients. ★ 731 · 2026-08-19
  5. Fable Cut Zero-dependency browser video editor AI agents drive via a JSON timeline over MCP; ffmpeg export. ★ 627 · 2026-08-24
  6. Photoshop MCP MCP server for Adobe Photoshop - 102 tools (generative AI + recipes), standalone web UI. Control Ph… ★ 348 · 2026-08-10

More design MCP servers · Canicode · Liquefy UI · Openroad MCP (luarss) · Lulu Ads - Publisher Concierge · Marmo UI

More TypeScript MCP servers · Mushi Mushi · Kody · Open Takeoff · Agent Comm · Agent Discover · see all