UI Preset MCP Server

Activate a UI preset bundle by ID. Loads all tokens, component templates, and layout templates. Resolves inheritance (extends) chain automatically, deep-merging parent tokens. Must be called before any correction, validation, or generation tools.

Args:

• preset_id (string): Folder name in /presets (e.g. 'glassmorphic-base', 'client-fintech')

• force_reload (boolean): Bypass cache and re-read from disk (default: false)

Returns: Preset manifest summary and token count confirmation. Error: "Preset 'x' not found" if the preset directory doesn't exist.

Hot-swap the active preset without restarting the server. Useful for switching between client presets while building. Optionally preserves any runtime token overrides applied in the current session.

Args:

• preset_id (string): The preset to switch to

• preserve_overrides (boolean): Keep current overrides after swap (default: false)

Returns: New active preset summary.

List all available presets in the presets directory. Optionally includes full manifest metadata for each preset.

Args:

• include_metadata (boolean): Include full manifest for each preset (default: false)

Returns: Array of preset IDs, or array of preset manifests if include_metadata is true.

Compare two presets and return what changed between them. Useful for understanding what a client override changes vs the base.

Args:

• preset_a (string): First preset ID

• preset_b (string): Second preset ID

• scope ('tokens' | 'components' | 'layouts' | 'all'): What to compare (default: 'all')

Returns: Object with added, removed, and changed keys with before/after values.

Returns the current session state including active preset ID, load time, and any runtime token overrides.

Returns:

• activePresetId: Currently loaded preset

• loadedAt: When the preset was activated

• hasOverrides: Whether runtime overrides are applied

• overrideKeys: Top-level override keys

Create a new preset directory with manifest and token override scaffold, inheriting from a parent preset. Generates a ready-to-customize preset structure on disk.

Args:

• preset_id (string): Kebab-case ID for the new preset (e.g. 'client-banking')

• extends (string): Parent preset to inherit from (default: 'glassmorphic-base')

• name (string): Human-readable display name

• description (string): Short description

• accent_color (string, optional): Override accent color in the scaffolded tokens

Returns: Path to new preset directory and files created.

Analyze a React component and auto-correct it against the active preset. Corrects: hardcoded colors, missing glass treatment, wrong typography tokens, wrong animation tokens, non-conforming sidebar/settings structure.

Args:

• code (string): React component source code (max 10,000 chars)

• context ('sidebar'|'settings'|'dashboard'|'surface'|'navigation'|'form'|'auto'): Component context hint for targeted rules (default: 'auto')

• dry_run (boolean): Return issues without changing code (default: false)

Returns:

• corrected: Fixed component code

• issues: Array of UIIssue objects with severity, rule, message, fix

• appliedFixes: List of changes made

• score: Conformance score before correction (0-100)

Requires active preset (run load_preset first).

Validate a React component against the active preset rules without modifying code. Returns a conformance score (0–100) and detailed issue list.

Args:

• code (string): React component source code

• include_suggestions (boolean): Include info-level suggestions (default: true)

Returns:

• valid (boolean): No errors found

• score (number): 0–100 conformance score

• issues: Array of { severity, rule, message, fix } objects

• presetUsed: Which preset was applied

Requires active preset.

Generate a React component from a preset template, with tokens resolved. Templates come from the active preset's component library.

Args:

• template_name (string): Component template to generate (e.g. 'GlassCard', 'Sidebar', 'OptionGroup')

• props (object): Props to inject into the template (default: {})

• variant (string, optional): Template variant (e.g. 'compact', 'wide', 'collapsible')

Returns:

• code: Generated React component with tokens resolved

• templateUsed: Name of the resolved template

• availableProps: Schema of props the template accepts

Run list_presets with include_metadata to see available templates. Requires active preset.

Export the active preset's design tokens in various formats for use in your project.

Args:

• format ('css'|'js'|'json'|'tailwind'): Output format (default: 'css')

  • css: :root { --color-surface: ...; } CSS custom properties

  • js: TypeScript const export for use with style objects

  • json: Raw token JSON

  • tailwind: theme.extend config for tailwind.config.js

• include_comments (boolean): Add section headers in output (default: true)

Returns: Token file content as a string. Requires active preset.

Apply runtime token overrides on top of the active preset (deep merged). Overrides are applied in memory only unless persist: true writes them to disk. Useful for per-client accent color changes without creating a full preset.

Args:

• overrides (object): Partial DesignTokens object (deeply merged over active tokens)

• persist (boolean): Write overrides to preset/overrides.json on disk (default: false)

Example overrides: { "colors": { "accent": { "primary": "#2563eb" } } }

Returns: Confirmation of applied override paths. Requires active preset.

Generate a harmonious color palette from a seed hex color using color theory.

Args:

• seed_color (string): 6-digit hex color (e.g. '#6366f1')

• harmony ('complementary'|'triadic'|'analogous'|'monochromatic'|'split-complementary'|'tetradic'): Color harmony rule (default: 'complementary')

• include_shades (boolean): Include 10-step lightness shades 50–900 (default: true)

Returns:

• seed: Input color

• hsl: Hue, saturation, lightness of seed

• harmony: Harmony type used

• colors: Named harmony colors (primary, complement, etc.)

• semantic: foreground, background, muted, surface aliases

• shades: 50–900 shade scale (if include_shades is true)

Use the result to populate apply_token_overrides or scaffold_preset.

Get a style preset and token override suggestions based on a natural-language aesthetic description.

Args:

• description (string): Describe the desired look and feel (e.g. 'dark hacker terminal', 'friendly pastel kids app', 'professional fintech dashboard')

• output_format ('preset_id'|'tokens'|'full'): What to return (default: 'full')

  • preset_id: Just the best matching preset ID

  • tokens: Just the suggested token overrides

  • full: Preset ID, token overrides, category info, and reasoning

Returns matching preset and style suggestions.

List all available design style categories with descriptions, design principles, and associated presets.

Args:

• include_presets (boolean): Include preset IDs for each category (default: true)

Returns: Array of style categories with metadata. Use with suggest_style and load_preset to explore the design system.