How do I connect Design Token Bridge MCP Server to Claude?

Run `claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcp` in Claude Code, or add the same command and arguments under mcpServers in Cursor's mcp.json or Claude Desktop's claude_desktop_config.json, then restart the client. The blocks above are ready to paste.

Is Design Token Bridge MCP Server free?

The listed licence is MIT. Check the upstream terms for permitted use and commercial requirements; a public repository does not by itself mean the software is free or open source. Connected APIs and hosted services may have separate charges.

What can Design Token Bridge MCP Server do?

Design Token Bridge MCP Server documents 9 tools to the agent, including extract_tokens_from_css, extract_tokens_from_figma_variables, extract_tokens_from_json. The descriptions above come from project documentation. A live handshake does not test individual tool behavior.

Design Token Bridge MCP

Unclaimed

by kenneives

MCP server that translates design tokens between platforms — Tailwind, Figma, CSS to Material 3, SwiftUI, and CSS Variables. Built for the v0 → Figma → Claude Code pipeline.

Set up this server

Compare servers My Stack

01 / Choose your client

02 / Before you connect

Authentication is not specified. Check the project instructions before connecting.

Install the runtime required by the project and make it available to your client.

Project instructionsEnvironment variable names (optional)

Use names from the project instructions, separated by commas. Enter names only, never secret values.

03 / Add the configuration

Source: generated from public install instructions

claude mcp add --transport stdio 'design-token-bridge-mcp' -- 'npx' '-y' 'design-token-bridge-mcp'

Run in your terminal after replacing any placeholders.

04 / Check it in your client

Open your client’s MCP settings and confirm the server connects and lists its tools. A copied configuration does not confirm a working connection.

claude-codecss-variablesdesign-tokensfigmamaterial-designmcpmcp-servermodel-context-protocolswiftuitailwind

Is this your MCP server?

This listing was auto-indexed from the public record. Claim it to edit the page, set compatibility and unlock growth tools. Takes under two minutes.

Claim this server

Security profile

Claimed and verified servers get a weekly static scan that shows what the code can reach: external services, environment variables, shell commands, agent configuration folders, plus any dependencies with known advisories. Claim this listing to get one. How the security profile works

9 of 9 tools

Documented tools (9)

From project documentation. A server handshake does not verify each tool’s description or behavior.

extract_tokens_from_css

CSS file content

extract_tokens_from_figma_variables

Figma Variables API JSON

extract_tokens_from_json

W3C DTCG format JSON

extract_tokens_from_tailwind

tailwind.config.js content

generate_css_variables

CSS custom properties

generate_material3_theme

Kotlin (Jetpack Compose)

generate_swiftui_theme

Swift (SwiftUI)

generate_tailwind_config

tailwind.config.js

validate_contrast

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

Tool change history

Compared across complete checks of the same configuration. Tools were listed, not invoked. Input-schema changes are not measured here.

No complete tool checks yet.

FAQ

Questions about Design Token Bridge MCP Server

How do I connect Design Token Bridge MCP Server to Claude?: Run `claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcp` in Claude Code, or add the same command and arguments under mcpServers in Cursor's mcp.json or Claude Desktop's claude_desktop_config.json, then restart the client. The blocks above are ready to paste.
Is Design Token Bridge MCP Server free?: The listed licence is MIT. Check the upstream terms for permitted use and commercial requirements; a public repository does not by itself mean the software is free or open source. Connected APIs and hosted services may have separate charges.
What can Design Token Bridge MCP Server do?: Design Token Bridge MCP Server documents 9 tools to the agent, including extract_tokens_from_css, extract_tokens_from_figma_variables, extract_tokens_from_json. The descriptions above come from project documentation. A live handshake does not test individual tool behavior.