Converts design tokens from Tailwind, CSS, Figma or W3C DTCG into Material 3, SwiftUI, Tailwind config and CSS variables, with WCAG contrast checks.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add design-token-bridge -- npx -y design-token-bridge-mcp~/.codex/config.toml
[mcp_servers.design-token-bridge]
command = "npx"
args = ["-y", "design-token-bridge-mcp"]
# codex mcp add design-token-bridge -- npx -y design-token-bridge-mcp~/.cursor/mcp.json
{
"mcpServers": {
"design-token-bridge": {
"command": "npx",
"args": [
"-y",
"design-token-bridge-mcp"
]
}
}
}.vscode/mcp.json
{
"servers": {
"design-token-bridge": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"design-token-bridge-mcp"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"design-token-bridge": {
"command": "npx",
"args": [
"-y",
"design-token-bridge-mcp"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"design-token-bridge": {
"command": "npx",
"args": [
"-y",
"design-token-bridge-mcp"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"design-token-bridge": {
"command": "npx",
"args": [
"-y",
"design-token-bridge-mcp"
]
}
}
}