UI Expert MCP Server

Instructions

Implementation Reference

• src/index.ts:201-241 (handler)

  The primary handler function that generates a detailed UI/UX analysis report including recommendations for design system, components, accessibility, performance, and responsive design.

  function generateUIAnalysis(params: z.infer<typeof AnalyzeUISchema>): string {
    const { framework, currentIssues, targetAudience, designStyle } = params;
    
    return `# UI/UX Analysis Report
  
  ## Current Framework: ${framework}
  
  ## Identified Issues:
  ${currentIssues.map(issue => `- ${issue}`).join('\n')}
  
  ## Recommendations:
  
  ### 1. Design System Implementation
  - Create a comprehensive design token system
  - Implement consistent spacing, typography, and color scales
  - Use CSS custom properties for easy theming
  
  ### 2. Component Architecture
  - Refactor into smaller, reusable components
  - Implement proper component composition patterns
  - Add loading and error states
  
  ### 3. Accessibility Improvements
  - Ensure WCAG 2.1 AA compliance
  - Add proper ARIA labels and roles
  - Implement keyboard navigation
  - Ensure sufficient color contrast
  
  ### 4. Performance Optimization
  - Implement lazy loading for heavy components
  - Use React.memo() or equivalent for expensive renders
  - Optimize bundle size with code splitting
  
  ### 5. Responsive Design
  - Mobile-first approach
  - Use modern CSS Grid and Flexbox
  - Implement fluid typography and spacing
  
  ${targetAudience ? `\n### Target Audience Considerations:\n- ${targetAudience}` : ''}
  ${designStyle ? `\n### Design Style Direction:\n- ${designStyle}` : ''}`;
  }

• src/index.ts:13-18 (schema)

  Zod schema defining the input parameters for the analyze_ui tool: framework (required), currentIssues (required), targetAudience (optional), designStyle (optional).

  const AnalyzeUISchema = z.object({
    framework: z.string().describe("Frontend framework (react, vue, angular, etc)"),
    currentIssues: z.array(z.string()).describe("List of current UI/UX issues"),
    targetAudience: z.string().optional().describe("Target user demographic"),
    designStyle: z.string().optional().describe("Desired design style (modern, minimal, corporate, etc)"),
  });

• src/index.ts:58-75 (registration)

  Registration of the analyze_ui tool in the ListToolsRequestHandler response, specifying name, description, and JSON schema matching the Zod schema.

  {
    name: "analyze_ui",
    description: "Analyze current UI/UX and provide improvement recommendations",
    inputSchema: {
      type: "object",
      properties: {
        framework: { type: "string", description: "Frontend framework" },
        currentIssues: { 
          type: "array", 
          items: { type: "string" },
          description: "List of current UI/UX issues" 
        },
        targetAudience: { type: "string", description: "Target user demographic" },
        designStyle: { type: "string", description: "Desired design style" },
      },
      required: ["framework", "currentIssues"],
    },
  },

• src/index.ts:135-145 (handler)

  Dispatch handler in CallToolRequestHandler that parses input arguments using AnalyzeUISchema and invokes the generateUIAnalysis function to produce the tool response.

  case "analyze_ui": {
    const parsed = AnalyzeUISchema.parse(args);
    return {
      content: [
        {
          type: "text",
          text: generateUIAnalysis(parsed),
        },
      ],
    };
  }