Design Token Bridge Mcp
Bridges design tokens between five platforms with nine bidirectional tools. Extract tokens from Tailwind configs, CSS custom properties, Figma Variables API, or W3C DTCG format, then generate native theme files for Material 3 Kotlin, SwiftUI with Liquid Glass support, Tailwind configs, or CSS variables. Everything flows through a universal JSON schema covering colors, typography, spacing, radii, elevation, and motion. Includes WCAG contrast validation for accessibility checks. Built for the v0 to Figma to Claude Code pipeline, where you design in the browser, sync to Figma, then generate consistent tokens across web and native apps without manual translation.
- GitHub stars
- 2
- tools
- 9
- transport
- STDIO
- last updated
- Feb 19, 2026
Tools
9 toolsPublic tool metadata for what this MCP can expose to an agent.
extract_tokens_from_tailwindParses colors, fontSize, spacing, borderRadius, boxShadow from a Tailwind config.
Parses colors, fontSize, spacing, borderRadius, boxShadow from a Tailwind config.
No parameter schema in public metadata yet.
extract_tokens_from_cssExtracts --color-*, --space-*, --radius-*, --shadow-* custom properties from CSS.
Extracts --color-*, --space-*, --radius-*, --shadow-* custom properties from CSS.
No parameter schema in public metadata yet.
extract_tokens_from_figma_variablesParses COLOR, FLOAT types, resolves aliases, handles multi-mode from Figma Variables API JSON.
Parses COLOR, FLOAT types, resolves aliases, handles multi-mode from Figma Variables API JSON.
No parameter schema in public metadata yet.
extract_tokens_from_jsonParses W3C DTCG format JSON, resolving aliases and groups.
Parses W3C DTCG format JSON, resolving aliases and groups.
No parameter schema in public metadata yet.
generate_material3_themeGenerates Kotlin (Jetpack Compose) lightColorScheme(), Typography, and Shapes with M3 naming.
Generates Kotlin (Jetpack Compose) lightColorScheme(), Typography, and Shapes with M3 naming.
No parameter schema in public metadata yet.
generate_swiftui_themeGenerates Swift (SwiftUI) color extensions, Font structs, and optional Liquid Glass (iOS 26+).
Generates Swift (SwiftUI) color extensions, Font structs, and optional Liquid Glass (iOS 26+).
No parameter schema in public metadata yet.
generate_tailwind_configGenerates a tailwind.config.js theme extend block with rem units, ESM or CJS.
Generates a tailwind.config.js theme extend block with rem units, ESM or CJS.
No parameter schema in public metadata yet.
generate_css_variablesGenerates a :root CSS custom properties block with light/dark mode via prefers-color-scheme.
Generates a :root CSS custom properties block with light/dark mode via prefers-color-scheme.
No parameter schema in public metadata yet.
validate_contrastWCAG AA/AAA contrast checking for color pairs with pass/fail and ratios.
WCAG AA/AAA contrast checking for color pairs with pass/fail and ratios.
No parameter schema in public metadata yet.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageReadme
— signed, offline-verifiable tool-safety grade
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.
Details
- Repository
- github.com/kenneives/design-token-bridge-mcp
- Category
- Design & Creative
- Package
design-token-bridge-mcp- Transport
- STDIO
- Registry
- MCP registry, active
Related Design & Creative MCP servers
View all
UI Design to Codekinglions/ui-design-to-code-mcpDesign-to-code artifact pipeline for UI screenshots, Figma node data, and visual review.0stars
Figma Bridge Mcpnguyendinhphongdx/figma-bridge-mcpBidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back0stars
three.ws 3D Agent Toolsnirholas/three.wsMCP tools from three.ws: free + paid text-to-3D, rigging, agent reputation, market intel.269stars
Excalidraw Architectbv-venky/excalidraw-architect-mcpGenerate beautiful Excalidraw architecture diagrams with auto-layout and component styling120stars
Figma Edit Mcpneozhehan/figma-edit-mcpProgrammatically read, create, and modify Figma designs via MCP.14stars