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 | |
TDQS
Scored across 5 tools
Each tool has a clearly distinct purpose: listing, getting, setting, exporting, and drift-checking. No overlap.
All tool names follow a consistent 'tokens_verb' pattern with snake_case, making the set predictable.
5 tools is well-scoped for a design token server; each tool covers a core operation without redundancy.
The set covers CRUD except deletion, and includes export and drift detection. A delete token tool is missing, but the surface is otherwise complete for common workflows.