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

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