design-tokens-mcp
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| TOKENS_FILE | No | Path to the tokens JSON file (default: tokens.json in current directory) | tokens.json |
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| tokens_listA | List all design tokens in the token file. Optionally filter by type (color, dimension, fontFamily, number) or by name prefix such as 'color.'. Returns { count, tokens: [{ name, type, value }] }. Use this first to discover token names before calling tokens_get or tokens_set. |
| tokens_getA | Get a single design token by its dot-path name, e.g. 'color.primary'. Returns { name, type, value }. If the token does not exist the error lists close matches; call tokens_list to see all names. |
| tokens_setA | Create or update a design token. The value is validated against the token type before writing: color must be hex (#0F766E), dimension must have a unit (16px, 1.5rem), fontFamily must be a non-empty string, number must be numeric. Writes the token file in place and returns { name, type, value, created }. This is the only tool in this server that modifies the token file. |
| tokens_exportA | Export all design tokens in one of three formats: 'css' (CSS custom properties in a :root block), 'tailwind' (a Tailwind theme.extend fragment as CommonJS), or 'figma-variables' (a JSON shape close to Figma's Variables API with name/resolvedType/value). Returns { format, code }. Optionally pass out_path to also write the result to a file. |
| tokens_check_driftA | Scan a CSS file for hardcoded hex colors and px values, and compare each against the design tokens. Values that exactly match a token are reported as 'matched'; values that match no token are reported as 'drift', each with the nearest token as a fix suggestion. Returns { checked_file, matched, drift: [{ value, line, kind, nearest_token, nearest_value }] }. Use this after editing styles to keep code and design tokens in sync. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
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/N-Link-Lab/design-tokens-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server