What is Design Critique MCP?
Design Critique MCP is a Node server with 6 tools that analyse a design image. You pass base64 image data, and it returns 0 to 100 scores for layout, hierarchy, readability and accessibility, plus color harmony analysis and recommendations. A separate tool checks the contrast ratio of two hex colors.
This server gives an AI agent eyes for finished visuals. Every image tool takes image_data, a base64 string, and answers with numbers and recommendations rather than prose.
It does not read code or Figma files. The input is a picture, which makes it useful for screenshots, exported frames and print layouts alike.
The four lenses
| Tool | Looks at | Returns |
|---|---|---|
| analyze_layout | Composition | Layout score, balance, grid alignment, hierarchy, white space |
| analyze_color_scheme | Palette | Dominant colors with hex codes, harmony, contrast issues |
| analyze_typography | Type | Font count, hierarchy and readability scores |
| analyze_accessibility | WCAG | Accessibility score, contrast checks, color blindness simulation |
The fifth tool, critique_design, runs all four lenses and returns an overall score from 0 to 100. It accepts a design type of web, mobile, print or general, plus an optional audience and brand colors and fonts.
Limits to plan around
- Images must be PNG, JPEG or WebP, with a 10MB ceiling. The recommended resolution for web designs is 1920 by 1080.
- The README quotes an average of 2 to 5 seconds per image.
- Native canvas dependencies must build. On macOS you may need the Cairo library, and on Linux some system packages.
- Scores come from image analysis, so they suit a first pass before human review.
Who it suits
Best for
- Pre-launch checks of a design image against brand colors and fonts.
- Quick contrast checks between two hex values without opening a design tool.
- Teams that also use a design critique skill and want measurable scores.
Not for
- Auditing live CSS or components. This server reads images, not code. See also a color skill.
- Teams wanting hosted install. The README only documents a local build.
Use it with UiChemy
Design Critique MCP judges an image, so it fits a review step before conversion. Check the Figma export here, fix the palette, then bring the design into WordPress through UiChemy. Click Get Started on uichemy.com when it is ready.
Connect Design Critique MCP: Score a Screenshot for Color, Layout and Type to your AI client
git clone https://github.com/haasonsaas/design-critique-mcp.git && cd design-critique-mcp && npm install && npm run buildCheck prerequisites
You need Node.js 18 or later, npm or yarn, and the canvas dependencies, which the README says install automatically.
Clone and build
Clone the repository, run npm install, then npm run build. That produces dist/index.js.
Register the server
For Claude Desktop, add the snippet above to ~/Library/Application Support/Claude/claude_desktop_config.json and replace the path with your real install location.
Or use the Cursor install button
The README links a one-click Cursor install. After using it, edit the file path to point at your actual install directory.
Test with a contrast check
Call check_color_contrast with foreground #333333 and background #f0f0f0. The README example expects a ratio of 11.2 and a pass for AA and AAA.
Client configuration
{
"mcpServers": {
"design-critique": {
"command": "node",
"args": ["/path/to/design-critique-mcp/dist/index.js"]
}
}
}Endpoints and ports
dist/index.jsBuilt output that your MCP client launches with nodeWhat you can do with it
- Whole-design scoringOne call returns an overall score from 0 to 100 alongside separate composition, color, typography and accessibility sections.
- Brand guideline inputPass brand colors as hex values and brand fonts by name, and the critique can check a design against them.
- Four design typesChoose web, mobile, print or general, with web as the default, so scoring matches the format.
- Color blindness simulationThe accessibility tool simulates color vision differences and lists WCAG 2.1 compliance issues.
- Standalone contrast checkercheck_color_contrast needs no image. Give it two hex colors and get the ratio and AA and AAA results.
- Palette and harmony analysisDominant colors come with hex codes, and relationships such as complementary and analogous are identified.
- Local processingImage analysis runs in your own Node process using sharp, chroma-js and Tesseract.js, with caching for repeated analyses.
Tools it exposes
critique_design
Runs a full design critique on a base64 image and returns an overall score from 0 to 100 with composition, color, typography and accessibility analysis and recommendations.
analyze_color_scheme
Extracts dominant colors with hex codes, rates harmony, flags contrast issues and names color relationships such as complementary or analogous.
analyze_layout
Scores layout from 0 to 100 and reports balance, grid alignment, visual hierarchy and white space.
analyze_typography
Reports font count and families detected, hierarchy and readability scores, and typography issues with recommendations.
analyze_accessibility
Returns an accessibility score with contrast ratio checks, color blindness simulation results and WCAG compliance issues.
check_color_contrast
Takes a foreground and a background hex color and returns the contrast ratio with WCAG AA and AAA pass or fail and recommended uses.
Frequently asked questions
What is Design Critique MCP?
Design Critique MCP is a Model Context Protocol server that analyses design images. It exposes 6 tools covering overall critique, color, layout, typography, accessibility and a two-color contrast check, and it returns 0 to 100 scores plus actionable recommendations.
How do I install Design Critique MCP?
Clone the repository, run npm install and npm run build, then point your MCP client at dist/index.js with node. The README gives a Claude Desktop config snippet and a one-click Cursor install that needs its file path edited afterward.
What input does it need?
Image tools need image_data as a base64 string. PNG, JPEG and WebP are supported up to 10MB. The contrast tool is different and needs only two hex colors, so it works without any image at all.
Does it work with Claude and Cursor?
The README says it was built for integration with Anthropic's Claude via MCP and shows a Claude Desktop configuration. It also links a one-click Cursor install. Other MCP clients can launch the same built file with node.
Can it check WCAG compliance?
Yes. The accessibility tool reports contrast ratio checks, color blindness simulation and WCAG compliance issues, and the acknowledgments cite WCAG 2.1. The contrast tool reports AA and AAA pass or fail for any two colors.
Why does the install fail with Canvas not found?
The README advises running npm install canvas to get the native dependencies. On macOS you may also need the Cairo graphics library, and on Linux you need the required system packages before the build will pass.
How fast is it?
The README quotes an average analysis time of 2 to 5 seconds per image, with caching for repeated analyses. Large images take longer, so it suggests resizing before analysis. The recommended web resolution is 1920 by 1080.
What are the alternatives?
For other approaches to design review, see an accessibility review skill or an owl design critique skill. This server works from an image and returns numbers and recommendations, so it suits checks on a finished visual.