kenneives/design-token-bridge-mcp

design-token-bridge-mcp
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.
Install
From npm
From source
Configure with Claude Code
Add to your Claude Code MCP settings (~/.claude/settings.json or project .mcp.json):
Or if installed from source:
Tools (9 total)
Extractors — Input → Universal Tokens
| 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 |
Generators — Universal Tokens → Output
| 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 |
Validation
| Tool | Description |
|------|-------------|
| validate_contrast | WCAG AA/AAA contrast checking for color pairs with pass/fail + ratios |
Universal Token Schema
All tools speak this common format:
Example: Full Pipeline
1. Extract tokens from a Tailwind config
2. Generate native themes from the extracted tokens
3. Validate accessibility
Example 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 tokens
- tailwind.config.js — generated Tailwind config
- variables.css — generated CSS custom properties
- contrast-report.json — WCAG validation (AAA pass)
- index.html + styles.css — responsive landing page using the generated tokens