Generates native Material 3 themes in Kotlin for Android, including light/dark color schemes, typography, and shape definitions.
Extracts design tokens from CSS custom properties and generates CSS variable blocks with support for light/dark modes.
Extracts design tokens from Figma Variables API JSON, supporting colors, floats, multi-mode configurations, and alias resolution.
Generates native SwiftUI themes and color extensions for iOS development, with optional support for Liquid Glass.
Generates Jetpack Compose theme components for Material 3, including color schemes, typography, and shapes from universal design tokens.
Generates Kotlin source code for Material 3 themes, specifically targeting Jetpack Compose styling and configuration.
Generates Swift code for SwiftUI themes, including font structures and color extensions derived from design tokens.
design-token-bridge-mcp
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 GeneratorsInstall
From npm
npm install -g design-token-bridge-mcpFrom source
git clone https://github.com/kenneives/design-token-bridge-mcp.git
cd design-token-bridge-mcp
npm install && npm run buildConfigure 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
Tool | Input | Description |
|
| Parses colors, fontSize, spacing, borderRadius, boxShadow |
| CSS file content | Extracts |
| Figma Variables API JSON | Parses COLOR, FLOAT types, resolves aliases, handles multi-mode |
| W3C DTCG format JSON | Parses |
Generators — Universal Tokens → Output
Tool | Output | Description |
| Kotlin (Jetpack Compose) |
|
| Swift (SwiftUI) | Color extensions, Font structs, optional Liquid Glass (iOS 26+) |
|
| Theme extend block with rem units, ESM or CJS |
| CSS custom properties |
|
Validation
Tool | Description |
| WCAG AA/AAA contrast checking for color pairs with pass/fail + ratios |
Universal Token Schema
All tools speak this common format:
{
"colors": {
"primary": { "value": "#6750A4", "description": "Brand primary", "category": "primary" }
},
"typography": {
"display-large": { "fontSize": 57, "lineHeight": 64, "fontWeight": 400, "fontFamily": "Inter" }
},
"spacing": { "xs": 4, "sm": 8, "md": 16 },
"radii": { "sm": 8, "md": 12, "lg": 16 },
"elevation": {
"low": {
"shadowColor": "#000000",
"shadowOffset": { "x": 0, "y": 2 },
"shadowRadius": 4,
"shadowOpacity": 0.1
}
},
"motion": {
"fast": { "duration": 150, "easing": "ease-out" }
}
}Example: Full Pipeline
1. Extract tokens from a Tailwind config
Use extract_tokens_from_tailwind with the contents of my tailwind.config.js2. Generate native themes from the extracted tokens
Take those tokens and run them through:
- generate_tailwind_config (for the web app)
- generate_material3_theme (for Android)
- generate_swiftui_theme with liquidGlass=true (for iOS)
- generate_css_variables (for a vanilla CSS fallback)3. Validate accessibility
Run validate_contrast on those tokens at AAA levelExample Output
See the examples/qt-games/ directory for a complete responsive landing page built entirely from MCP-generated tokens, including:
qt-games-tokens.json— extracted universal tokenstailwind.config.js— generated Tailwind configvariables.css— generated CSS custom propertiescontrast-report.json— WCAG validation (AAA pass)index.html+styles.css— responsive landing page using the generated tokens
v0 + Figma Free Tier Setup
This MCP works with free tiers of both v0 and Figma. See the setup guides:
v0 Setup Guide — free tier signup, web UI workflow
Figma Setup Guide — free tier MCP config (6 calls/month)
Claude Code Setup — full pipeline configuration
Token Extraction Guide — manual extraction when APIs aren't available
Tech Stack
TypeScript + Node.js
@modelcontextprotocol/sdk v1.x (stdio transport)
Zod for schema validation
Zero heavyweight dependencies — no Babel, no PostCSS, no Style Dictionary
Tests
# 91 unit tests
npm test
# 31 Playwright visual/responsive tests
npm run test:e2eContributing
See CONTRIBUTING.md for development setup, project structure, and PR guidelines.
License
MIT — see LICENSE.