analyze_design

Instructions

Implementation Reference

• src/utils/tool-functions.ts:52-60 (handler)

  The primary handler function for the 'analyze_design' tool, called directly from src/index.ts. Currently implemented as a placeholder that returns basic analysis info.

  export 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:231-267 (registration)

  Registration of the 'analyze_design' tool in the TOOLS array, used by ListToolsRequestSchema handler. Includes name, description, and input schema.

  {
    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 switch statement that invokes the analyzeDesign function for 'analyze_design' tool calls.

  case 'analyze_design':
    return await analyzeDesign(args as unknown as DesignAnalysisOptions);

• src/types.ts:44-54 (schema)

  TypeScript interface defining the input options for the analyzeDesign function, matching the tool's inputSchema.

  export interface DesignAnalysisOptions {
    html: string;
    context?: 'landing-page' | 'dashboard' | 'component' | 'form' | 'navigation' | 'layout' | 'general';
    checkAccessibility?: boolean;
    checkResponsive?: boolean;
    checkPerformance?: boolean;
    checkUsability?: boolean;
    checkBrandConsistency?: boolean;
    framework?: 'react' | 'vue' | 'svelte' | 'html';
    designSystem?: string;
  }

• src/tools/design-analyzer.ts:12-77 (helper)

  Comprehensive helper implementation of analyzeDesign with AI-powered analysis via Gemini and fallback manual checks, not currently used by the main tool handler.

  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'}`);
    }
  }