UI Expert MCP Server

Instructions

Implementation Reference

• src/index.ts:243-416 (handler)

  The primary handler function that generates a complete design token system (colors, typography, spacing, shadows, etc.) based on the provided style and optional parameters.

  function generateDesignTokens(params: z.infer<typeof GenerateDesignTokensSchema>): string {
    const { primaryColor = '#3b82f6', style, darkMode } = params;
    
    const tokens = {
      modern: {
        borderRadius: { sm: '0.375rem', md: '0.5rem', lg: '0.75rem', xl: '1rem' },
        shadow: { sm: '0 1px 2px rgba(0,0,0,0.05)', md: '0 4px 6px rgba(0,0,0,0.07)', lg: '0 10px 15px rgba(0,0,0,0.1)' },
      },
      minimal: {
        borderRadius: { sm: '0', md: '0', lg: '0', xl: '0' },
        shadow: { sm: 'none', md: '0 1px 0 rgba(0,0,0,0.1)', lg: '0 1px 0 rgba(0,0,0,0.1)' },
      },
      corporate: {
        borderRadius: { sm: '0.25rem', md: '0.375rem', lg: '0.5rem', xl: '0.625rem' },
        shadow: { sm: '0 1px 3px rgba(0,0,0,0.12)', md: '0 4px 6px rgba(0,0,0,0.15)', lg: '0 10px 20px rgba(0,0,0,0.15)' },
      },
      playful: {
        borderRadius: { sm: '0.75rem', md: '1rem', lg: '1.5rem', xl: '2rem' },
        shadow: { sm: '0 4px 6px rgba(0,0,0,0.1)', md: '0 8px 12px rgba(0,0,0,0.15)', lg: '0 16px 24px rgba(0,0,0,0.2)' },
      },
      elegant: {
        borderRadius: { sm: '0.125rem', md: '0.25rem', lg: '0.375rem', xl: '0.5rem' },
        shadow: { sm: '0 2px 4px rgba(0,0,0,0.06)', md: '0 4px 8px rgba(0,0,0,0.08)', lg: '0 8px 16px rgba(0,0,0,0.1)' },
      },
    };
  
    const selectedTokens = tokens[style];
  
    return `export const designTokens = {
    colors: {
      primary: {
        50: '${lightenColor(primaryColor, 0.95)}',
        100: '${lightenColor(primaryColor, 0.9)}',
        200: '${lightenColor(primaryColor, 0.8)}',
        300: '${lightenColor(primaryColor, 0.6)}',
        400: '${lightenColor(primaryColor, 0.3)}',
        500: '${primaryColor}',
        600: '${darkenColor(primaryColor, 0.1)}',
        700: '${darkenColor(primaryColor, 0.2)}',
        800: '${darkenColor(primaryColor, 0.3)}',
        900: '${darkenColor(primaryColor, 0.4)}',
      },
      neutral: {
        50: '#f9fafb',
        100: '#f3f4f6',
        200: '#e5e7eb',
        300: '#d1d5db',
        400: '#9ca3af',
        500: '#6b7280',
        600: '#4b5563',
        700: '#374151',
        800: '#1f2937',
        900: '#111827',
      },
      success: {
        50: '#ecfdf5',
        500: '#10b981',
        600: '#059669',
      },
      warning: {
        50: '#fffbeb',
        500: '#f59e0b',
        600: '#d97706',
      },
      error: {
        50: '#fef2f2',
        500: '#ef4444',
        600: '#dc2626',
      },
    },
    
    typography: {
      fontFamily: {
        sans: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
        mono: 'ui-monospace, "Cascadia Mono", "Roboto Mono", monospace',
      },
      fontSize: {
        xs: '0.75rem',
        sm: '0.875rem',
        base: '1rem',
        lg: '1.125rem',
        xl: '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
      },
      fontWeight: {
        normal: 400,
        medium: 500,
        semibold: 600,
        bold: 700,
      },
      lineHeight: {
        tight: 1.25,
        normal: 1.5,
        relaxed: 1.75,
      },
    },
    
    spacing: {
      0: '0',
      1: '0.25rem',
      2: '0.5rem',
      3: '0.75rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      8: '2rem',
      10: '2.5rem',
      12: '3rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
    },
    
    borderRadius: ${JSON.stringify(selectedTokens.borderRadius, null, 2).replace(/"/g, "'")},
    
    boxShadow: ${JSON.stringify(selectedTokens.shadow, null, 2).replace(/"/g, "'")},
    
    transitions: {
      fast: '150ms ease-in-out',
      base: '250ms ease-in-out',
      slow: '350ms ease-in-out',
    },
    
    breakpoints: {
      sm: '640px',
      md: '768px', 
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
  ${darkMode ? `
    
    dark: {
      colors: {
        background: '#0f172a',
        surface: '#1e293b',
        surfaceHover: '#334155',
        text: '#f1f5f9',
        textMuted: '#94a3b8',
        border: '#334155',
      },
    },` : ''}
  };
  
  // CSS custom properties
  export const cssVariables = \`
  :root {
    /* Colors */
    --color-primary: \${designTokens.colors.primary[500]};
    --color-primary-hover: \${designTokens.colors.primary[600]};
    
    /* Typography */
    --font-sans: \${designTokens.typography.fontFamily.sans};
    --font-mono: \${designTokens.typography.fontFamily.mono};
    
    /* Spacing */
    --space-1: \${designTokens.spacing[1]};
    --space-2: \${designTokens.spacing[2]};
    --space-3: \${designTokens.spacing[3]};
    --space-4: \${designTokens.spacing[4]};
    
    /* Shadows */
    --shadow-sm: \${designTokens.boxShadow.sm};
    --shadow-md: \${designTokens.boxShadow.md};
    --shadow-lg: \${designTokens.boxShadow.lg};
    
    /* Transitions */
    --transition-fast: \${designTokens.transitions.fast};
    --transition-base: \${designTokens.transitions.base};
  }\`;`;
  }

• src/index.ts:20-24 (schema)

  Zod schema defining the input parameters for the generate_design_tokens tool.

  const GenerateDesignTokensSchema = z.object({
    primaryColor: z.string().optional().describe("Primary brand color in hex format"),
    style: z.enum(["modern", "minimal", "corporate", "playful", "elegant"]).describe("Overall design style"),
    darkMode: z.boolean().optional().describe("Include dark mode tokens"),
  });

• src/index.ts:76-92 (registration)

  Registration of the tool in the ListTools response, including name, description, and input schema.

  {
    name: "generate_design_tokens",
    description: "Generate a comprehensive design token system",
    inputSchema: {
      type: "object",
      properties: {
        primaryColor: { type: "string", description: "Primary brand color" },
        style: { 
          type: "string", 
          enum: ["modern", "minimal", "corporate", "playful", "elegant"],
          description: "Overall design style" 
        },
        darkMode: { type: "boolean", description: "Include dark mode tokens" },
      },
      required: ["style"],
    },
  },

• src/index.ts:147-157 (handler)

  Switch case dispatcher in CallToolRequestSchema handler that validates input and invokes the main generateDesignTokens function.

  case "generate_design_tokens": {
    const parsed = GenerateDesignTokensSchema.parse(args);
    return {
      content: [
        {
          type: "text", 
          text: generateDesignTokens(parsed),
        },
      ],
    };
  }

• src/index.ts:615-623 (helper)

  Helper functions for color manipulation used within generateDesignTokens to create color scales.

  function lightenColor(color: string, amount: number): string {
    // Simple color lightening - in production use a proper color library
    return color + Math.round(amount * 100).toString(16);
  }
  
  function darkenColor(color: string, amount: number): string {
    // Simple color darkening - in production use a proper color library
    return color + Math.round((1 - amount) * 100).toString(16);
  }