analyze_ui
Analyze UI/UX interfaces to identify issues and provide improvement recommendations based on framework compatibility, target audience needs, and design requirements.
Instructions
Analyze current UI/UX and provide improvement recommendations
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| framework | Yes | Frontend framework | |
| currentIssues | Yes | List of current UI/UX issues | |
| targetAudience | No | Target user demographic | |
| designStyle | No | Desired design style |
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), }, ], }; }