design-critique

The Design Critique MCP Server provides automated analysis of visual designs. It exposes tools that can perform a comprehensive critique across composition, color, typography, and accessibility, as well as specific utilities for color contrast checks. To use it, connect via an MCP client and invoke the available tools such as critique_design for an overall design critique, analyze_color_scheme for color palette and harmony, analyze_layout for composition and grid analysis, analyze_typography for typography rankings, analyze_accessibility for WCAG-related checks, and check_color_contrast for targeted foreground/background comparisons. Provide the image data as base64-encoded strings in the image_data parameter and, where applicable, supply additional context like design_type (web, mobile, print, or general) and brand_guidelines for tailored feedback. The server returns structured results with scores, visual analyses, and actionable recommendations to improve design quality and accessibility.

Prerequisites:

• Node.js 18 or later
• npm or yarn
• Canvas dependencies (automatically installed during setup)

Manual installation:

1. Clone the repository:

git clone https://github.com/haasonsaas/design-critique-mcp.git
cd design-critique-mcp

2. Install dependencies:

npm install

3. Build the project:

npm run build

4. Run in development mode (for testing locally):

npm run dev

5. (Optional) Run tests, lint, and type checks:

npm test
npm run lint
npm run typecheck

Note: After installation, ensure you update the server path in the mcp_config to point to your built index.js (e.g., dist/index.js).

Tips and common issues:

• Ensure your environment has a compatible Node.js version (18+).
• The server processes images up to 10 MB; consider resizing large images before analysis to speed up responses.
• If you encounter 'Canvas not found', run npm install canvas and, on macOS, install Cairo if required.
• For Claude/Desktop integration, configure the mcpServers entry with the path to your built server, as shown in the Configuration section of the README.
• Use the check_color_contrast tool for precise accessibility validation between specific color pairs.
• The tools are designed to work across web, mobile, and print contexts; specify design_type where supported to get more tailored results.