design-token-bridge-mcp
This server acts as a universal design token bridge, translating tokens between platforms to enable consistent theming across web, mobile, and design systems.
Extract Design Tokens from:
Tailwind config files (
tailwind.config.js/.ts) — colors, font sizes, spacing, radii, shadowsCSS custom properties (e.g.,
--color-*,--space-*,--radius-*)Figma Variables API JSON exports — with alias resolution and multi-mode support
W3C DTCG format JSON — including
$value/$type/$descriptionand alias resolution
Generate Platform-Specific Themes for:
Android — Kotlin/Jetpack Compose Material 3 theme files (
lightColorScheme(),Typography,Shapes)iOS — SwiftUI theme files with Color extensions, Font structs, and optional iOS 26+ Liquid Glass modifiers
Tailwind —
tailwind.config.jswith rem units in ESM or CJS formatCSS — Custom properties with
:rootblock and optional light/dark mode viaprefers-color-scheme
Validate Accessibility — Check color contrast against WCAG AA/AAA compliance, returning pass/fail results and contrast ratios
The full pipeline is: extract → transform to universal schema → generate → validate.
Generates native Material 3 themes in Kotlin for Android, including light/dark color schemes, typography, and shape definitions.
Extracts design tokens from CSS custom properties and generates CSS variable blocks with support for light/dark modes.
Extracts design tokens from Figma Variables API JSON, supporting colors, floats, multi-mode configurations, and alias resolution.
Generates native SwiftUI themes and color extensions for iOS development, with optional support for Liquid Glass.
Generates Jetpack Compose theme components for Material 3, including color schemes, typography, and shapes from universal design tokens.
Generates Kotlin source code for Material 3 themes, specifically targeting Jetpack Compose styling and configuration.
Generates Swift code for SwiftUI themes, including font structures and color extensions derived from design tokens.
— 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.
┌──────────────┐ ┌──────────────┐ ┌────────────────────────┐
│ Tailwind │ │ │ │ Material 3 (Kotlin) │
│ CSS Vars │────▶│ Universal │────▶│ SwiftUI (Swift) │
│ Figma Vars │ │ Token │ │ Tailwind Config │
│ W3C DTCG │ │ Schema │ │ CSS Variables │
└──────────────┘ └──────────────┘ └────────────────────────┘
Extractors Bridge GeneratorsInstall
From npm
npm install -g design-token-bridge-mcpFrom source
git clone https://github.com/kenneives/design-token-bridge-mcp.git
cd design-token-bridge-mcp
npm install && npm run buildRelated MCP server: Chuk Design System
Configure with Claude Code
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"]
}
}
}Tools (9 total)
Extractors — Input → Universal Tokens
Tool | Input | Description |
|
| Parses colors, fontSize, spacing, borderRadius, boxShadow |
| CSS file content | Extracts |
| Figma Variables API JSON | Parses COLOR, FLOAT types, resolves aliases, handles multi-mode |
| W3C DTCG format JSON | Parses |
Generators — Universal Tokens → Output
Tool | Output | Description |
| Kotlin (Jetpack Compose) |
|
| Swift (SwiftUI) | Color extensions, Font structs, optional Liquid Glass (iOS 26+) |
|
| Theme extend block with rem units, ESM or CJS |
| CSS custom properties |
|
Validation
Tool | Description |
| WCAG AA/AAA contrast checking for color pairs with pass/fail + ratios |
Universal Token Schema
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" }
}
}Example: Full Pipeline
1. Extract tokens from a Tailwind config
Use extract_tokens_from_tailwind with the contents of my tailwind.config.js2. Generate native themes from the extracted tokens
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)3. Validate accessibility
Run validate_contrast on those tokens at AAA levelExample 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 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 tokens
v0 + Figma Free Tier Setup
This MCP works with free tiers of both v0 and Figma. See the setup guides:
v0 Setup Guide — free tier signup, web UI workflow
Figma Setup Guide — free tier MCP config (6 calls/month)
Claude Code Setup — full pipeline configuration
Token Extraction Guide — manual extraction when APIs aren't available
Tech Stack
TypeScript + Node.js
@modelcontextprotocol/sdk v1.x (stdio transport)
Zod for schema validation
Zero heavyweight dependencies — no Babel, no PostCSS, no Style Dictionary
Tests
# 91 unit tests
npm test
# 31 Playwright visual/responsive tests
npm run test:e2eContributing
See CONTRIBUTING.md for development setup, project structure, and PR guidelines.
License
MIT — see LICENSE.
Available Tools
9 toolsextract_tokens_from_cssA
Parse CSS custom properties (variables) and extract design tokens
| Name | Required | Description | Default |
|---|---|---|---|
| css | Yes | The contents of a CSS file with custom properties |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden but only states the basic operation. It doesn't disclose behavioral traits like whether parsing is strict or lenient, what format extracted tokens are in, error handling for invalid CSS, or performance characteristics. For a parsing tool with zero annotation coverage, this is insufficient.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence with zero wasted words. It's front-loaded with the core purpose and appropriately sized for this simple tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no annotations, no output schema, and a parsing operation that likely returns structured data, the description is incomplete. It doesn't explain what 'design tokens' means in this context, what format they're returned in, or any limitations. The simplicity of the tool (1 parameter) doesn't compensate for these gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% (the 'css' parameter is fully documented in schema), so baseline is 3. The description adds no additional parameter semantics beyond what the schema already provides about CSS file contents with custom properties.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Parse CSS custom properties and extract design tokens'), identifies the resource (CSS files with custom properties), and distinguishes from siblings by focusing on CSS input rather than Figma, JSON, Tailwind, or generation/validation tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context (when you have CSS with custom properties to extract tokens), but doesn't explicitly state when NOT to use it or name alternatives like 'extract_tokens_from_json' for non-CSS sources. The sibling tools provide clear alternatives, but the description doesn't reference them.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
extract_tokens_from_figma_variablesB
Parse Figma variables export JSON and extract design tokens
| Name | Required | Description | Default |
|---|---|---|---|
| variables | Yes | Figma Variables REST API JSON export as a string |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool parses and extracts tokens but doesn't describe what 'extract' entails (e.g., format of output, whether it transforms data, error handling, or performance considerations). For a tool with no annotation coverage, this leaves significant gaps in understanding its behavior beyond the basic purpose.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It is front-loaded with the core action ('parse' and 'extract'), making it easy to scan and understand quickly. Every part of the sentence contributes essential information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's moderate complexity (parsing JSON to extract tokens), no annotations, and no output schema, the description is minimally adequate but incomplete. It covers the basic purpose and input but lacks details on output format, error cases, or how it differs from siblings. For a tool with no structured behavioral data, it should provide more context to be fully helpful.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, clearly documenting the 'variables' parameter as 'Figma Variables REST API JSON export as a string'. The description adds no additional semantic context beyond this (e.g., example JSON structure, validation rules, or common pitfalls). With high schema coverage, the baseline score of 3 is appropriate as the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('parse' and 'extract'), the resource ('Figma variables export JSON'), and the output ('design tokens'). It distinguishes itself from siblings like 'extract_tokens_from_css' or 'extract_tokens_from_json' by specifying the Figma source format, making the purpose unambiguous and well-differentiated.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites (e.g., needing Figma variables data), exclusions (e.g., not for CSS files), or comparisons to siblings like 'extract_tokens_from_json' (which might handle generic JSON). Without such context, the agent must infer usage from the tool name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
extract_tokens_from_jsonA
Parse W3C Design Tokens Community Group (DTCG) format JSON into universal tokens
| Name | Required | Description | Default |
|---|---|---|---|
| json | Yes | W3C DTCG format JSON string |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It states the tool parses JSON into universal tokens but does not disclose behavioral traits such as error handling, performance characteristics, or what 'universal tokens' entail. This leaves significant gaps for a tool with no annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any wasted words. It is appropriately sized and front-loaded, making it easy to understand at a glance.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (parsing JSON into tokens), lack of annotations, and no output schema, the description is minimal. It states the purpose but does not cover behavioral aspects or output details, making it adequate but with clear gaps for informed tool selection.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents the single parameter 'json' as a W3C DTCG format JSON string. The description adds no additional meaning beyond what the schema provides, such as format details or examples, resulting in the baseline score of 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Parse'), the input format ('W3C DTCG format JSON'), and the output ('universal tokens'), distinguishing it from siblings like extract_tokens_from_css or extract_tokens_from_figma_variables by specifying the input format.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage when dealing with W3C DTCG format JSON, but does not explicitly state when to use this tool versus alternatives like extract_tokens_from_css or validate_contrast. It provides clear context but lacks explicit exclusions or named alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
extract_tokens_from_tailwindC
Parse a Tailwind config and extract theme values into universal design tokens
| Name | Required | Description | Default |
|---|---|---|---|
| config | Yes | The contents of a tailwind.config.js or tailwind.config.ts file |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool parses and extracts values, implying a read-only operation, but lacks details on error handling, output format, performance considerations, or any side effects. This leaves significant gaps in understanding how the tool behaves beyond its basic function.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It is front-loaded and every part contributes to understanding the action and resource, making it highly concise and well-structured.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of parsing and extracting design tokens, the lack of annotations, and no output schema, the description is insufficient. It doesn't explain what 'universal design tokens' entail, how results are returned, or any limitations, leaving the agent with incomplete context for effective use.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, with the single parameter 'config' fully documented in the schema as 'The contents of a tailwind.config.js or tailwind.config.ts file'. The description adds no additional meaning beyond this, such as format specifics or examples, so it meets the baseline for high schema coverage without compensating further.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('parse', 'extract') and resource ('Tailwind config', 'theme values', 'universal design tokens'), making the purpose evident. It distinguishes from some siblings like 'extract_tokens_from_css' by specifying the source as a Tailwind config, though it doesn't explicitly differentiate from all siblings like 'extract_tokens_from_figma_variables'.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives. The description mentions parsing a Tailwind config, but it doesn't specify scenarios, prerequisites, or exclusions, such as when to choose this over 'extract_tokens_from_css' or 'generate_tailwind_config'.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_css_variablesC
Generate CSS custom properties from universal design tokens with light/dark mode support
| Name | Required | Description | Default |
|---|---|---|---|
| tokens | Yes | Universal design tokens JSON string | |
| darkTokens | No | Optional dark mode universal design tokens JSON string |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states what the tool does but doesn't describe important behavioral aspects: what format the CSS output takes, whether it's a complete stylesheet or just variable declarations, if there are any rate limits, error handling for invalid tokens, or whether the operation is idempotent. The description is functional but lacks operational context.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that clearly states the tool's purpose. It's front-loaded with the core functionality and includes the key feature (light/dark mode support). There's no wasted verbiage or redundant information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no annotations and no output schema, the description is insufficiently complete. It doesn't explain what the tool returns (CSS code format, structure, or example), how errors are handled, or how it integrates with the sibling token extraction tools. The description covers basic purpose but leaves critical operational details unspecified.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters thoroughly. The description adds minimal value beyond the schema - it mentions 'light/dark mode support' which hints at the purpose of the optional 'darkTokens' parameter, but doesn't provide additional syntax, format requirements, or examples beyond what's in the schema descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Generate CSS custom properties from universal design tokens with light/dark mode support.' It specifies the verb (generate), resource (CSS custom properties), and input source (universal design tokens). However, it doesn't explicitly differentiate from siblings like 'generate_tailwind_config' or 'generate_material3_theme' beyond mentioning CSS output.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives like 'generate_tailwind_config' or 'generate_material3_theme.' The description mentions light/dark mode support but doesn't explain when to use the optional 'darkTokens' parameter or how this tool fits within the broader token processing workflow with sibling extraction tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_material3_themeC
Generate Kotlin Jetpack Compose Material 3 theme files from universal design tokens
| Name | Required | Description | Default |
|---|---|---|---|
| tokens | Yes | Universal design tokens JSON string |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool generates files but does not describe output format (e.g., file type, structure), side effects (e.g., file creation location), error handling, or performance considerations. This is inadequate for a tool with zero annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without redundancy. It is front-loaded with the core action and uses precise terminology, making it easy to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (generating code files from design tokens), lack of annotations, and no output schema, the description is insufficient. It does not explain what the generated theme files contain, how they are structured, or any dependencies, leaving significant gaps for an agent to understand the tool's behavior and outputs.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with the 'tokens' parameter documented as 'Universal design tokens JSON string.' The description adds no additional parameter semantics beyond this, such as token format examples or validation rules. With high schema coverage, a baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Generate Kotlin Jetpack Compose Material 3 theme files from universal design tokens.' It specifies the verb ('generate'), resource ('theme files'), and technology stack ('Kotlin Jetpack Compose Material 3'), but does not explicitly differentiate it from sibling tools like generate_css_variables or generate_swiftui_theme, which target different output formats.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It does not mention prerequisites (e.g., needing design tokens as input), when-not-to-use scenarios, or comparisons to siblings like generate_css_variables or generate_swiftui_theme, leaving the agent to infer usage context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_swiftui_themeC
Generate SwiftUI theme files from universal design tokens, with optional Liquid Glass support
| Name | Required | Description | Default |
|---|---|---|---|
| tokens | Yes | Universal design tokens JSON string | |
| liquidGlass | No | Include iOS 26+ Liquid Glass modifiers |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden for behavioral disclosure. It states the tool generates files but doesn't describe what happens (e.g., creates new files, overwrites existing ones, returns content as string). It mentions Liquid Glass support but doesn't explain what that entails or any iOS version constraints. No information about error handling, rate limits, or authentication needs is provided.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise (one sentence) with zero wasted words. It's front-loaded with the core purpose and includes the optional feature. Every word earns its place, making it easy to scan and understand quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity (generating theme files is a non-trivial operation), lack of annotations, and no output schema, the description is incomplete. It doesn't explain what the output looks like (file paths, format, content structure), error conditions, or how it integrates with the sibling tools that extract tokens. For a code generation tool with multiple parameters, this leaves significant gaps for an AI agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters thoroughly. The description adds minimal value beyond the schema: it mentions 'optional Liquid Glass support' which corresponds to the 'liquidGlass' parameter, but provides no additional context about what Liquid Glass is or when to use it. The baseline of 3 is appropriate when the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Generate SwiftUI theme files from universal design tokens' specifies both the verb (generate) and resource (SwiftUI theme files). It distinguishes from siblings by focusing on SwiftUI output rather than CSS, Material3, Tailwind, or validation. However, it doesn't explicitly contrast with all siblings (e.g., 'generate_css_variables' vs 'generate_swiftui_theme').
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It mentions 'optional Liquid Glass support' but doesn't explain when to enable it or when to choose this over sibling tools like 'generate_css_variables' or 'generate_material3_theme'. There's no mention of prerequisites (e.g., needing design tokens first) or typical workflows.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_tailwind_configB
Generate a tailwind.config.js theme from universal design tokens
| Name | Required | Description | Default |
|---|---|---|---|
| tokens | Yes | Universal design tokens JSON string | |
| format | No | Output format: ES modules or CommonJS | esm |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden but offers minimal behavioral insight. It states what the tool does but doesn't disclose critical traits like whether it's a read-only transformation, what errors might occur with invalid tokens, or the output format details beyond the config type. For a generation tool with no annotation coverage, this is inadequate.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that front-loads the core purpose without any wasted words. Every element (verb, resource, source) earns its place, making it easy to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's moderate complexity (transforming tokens to config), no annotations, and no output schema, the description is minimally complete. It specifies the output file type but lacks details on the generated structure, error handling, or dependencies. This is adequate for basic understanding but leaves gaps for reliable agent use.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema fully documents both parameters. The description adds no additional meaning beyond implying that 'tokens' should be universal design tokens, which is already clear from the schema's description. This meets the baseline for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Generate'), the resource ('a tailwind.config.js theme'), and the source ('from universal design tokens'). It distinguishes this tool from siblings like generate_css_variables or generate_material3_theme by specifying the Tailwind configuration output format.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like generate_css_variables or extract_tokens_from_tailwind. It doesn't mention prerequisites (e.g., needing design tokens first) or contextual constraints, leaving the agent to infer usage from the tool name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
validate_contrastB
Check color combinations in design tokens for WCAG AA/AAA accessibility compliance
| Name | Required | Description | Default |
|---|---|---|---|
| tokens | Yes | Universal design tokens JSON string | |
| level | No | WCAG compliance level to check | AA |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden for behavioral disclosure. While it states what the tool does, it doesn't describe what happens during validation (e.g., returns pass/fail results, detailed reports, error handling), performance characteristics, or any constraints. This is a significant gap for a validation tool with zero annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that communicates the core purpose without any wasted words. It's appropriately sized and front-loaded with the essential information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a validation tool with no annotations and no output schema, the description is insufficient. It doesn't explain what the tool returns (validation results, error messages, structured reports) or provide any behavioral context about how the validation works. Given the complexity of accessibility compliance checking, more information is needed.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters thoroughly. The description doesn't add any additional meaning about parameter usage beyond what's in the schema. Baseline 3 is appropriate when the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Check color combinations'), the target resource ('design tokens'), and the purpose ('for WCAG AA/AAA accessibility compliance'). It uses precise terminology that distinguishes it from sibling tools focused on token extraction or theme generation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage when you have design tokens and need to check accessibility compliance, but it doesn't explicitly state when to use this tool versus alternatives or provide any exclusion criteria. The context is clear but lacks explicit guidance on tool selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
9 tool updates
v1.0.2- First observed
extract_tokens_from_css - First observed
extract_tokens_from_figma_variables - First observed
extract_tokens_from_json - First observed
extract_tokens_from_tailwind - First observed
generate_css_variables - First observed
generate_material3_theme - First observed
generate_swiftui_theme - First observed
generate_tailwind_config - First observed
validate_contrast
TDQS
Every tool has a clearly distinct purpose with no ambiguity. The tools are organized into two clear groups: extraction from various sources (CSS, Figma, JSON, Tailwind) and generation/validation for different outputs (CSS, Material3, SwiftUI, Tailwind, contrast validation). Each tool name explicitly indicates its specific source or target, making misselection unlikely.
All tool names follow a consistent verb_noun pattern throughout. The verbs are clear and descriptive (extract_tokens_from_, generate_, validate_), and the nouns specify the exact format or platform. There are no deviations in naming conventions, making the set highly predictable and readable.
With 9 tools, the count is well-scoped for the server's purpose of bridging design tokens across platforms. Each tool earns its place by covering key extraction sources and output formats, providing comprehensive coverage without being overwhelming or redundant.
The tool surface is complete for the domain of design token conversion and validation. It covers extraction from major sources (CSS, Figma, JSON, Tailwind), generation to key platforms (CSS, Material3, SwiftUI, Tailwind), and includes essential validation (contrast checking). There are no obvious gaps, ensuring agents can handle full workflows without dead ends.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Generate design systems: OKLCH color palettes, fluid type scales, spacing, shape and icon tokens.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
Convert colours between hex, RGB, HSL, OKLCH and CMYK, and compute harmonies.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceProvides comprehensive color conversion, manipulation, analysis, and WCAG accessibility tools supporting multiple formats (hex, rgb, hsl, oklch, oklab) for design systems and web development.312MIT
- AlicenseNot gradedqualityDmaintenanceProvides access to a universal design token system with 7 pre-built themes (colors, typography, spacing, motion) and multi-format export capabilities for Canva, Remotion, PPTX, CSS, and W3C JSON.1MIT
- AlicenseNot gradedqualityDmaintenanceA comprehensive toolkit for color conversion, manipulation, and accessibility analysis supporting formats like OkLCH and WCAG compliance. It enables AI agents to manage design systems by generating harmonious palettes, transforming color spaces, and performing contrast checks.2MIT
- AlicenseAqualityBmaintenanceDesign system MCP server. 20 tools: extract design tokens from any URL, pull from Figma or Penpot, generate React + shadcn/ui components from specs, run WCAG audits, sync tokens bidirectionally.5027639MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/kenneives/design-token-bridge-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server