`get_design_tokens`

Returns design tokens from the design system for code generation.

Reference

Parameters

Name
category
Type
enum · optional
Description
Token category to retrieve (colors · spacing · typography · shadows · borders · radius · all)
Name
theme
Type
enum · optional
Description
Theme mode (light · dark · both)
Name
format
Type
enum · optional
Description
Output format (tailwind · css · json)
Name
layerId
Type
string · optional
Description
Layer UUID for layer-specific token resolution (uuid)
Name
detail_level
Type
enum · optional
Description
'summary' omits usage recommendations. 'full' (default) includes everything. (summary · full; default: 'full')

Returns

{
  tokens  Design tokens organized by category
    colors      semantic (surface, text, border), status, brand tokens
    spacing     scale from 0 to 24 (Tailwind spacing)
    typography  fontSizes, fontWeights, lineHeights, fontFamilies
    shadows     elevation scale
    borders     widths and styles
    radius      rounding scale
  usage   Guidelines for using tokens correctly
    doUse          Best practices to follow
    dontUse        Anti-patterns to avoid
    bestPractices  Additional guidance
}

Description

Returns design tokens from the design system for code generation.

Parameters:

category (optional): 'colors' | 'spacing' | 'typography' | 'shadows' | 'borders' | 'radius' | 'all' (default: 'all')
theme (optional): 'light' | 'dark' | 'both' (default: 'both')
format (optional): 'tailwind' | 'css' | 'json' (default: 'tailwind')

Use this tool to understand what tokens are available when generating UI code.

Source

Defined in packages/mcp/src/tools.ts. The request handler lives alongside its registration in packages/mcp/src/tools/.

get_design_tokens

Copy link to sectionReference