SA
SkillAvatars
Back to MCP Tools

design-token-bridge-mcp

devops-infra MCP Server

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.

bykenneives
Install Ready
devops-infradevops-infra
5 views2 stars1 forksv1.0.2MIT
View on GitHubHomepage

Why This Matters

Discovered via unknown and last synced 3mo ago.

Install Ready
Source
unknown
Stars
2
Last synced
3mo ago
Install
Instructions detected

Install

1. Install the package

npx -y design-token-bridge-mcp

2. Add to claude_desktop_config.json

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

Config file location: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) / %APPDATA%\Claude\claude_desktop_config.json (Windows)

10
Tools
0
Resources
0
Prompts
Standard I/O
Transport

Available Tools (10)

generate_material3_theme

Kotlin (Jetpack Compose)

extract_tokens_from_tailwind

`tailwind.config.js` content

generate_tailwind_config

`tailwind.config.js`

generate_swiftui_theme

Swift (SwiftUI)

Tool

Description

generate_css_variables

CSS custom properties

extract_tokens_from_json

W3C DTCG format JSON

validate_contrast

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

extract_tokens_from_figma_variables

Figma Variables API JSON

extract_tokens_from_css

CSS file content

Browse all MCP servers