analyze_ui
Evaluate existing UI/UX design, identify issues, and suggest targeted improvements based on frontend framework, user demographics, and desired design style.
Instructions
Analyze current UI/UX and provide improvement recommendations
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| currentIssues | Yes | List of current UI/UX issues | |
| designStyle | No | Desired design style | |
| framework | Yes | Frontend framework | |
| targetAudience | No | Target user demographic |
Implementation Reference
- src/index.ts:201-241 (handler)The generateUIAnalysis function that implements the core logic of the 'analyze_ui' tool, producing a formatted UI/UX analysis report with recommendations based on input parameters.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 validation and types for the 'analyze_ui' tool.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)Tool registration entry for 'analyze_ui' in the ListToolsRequestHandler response, specifying name, description, and JSON input 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 (helper)Dispatcher logic in CallToolRequestHandler that handles 'analyze_ui' calls by parsing arguments and invoking the generateUIAnalysis handler.case "analyze_ui": { const parsed = AnalyzeUISchema.parse(args); return { content: [ { type: "text", text: generateUIAnalysis(parsed), }, ], }; }