Skip to main content
Glama

design_critique

Analyze design documents, UI/UX mockups, or architectural diagrams to identify usability issues, accessibility concerns, aesthetic inconsistencies, and potential design flaws.

Instructions

Offers a critique of a design document, UI/UX mockup, or architectural diagram, focusing on usability, aesthetics, consistency, accessibility, and potential design flaws.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
design_documentYesA description or URL to the design document/image
design_typeYesType of design (e.g., 'web UI', 'system architecture', 'mobile app')

Implementation Reference

  • The primary handler function for the 'design_critique' tool. It validates input arguments, sanitizes them, constructs a specialized prompt based on design type, calls the Deepseek API, and returns the critique response.
    export async function handler(args: unknown): Promise<ToolResponse> {
      // Check rate limit first
      if (!checkRateLimit()) {
        return {
          content: [
            {
              type: 'text',
              text: 'Rate limit exceeded. Please try again later.',
            },
          ],
          isError: true,
        };
      }
    
      // Validate arguments
      if (!args || typeof args !== 'object') {
        return {
          content: [
            {
              type: 'text',
              text: 'Invalid arguments provided.',
            },
          ],
          isError: true,
        };
      }
    
      try {
        // Type guard for DesignCritiqueArgs
        if (!('design_document' in args) || !('design_type' in args) ||
            typeof args.design_document !== 'string' || typeof args.design_type !== 'string') {
          return {
            content: [
              {
                type: 'text',
                text: 'Both design_document and design_type are required and must be strings.',
              },
            ],
            isError: true,
          };
        }
    
        const typedArgs = args as DesignCritiqueArgs;
    
        // Sanitize inputs
        const sanitizedDocument = sanitizeInput(typedArgs.design_document);
        const sanitizedType = sanitizeInput(typedArgs.design_type.toLowerCase());
    
        // Get type-specific prompts
        const typePrompts = DESIGN_TYPE_PROMPTS[sanitizedType] || DESIGN_TYPE_PROMPTS.default;
    
        // Create the complete prompt
        const prompt = createPrompt(
          {
            ...BASE_PROMPT_TEMPLATE,
            template: BASE_PROMPT_TEMPLATE.template.replace(
              '{type_specific_prompts}',
              typePrompts
            ),
          },
          {
            design_type: sanitizedType,
            design_document: sanitizedDocument,
          }
        );
    
        // Make the API call
        const response = await makeDeepseekAPICall(prompt, SYSTEM_PROMPT);
    
        if (response.isError) {
          return {
            content: [
              {
                type: 'text',
                text: `Error generating design critique: ${response.errorMessage || 'Unknown error'}`,
              },
            ],
            isError: true,
          };
        }
    
        // Return the formatted response
        return {
          content: [
            {
              type: 'text',
              text: response.text,
            },
          ],
        };
      } catch (error) {
        console.error('Design critique tool error:', error);
        return {
          content: [
            {
              type: 'text',
              text: `Error processing design critique: ${error instanceof Error ? error.message : 'Unknown error'}`,
            },
          ],
          isError: true,
        };
      }
    }
  • Tool definition including the input schema for validating arguments: design_document (string) and design_type (string). This schema is used for tool registration.
    export const definition: ToolDefinition = {
      name: 'design_critique',
      description: 'Offers a critique of a design document, UI/UX mockup, or architectural diagram, focusing on usability, aesthetics, consistency, accessibility, and potential design flaws.',
      inputSchema: {
        type: 'object',
        properties: {
          design_document: {
            type: 'string',
            description: 'A description or URL to the design document/image',
          },
          design_type: {
            type: 'string',
            description: "Type of design (e.g., 'web UI', 'system architecture', 'mobile app')",
          },
        },
        required: ['design_document', 'design_type'],
      },
    };
  • src/server.ts:56-64 (registration)
    Registration of the design_critique tool in the MCP server's listTools handler by including designCritique.definition in the tools array.
    this.server.setRequestHandler(ListToolsRequestSchema, async () => ({
      tools: [
        secondOpinion.definition,
        codeReview.definition,
        designCritique.definition,
        writingFeedback.definition,
        brainstormEnhancements.definition,
      ],
    }));
  • src/server.ts:103-111 (registration)
    Handler dispatch for 'design_critique' tool in the callTool request: validates args with isDesignCritiqueArgs and invokes designCritique.handler.
    case "design_critique": {
      if (!isDesignCritiqueArgs(args)) {
        throw new McpError(
          ErrorCode.InvalidParams,
          "Invalid parameters for design critique"
        );
      }
      response = await designCritique.handler(args);
      break;
  • TypeScript interface and type guard for DesignCritiqueArgs used for input validation in server.ts.
    export interface DesignCritiqueArgs {
      design_document: string;
      design_type: string;
    }
    
    export interface WritingFeedbackArgs {
      text: string;
      writing_type: string;
    }
    
    export interface BrainstormEnhancementsArgs {
      concept: string;
    }
    
    // Type guard for tool arguments
    export function isValidToolArgs(args: Record<string, unknown> | undefined, required: string[]): boolean {
      if (!args) return false;
      return required.every(key => key in args && args[key] !== undefined);
    }
    
    // Type guards for specific tool arguments
    export function isCodeReviewArgs(args: unknown): args is CodeReviewArgs {
      if (!args || typeof args !== 'object') return false;
      const a = args as Record<string, unknown>;
      
      // Must have either file_path or code_snippet
      const hasFilePath = 'file_path' in a && (typeof a.file_path === 'string' || a.file_path === undefined);
      const hasCodeSnippet = 'code_snippet' in a && (typeof a.code_snippet === 'string' || a.code_snippet === undefined);
      const hasLanguage = 'language' in a && typeof a.language === 'string';
      
      return hasLanguage && (hasFilePath || hasCodeSnippet);
    }
    
    export function isDesignCritiqueArgs(args: unknown): args is DesignCritiqueArgs {
      if (!args || typeof args !== 'object') return false;
      const a = args as Record<string, unknown>;
      
      return 'design_document' in a && 'design_type' in a &&
             typeof a.design_document === 'string' && typeof a.design_type === 'string';
    }

Tool Definition Quality

Score is being calculated. Check back soon.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/cyanheads/mentor-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server