analyze_design
Evaluate HTML and CSS designs for accessibility, responsiveness, and performance using AI. Enhance designs by identifying improvements and ensuring best practices are followed.
Instructions
Analyze design with AI for improvements and best practices
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| checkAccessibility | No | Check accessibility compliance | |
| checkPerformance | No | Check performance implications | |
| checkResponsive | No | Check responsive design | |
| context | No | Design context or purpose | |
| css | No | Additional CSS code (optional) | |
| html | Yes | HTML code to analyze |
Implementation Reference
- src/index.ts:230-267 (registration)Registration of the analyze_design tool in the TOOLS array used by ListToolsRequestHandler}, { name: 'analyze_design', description: 'Analyze design with AI for improvements and best practices', inputSchema: { type: 'object', properties: { html: { type: 'string', description: 'HTML code to analyze' }, css: { type: 'string', description: 'Additional CSS code (optional)' }, context: { type: 'string', description: 'Design context or purpose' }, checkAccessibility: { type: 'boolean', default: true, description: 'Check accessibility compliance' }, checkResponsive: { type: 'boolean', default: true, description: 'Check responsive design' }, checkPerformance: { type: 'boolean', default: true, description: 'Check performance implications' } }, required: ['html'] } },
- src/index.ts:441-442 (handler)Dispatch handler in the CallToolRequestSchema that invokes the analyzeDesign function for the analyze_design toolcase 'analyze_design': return await analyzeDesign(args as unknown as DesignAnalysisOptions);
- src/utils/tool-functions.ts:52-60 (handler)The core handler function implementation for the analyze_design MCP toolexport async function analyzeDesign(args: DesignAnalysisOptions) { return { content: [ { type: 'text', text: `Analyzed design for ${args.context || 'general'} context\nHTML length: ${args.html.length} characters` } ] };
- src/index.ts:233-266 (schema)Detailed input schema validation for analyze_design tool parametersdescription: 'Analyze design with AI for improvements and best practices', inputSchema: { type: 'object', properties: { html: { type: 'string', description: 'HTML code to analyze' }, css: { type: 'string', description: 'Additional CSS code (optional)' }, context: { type: 'string', description: 'Design context or purpose' }, checkAccessibility: { type: 'boolean', default: true, description: 'Check accessibility compliance' }, checkResponsive: { type: 'boolean', default: true, description: 'Check responsive design' }, checkPerformance: { type: 'boolean', default: true, description: 'Check performance implications' } }, required: ['html'] }
- src/tools/design-analyzer.ts:12-77 (helper)Comprehensive helper function for design analysis with AI (Gemini) integration and manual fallback analysis, matching the tool's input schema.export async function analyzeDesign(args: AnalyzeRequest) { try { const { html, css = '', context = '', checkAccessibility = true, checkResponsive = true, checkPerformance = true } = args; if (isGeminiAvailable()) { const prompt = `Analyze this HTML/CSS code for design quality, best practices, and improvements: HTML: ${html} ${css ? `CSS:\n${css}` : ''} ${context ? `Context: ${context}` : ''} Please provide a comprehensive analysis covering: ${checkAccessibility ? '1. **Accessibility**: Check for ARIA labels, semantic HTML, color contrast, keyboard navigation, screen reader compatibility' : ''} ${checkResponsive ? '2. **Responsive Design**: Evaluate mobile-first approach, breakpoints, flexible layouts' : ''} ${checkPerformance ? '3. **Performance**: Analyze CSS efficiency, bundle size implications, render performance' : ''} 4. **Design Quality**: Visual hierarchy, spacing consistency, typography, color usage 5. **Code Quality**: Tailwind best practices, maintainability, reusability 6. **UX Considerations**: Usability, interaction patterns, user flow For each area, provide: - Current state assessment (Good/Needs Improvement/Poor) - Specific issues found - Actionable recommendations - Code examples for improvements Format as structured markdown with clear sections.`; const analysis = await callGemini(prompt); return { content: [ { type: 'text', text: `# Design Analysis Report\n\n${analysis}` } ] }; } else { // Fallback manual analysis const manualAnalysis = performManualAnalysis(html, css, checkAccessibility, checkResponsive, checkPerformance); return { content: [ { type: 'text', text: manualAnalysis } ] }; } } catch (error) { console.error('Design analysis error:', error); throw new Error(`Failed to analyze design: ${error instanceof Error ? error.message : 'Unknown error'}`); } }