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
| Name | Required | Description | Default |
|---|---|---|---|
| design_document | Yes | A description or URL to the design document/image | |
| design_type | Yes | Type 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;
- src/types/index.ts:64-103 (schema)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'; }