Server data from the Official MCP Registry
Translate design tokens between Tailwind, Figma, CSS, Material 3, and SwiftUI
Translate design tokens between Tailwind, Figma, CSS, Material 3, and SwiftUI
Valid MCP server (2 strong, 3 medium validity signals). 1 known CVE in dependencies Package registry verified. Imported from the Official MCP Registry.
7 files analyzed · 2 issues found
Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.
Add this to your MCP configuration file:
{
"mcpServers": {
"io-github-kenneives-design-token-bridge-mcp": {
"args": [
"-y",
"design-token-bridge-mcp"
],
"command": "npx"
}
}
}From the project's GitHub README.
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.
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 Generators
npm install -g design-token-bridge-mcp
git clone https://github.com/kenneives/design-token-bridge-mcp.git
cd design-token-bridge-mcp
npm install && npm run build
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"]
}
}
}
| Tool | Input | Description |
|---|---|---|
extract_tokens_from_tailwind | tailwind.config.js content | Parses colors, fontSize, spacing, borderRadius, boxShadow |
extract_tokens_from_css | CSS file content | Extracts --color-*, --space-*, --radius-*, --shadow-* custom properties |
extract_tokens_from_figma_variables | Figma Variables API JSON | Parses COLOR, FLOAT types, resolves aliases, handles multi-mode |
extract_tokens_from_json | W3C DTCG format JSON | Parses $value/$type/$description, resolves {aliases}, handles groups |
| Tool | Output | Description |
|---|---|---|
generate_material3_theme | Kotlin (Jetpack Compose) | lightColorScheme(), Typography, Shapes with M3 naming |
generate_swiftui_theme | Swift (SwiftUI) | Color extensions, Font structs, optional Liquid Glass (iOS 26+) |
generate_tailwind_config | tailwind.config.js | Theme extend block with rem units, ESM or CJS |
generate_css_variables | CSS custom properties | :root block with light/dark mode via prefers-color-scheme |
| Tool | Description |
|---|---|
validate_contrast | WCAG AA/AAA contrast checking for color pairs with pass/fail + ratios |
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" }
}
}
Use extract_tokens_from_tailwind with the contents of my tailwind.config.js
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)
Run validate_contrast on those tokens at AAA level
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 tokensThis MCP works with free tiers of both v0 and Figma. See the setup guides:
# 91 unit tests
npm test
# 31 Playwright visual/responsive tests
npm run test:e2e
See CONTRIBUTING.md for development setup, project structure, and PR guidelines.
MIT — see LICENSE.
Be the first to review this server!
by Modelcontextprotocol · Developer Tools
Read, search, and manipulate Git repositories programmatically
by Toleno · Developer Tools
Toleno Network MCP Server — Manage your Toleno mining account with Claude AI using natural language.
by mcp-marketplace · Developer Tools
Create, build, and publish Python MCP servers to PyPI — conversationally.