Skip to main content
Glama
N-Link-Lab

design-tokens-mcp

by N-Link-Lab

Server Configuration

Describes the environment variables required to run the server.

NameRequiredDescriptionDefault
TOKENS_FILENoPath to the tokens JSON file (default: tokens.json in current directory)tokens.json

Capabilities

Features and capabilities supported by this server

CapabilityDetails
tools
{
  "listChanged": true
}

Tools

Functions exposed to the LLM to take actions

NameDescription
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

NameDescription

No prompts

Resources

Contextual data attached and managed by the client

NameDescription

No resources

Latest Blog Posts

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