Generate Complete Design Tokens
ui_generate_design_tokensGenerates a complete design token system with colors, typography, spacing, shadows, radii, and transitions as CSS custom properties, supporting style presets, custom base colors, and dark mode.
Instructions
Generate a complete, cohesive design token system in a single call.
Combines colors, typography, spacing, shadows, border-radius, and transitions into one unified token set with CSS custom properties. Tokens are harmonized based on the chosen style preset.
Args:
style (string, optional): Design style preset — 'minimal', 'bold', 'playful', 'dark', 'editorial', 'tech'. Default: 'minimal'
base_color (string, optional): Override the preset's base color with a hex code (e.g. "#6366F1")
dark_mode (boolean, optional): Generate dark mode color tokens alongside light mode. Default: true
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: Complete design token set with all categories (colors, typography, spacing, shadows, radii, transitions) as CSS custom properties, ready to paste into a project.
Examples:
Minimal design system: style="minimal"
Dark-first system with custom brand color: style="dark", base_color="#6366F1"
Playful system without dark mode: style="playful", dark_mode=false
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| style | No | Design style preset | minimal |
| dark_mode | No | Include dark mode color tokens | |
| base_color | No | Override base color (hex, e.g. '#6366F1') | |
| response_format | No | Output format | markdown |