Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@design-critique-mcp Critique this mobile app design for accessibility"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
A Model Context Protocol (MCP) server that provides comprehensive visual design analysis and critique capabilities. This server enables AI assistants to analyze design images for composition, color harmony, typography, and accessibility compliance.
Comprehensive Design Critique: Analyzes overall design quality with actionable recommendations
Color Analysis: Extracts color palettes, analyzes harmony, and checks contrast ratios
Composition Analysis: Evaluates visual balance, grid alignment, and layout structure
Typography Analysis: Assesses font hierarchy, readability, and consistency
Accessibility Compliance: WCAG 2.1 compliance checking with color blindness simulation
Multi-Format Support: Works with web, mobile, print, and general design formats
Real-time Analysis: Fast image processing with optimized algorithms
Related MCP server: AI-Canvas MCP Server
Node.js 18 or later
npm or yarn package manager
Canvas dependencies (automatically installed)
Note: After installation, update the file path to your actual installation directory.
Clone the repository:
git clone https://github.com/haasonsaas/design-critique-mcp.git
cd design-critique-mcpInstall dependencies:
npm installBuild the project:
npm run buildAdd to your Claude Desktop configuration (~/Library/Application Support/Claude/claude_desktop_config.json):
{
"mcpServers": {
"design-critique": {
"command": "node",
"args": ["/path/to/design-critique-mcp/dist/index.js"]
}
}
}Provides comprehensive design critique with visual analysis including composition, color harmony, typography, and accessibility.
Parameters:
image_data (required): Base64 encoded image data
design_type: Type of design - "web", "mobile", "print", or "general" (default: "web")
target_audience: Target audience description (optional)
brand_guidelines: Brand guidelines object (optional)
colors: Array of brand colors in hex format
fonts: Array of brand font names
Returns: Comprehensive analysis including:
Overall score (0-100)
Composition analysis with balance and grid alignment
Color analysis with harmony score and palette
Typography assessment with hierarchy and readability scores
Accessibility report with WCAG compliance
Actionable recommendations
Analyzes color palette and harmony in a design.
Parameters:
image_data (required): Base64 encoded image data
Returns:
Dominant colors with hex codes
Color harmony analysis
Contrast issues
Color relationships (complementary, analogous, etc.)
Analyzes visual composition and layout structure.
Parameters:
image_data (required): Base64 encoded image data
design_type: Type of design - "web", "mobile", "print", or "general" (default: "web")
Returns:
Layout score (0-100)
Balance assessment (symmetrical/asymmetrical)
Grid alignment detection
Visual hierarchy analysis
White space evaluation
Analyzes typography hierarchy, readability, and font usage.
Parameters:
image_data (required): Base64 encoded image data
Returns:
Font count and families detected
Hierarchy score (0-100)
Readability score (0-100)
Typography issues and recommendations
Analyzes design accessibility including contrast, color blindness, and WCAG compliance.
Parameters:
image_data (required): Base64 encoded image data
Returns:
Accessibility score (0-100)
Contrast ratio checks
Color blindness simulation results
WCAG compliance issues
Accessibility recommendations
Checks contrast ratio between two specific colors.
Parameters:
foreground (required): Foreground color in hex format (e.g., "#000000")
background (required): Background color in hex format (e.g., "#ffffff")
Returns:
Contrast ratio
WCAG AA compliance (pass/fail)
WCAG AAA compliance (pass/fail)
Recommended use cases
// In Claude Desktop
const result = await critique_design({
image_data: "base64_encoded_image_data_here",
design_type: "web",
target_audience: "Young professionals aged 25-35"
});const contrast = await check_color_contrast({
foreground: "#333333",
background: "#f0f0f0"
});
// Returns: { ratio: 11.2, passes_aa: true, passes_aaa: true }const analysis = await critique_design({
image_data: "base64_encoded_image_data",
design_type: "mobile",
brand_guidelines: {
colors: ["#FF5722", "#00BCD4", "#FFC107"],
fonts: ["Roboto", "Open Sans"]
}
});Automated design quality assessment
Consistency checking across design systems
Pre-launch design validation
WCAG compliance verification
Color contrast validation
Color blindness impact assessment
Learning design principles through AI feedback
Understanding composition and color theory
Improving typography choices
Checking designs against brand guidelines
Ensuring consistent visual language
Validating color palette usage
# Run in development mode
npm run dev
# Run tests
npm test
# Lint code
npm run lint
# Type check
npm run typecheckThe server uses a modular architecture with specialized analyzers:
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ MCP Client │────▶│ Design Analysis │────▶│ Analyzers │
│ (Claude) │ │ Server │ │ - Color │
│ │◀────│ │ │ - Composition │
└─────────────────┘ └──────────────────┘ │ - Typography │
│ - Accessibility│
└─────────────────┘Supports common image formats (PNG, JPEG, WebP)
Automatic image optimization for faster processing
Maximum image size: 10MB
Recommended resolution: 1920x1080 for web designs
Average analysis time: 2-5 seconds per image
Concurrent request handling
Memory-efficient image processing
Caching for repeated analyses
Ensure the image is properly base64 encoded
Check that the image format is supported
Verify the image size is under 10MB
Run npm install canvas to install native dependencies
On macOS: May need to install Cairo graphics library
On Linux: Install required system dependencies
Large images may take longer to process
Consider resizing images before analysis
Check system resources (CPU/memory)
Fork the repository
Create a feature branch
Make your changes
Add tests for new functionality
Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
Jonathan Haas - GitHub Profile
Built for integration with Anthropic's Claude via MCP
Uses sharp for image processing
Powered by chroma-js for color analysis
Typography detection with Tesseract.js
Accessibility standards from WCAG 2.1
If you encounter any issues or have questions:
Open an issue on GitHub Issues
Review the troubleshooting section above
Check the MCP documentation
Analyze design accessibility including contrast, color blindness, and WCAG compliance
| Name | Required | Description | Default |
|---|---|---|---|
| image_data | Yes | Base64 encoded image data |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden for behavioral disclosure. It states what is analyzed (contrast, color blindness, WCAG compliance) but does not mention what the tool returns (e.g., pass/fail, score, list of issues), how it processes input, or any limitations. For an analysis tool, this leaves significant ambiguity about expected output and side effects.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single focused sentence that front-loads the core purpose and lists key aspects. It is concise without being under-specified; every word adds value. It could arguably be slightly longer to include behavioral details, but that is a completeness concern, not a conciseness issue.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has no output schema and no annotations, the description should explain what the analysis produces. It does not. It also omits any context about when to use this tool versus check_color_contrast or analyze_color_scheme. The one-paragraph description is complete only for stating the broad topic, not for practical invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% coverage for the only parameter 'image_data', already described as 'Base64 encoded image data'. The tool description adds no additional meaning about parameters. Baseline 3 applies because the schema fully documents the parameter, so no deduction is warranted, but there is no added value from the description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb 'Analyze' with a clear resource 'design accessibility' and enumerates distinct aspects (contrast, color blindness, WCAG compliance). This distinguishes it from sibling tools like check_color_contrast, which focuses narrowly on contrast, and critique_design, which is broader design feedback. The purpose is unmistakable.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies the tool is used for accessibility analysis but provides no explicit guidance on when to choose this over alternatives. There are no exclusions or references to sibling tools. It gives enough context to infer usage for accessibility-related queries, but not more.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Analyze color palette and harmony in a design
| Name | Required | Description | Default |
|---|---|---|---|
| image_data | Yes | Base64 encoded image data |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must carry the full burden of behavioral disclosure, but it does not. It only states the action without describing any side effects, output format, limitations, or required permissions. 'Analyze' implies read-only, but the description does not explicitly confirm this or disclose any other behavioral traits, earning a low transparency score.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence that states the verb and target clearly with zero wasted words. It is concise and directly conveys the core purpose.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple with one parameter fully described, but the lack of an output schema and lack of any mention of the return format leaves a gap. The description tells what it analyzes but not what the agent can expect as a result, making it minimally complete but not fully self-sufficient.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema has 100% coverage for the single parameter 'image_data' with its description 'Base64 encoded image data'. The tool description adds no new parameter-level meaning beyond what the schema already provides. Baseline is 3, which is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses the specific verb 'Analyze' with a clear resource ('color palette and harmony') and context ('in a design'). It is distinguishes itself from sibling tools like analyze_layout, analyze_typography, and analyze_accessibility, and from check_color_contrast which focuses on contrast rather than overall palette harmony.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit when-to-use or when-not-to-use guidance is provided. The description does not mention alternatives or any exclusions, leaving the agent to infer usage solely from the name and purpose. This is similar to the 'update_drive' example which scored 2 for lacking usage context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Analyze visual composition and layout structure
| Name | Required | Description | Default |
|---|---|---|---|
| image_data | Yes | Base64 encoded image data | |
| design_type | No | Type of design being analyzed | web |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description should disclose behavioral traits, but it only gives a high-level purpose. It does not mention that the tool is read-only, what input it requires (beyond schema), or what output it returns. This is a significant gap for an analysis tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single six-word phrase with no unnecessary words. It is efficient and front-loaded, though extremely brief.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite complete schema coverage, the description is incomplete for tool selection and invocation. There is no output schema, no behavioral details, and no explanation of what 'analysis' returns. The agent is left without sufficient context to know what to expect.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already covers both parameters with descriptions (100% coverage). The description adds no parameter-specific meaning, so the baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description 'Analyze visual composition and layout structure' clearly states the tool's purpose with a specific verb ('Analyze') and resource ('visual composition and layout structure'). It distinguishes from color, typography, and accessibility siblings, though it may overlap with critique_design.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No usage guidance is provided. The description does not mention when to use this tool over alternatives, nor does it specify any exclusions or prerequisites. Sibling tools exist, but there is no reference to them.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Analyze typography hierarchy, readability, and font usage
| Name | Required | Description | Default |
|---|---|---|---|
| image_data | Yes | Base64 encoded image data |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must fully disclose behavior. It does not mention that the tool requires base64-encoded image data, nor what it returns (e.g., a report or scores). It only names the analysis dimensions, offering no insight into side effects, limitations, or output format.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence with no unnecessary words. It immediately states the verb and the focus areas, making it highly concise and easy to parse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with one parameter and no output schema, the description provides the core purpose but leaves out input requirements and return type. Since there are no annotations to fill this gap, the description is minimally sufficient but not fully complete for an AI agent to know what to expect.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema provides 100% coverage for the single parameter (image_data), describing it as base64-encoded image data. The description does not add further parameter-specific meaning, but since the schema fully documents the parameter, the baseline of 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: analyzing typography hierarchy, readability, and font usage. It uses a specific verb ('analyze') and resource ('typography'), and the focus on typography naturally distinguishes it from sibling tools like analyze_color_scheme and analyze_layout.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
While the description implies usage for typography-related analysis, it does not explicitly state when to use this tool over alternatives, nor does it provide any exclusion criteria or contextual prerequisites. The user must infer from the name and description that it is for evaluating font and text presentation.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Check contrast ratio between two specific colors
| Name | Required | Description | Default |
|---|---|---|---|
| background | Yes | Background color in hex format (e.g., #ffffff) | |
| foreground | Yes | Foreground color in hex format (e.g., #000000) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It reveals only that the tool checks a contrast ratio, but it doesn't state what the output is (e.g., numeric ratio, pass/fail), whether WCAG levels are considered, or any edge cases like invalid color formats. This is minimal behavioral disclosure.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence that is appropriately concise for a simple function. Every word adds value, and it avoids unnecessary elaboration or visual clutter.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple with no output schema, so the description should clarify what the tool returns. It only says 'check contrast ratio', leaving the result format ambiguous. With no alternatives or caveats mentioned, the description is incomplete for an agent expecting to act on results.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema has 100% description coverage for both parameters (foreground and background), so the baseline is 3. The description doesn't add any meaning beyond what the schema already provides; it merely says 'two specific colors', which is implied by the parameters.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: 'Check contrast ratio between two specific colors'. This is a specific verb (check) and resource (contrast ratio), and it distinguishes from siblings like analyze_color_scheme and analyze_accessibility by focusing on the contrast ratio between two explicit colors.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives such as analyze_accessibility or analyze_color_scheme. It doesn't mention any context, prerequisites, or exclusions, leaving the agent without direction for tool selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Provide comprehensive design critique with visual analysis including composition, color harmony, typography, and accessibility
| Name | Required | Description | Default |
|---|---|---|---|
| image_data | Yes | Base64 encoded image data | |
| design_type | No | Type of design being analyzed | web |
| target_audience | No | Target audience for the design (optional) | |
| brand_guidelines | No | Brand guidelines to check against (optional) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must disclose behavior. It lists analysis areas but does not explain how the critique is delivered, what the output format is, or any limitations (e.g., image requirements, processing behavior). For a tool with no output schema, this is a significant gap.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, concise sentence that front-loads the primary purpose ('comprehensive design critique') and lists key analysis dimensions. Every word contributes value, with no redundancy or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 4 parameters including a nested object, and no output schema, the description should clarify what the critique includes structurally (e.g., sections, scores, text output). It only lists topics covered, leaving return format and usage context unexplained. This is inadequate for a tool of this complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so parameters are already documented in the schema. The description adds little beyond naming analysis topics (composition, color, etc.), which loosely relate to parameters like design_type and brand_guidelines. It does not meaningfully enhance parameter understanding beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool provides a comprehensive design critique covering composition, color harmony, typography, and accessibility. This distinguishes it from sibling tools that focus on individual aspects, though the verb 'provide' is generic. It communicates the resource and scope well.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies use when a holistic design evaluation is needed, as opposed to the more focused sibling tools. However, it does not explicitly state when to use this tool versus the others, nor does it mention exclusions or prerequisites. Usage context is only tacit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0analyze_accessibilityanalyze_color_schemeanalyze_layoutanalyze_typographycheck_color_contrastcritique_designScored across 6 tools
critique_design encompasses the focused analyze_* tools, which could cause selection ambiguity, but the descriptions clearly distinguish comprehensive critique from targeted analysis. check_color_contrast is a specific utility that overlaps slightly with analyze_accessibility but serves a distinct quick-check purpose.
All tools follow a clear verb_noun pattern: analyze_* for focused analyses, critique_design for the comprehensive critique, and check_color_contrast for a specific check. The pattern is consistent and predictable.
With 6 tools, the server is well-scoped for its purpose. Each tool covers a distinct aspect of design critique, and the count feels appropriate—not too sparse, not overwhelming.
The tool set covers the full spectrum of design critique: overall design, color, layout, typography, and accessibility. No obvious gaps exist for the stated purpose, and the combination of a comprehensive critique plus focused analyses provides flexibility.
Provides UX capabilities to enhance the design output and understanding of AI systems.
AI-agent design tools: fonts, font recognition, palettes, color naming, contrast, code, SVG, CSS.
Design, save, and run outcome-aligned AI workflows and verifiers, with reliable image output.
Agent-Native design tool - create and edit visual designs with agent assistance
