claude mcp add kenneives-design-token-bridge-mcp -- npx -y design-token-bridge-mcp
{
"mcpServers": {
"kenneives-design-token-bridge-mcp": {
"command": "npx",
"args": ["-y", "design-token-bridge-mcp"]
}
}
}
{
"mcpServers": {
"kenneives-design-token-bridge-mcp": {
"command": "npx",
"args": ["-y", "design-token-bridge-mcp"]
}
}
}
{
"mcpServers": {
"kenneives-design-token-bridge-mcp": {
"command": "npx",
"args": ["-y", "design-token-bridge-mcp"]
}
}
}
About This MCP Server
The design-token-bridge-mcp server is a developer tool that enables the translation of design tokens between different design systems and programming languages, including Tailwind, Figma, CSS, Material 3, and SwiftUI. It connects to these systems through standard input/output streams, facilitating seamless communication and data exchange. Developers would use this tool when they need to convert design tokens from one system to another, such as when collaborating with designers who use Figma or when implementing a design system in a programming language like Swift.
Translate design tokens between Tailwind, Figma, CSS, Material 3, and SwiftUI. This is a Model Context Protocol (MCP) server that extends AI assistants like Claude with developer tools capabilities via the stdio transport.
Package
design-token-bridge-mcp on npm
HOW TO USE
Select your AI client above to get the install command. This MCP server uses the stdio transport and is available on npm.
What tools does it provide?
The design-token-bridge-mcp server extends your AI assistant with developer tools capabilities. Once installed, your AI can use its tools automatically.
