Design Token Bridge

소개

The Design Token Bridge is an MCP server engineered to seamlessly translate design tokens across diverse platforms. It extracts tokens from sources like Tailwind configurations, CSS files, Figma Variables, or the W3C DTCG format, then converts them into native themes for Material 3 (Kotlin), SwiftUI (with optional Liquid Glass), Tailwind configurations, and standard CSS Variables. This tool is a critical component in the v0 → Figma → Claude Code pipeline, enabling designers and developers to maintain a consistent design language across web and mobile applications while integrating with AI-powered code generation workflows.

주요 기능

• Multi-platform token extraction from Tailwind, CSS, Figma, and W3C DTCG.
• Native theme generation for Material 3 (Kotlin), SwiftUI, Tailwind, and CSS Variables.
• Seamless integration as an MCP server with Claude Code settings.
• Utilizes a Universal Token Schema for consistent data representation.
• 0 GitHub stars
• WCAG AA/AAA contrast validation for accessibility compliance.

사용 사례

• Automating design token synchronization across web, Android, and iOS platforms.
• Integrating design systems into AI-powered code generation workflows (v0 → Figma → Claude Code).
• Ensuring accessibility compliance for generated themes through automated contrast checking.