UI/UX MCP Server

Instructions

Implementation Reference

• src/tools/tailwind.ts:20-69 (handler)

  Core handler function that parses input design tokens (colors, spacing, typography, breakpoints) and generates a Tailwind configuration object along with CSS variables.

  async generateConfig(args: any) {
    const params = TailwindConfigSchema.parse(args);
    
    try {
      // Generate Tailwind configuration based on design tokens
      const config = {
        content: ['./src/**/*.{js,jsx,ts,tsx,html}'],
        theme: {
          extend: {
            colors: this.processColors(params.colors),
            spacing: this.processSpacing(params.spacing),
            fontFamily: this.processFontFamily(params.typography),
            fontSize: this.processFontSizes(params.typography),
            screens: this.processBreakpoints(params.breakpoints)
          }
        },
        plugins: []
      };
  
      // Also generate CSS variables for design tokens
      const cssVariables = this.generateCSSVariables(params);
  
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify({
              tailwindConfig: config,
              cssVariables,
              usage: {
                config: 'Save as tailwind.config.js',
                css: 'Add CSS variables to your global styles',
                example: 'bg-primary text-secondary p-spacing-md'
              }
            }, null, 2)
          }
        ]
      };
    } catch (error: any) {
      return {
        content: [
          {
            type: 'text',
            text: `Error generating Tailwind config: ${error.message}`
          }
        ],
        isError: true
      };
    }
  }

• src/tools/tailwind.ts:5-10 (schema)

  Zod validation schema matching the tool's inputSchema for parsing arguments in generateConfig.

  const TailwindConfigSchema = z.object({
    colors: z.record(z.any()).optional(),
    spacing: z.record(z.any()).optional(),
    typography: z.record(z.any()).optional(),
    breakpoints: z.record(z.any()).optional()
  });

• src/index.ts:95-106 (registration)

  Tool registration in the listTools response, defining name, description, and input schema.

    name: 'tailwind_generate_config',
    description: 'Generate Tailwind configuration from design tokens',
    inputSchema: {
      type: 'object',
      properties: {
        colors: { type: 'object' },
        spacing: { type: 'object' },
        typography: { type: 'object' },
        breakpoints: { type: 'object' }
      }
    }
  },

• src/index.ts:308-309 (registration)

  Switch case in callTool handler that dispatches to the TailwindTools.generateConfig method.

  case 'tailwind_generate_config':
    return await this.tailwindTools.generateConfig(args);