What is UX MCP Server?
UX MCP Server is a local MCP server with 28 knowledge resources, 23 tools and 4 workflow prompts. An agent can check code for WCAG violations, test color contrast, review usability against Nielsen's heuristics, suggest UI patterns, generate palettes and wireframes, and run a full UX audit.
UX MCP Server pairs a library of UX reference material with tools that act on your code. Resources use ux:// addresses, such as ux://accessibility/wcag and ux://usability/nielsen-heuristics, and tools take code or values and return findings.
It is organized as 28 resources in four groups, from foundation topics like forms and color through e-commerce, SaaS and PWA, to emerging areas like voice, AR and VR, haptics and neurodiversity.
What the agent can do with it
- Run
analyze_accessibilityon a snippet, orcheck_contraston two hex colors against WCAG ratios. - Use
review_usabilityanddetect_dark_patternsto evaluate a flow against Nielsen's heuristics and deceptive UI practice. - Generate a palette, a type scale, microcopy, a wireframe or an accessible component example.
- Check performance and SEO, or calculate SUS, NPS and CSAT metrics from survey data.
The four prompts
Pre configured workflows cover accessibility_review, usability_audit, design_system_setup and complete_ux_audit. The last one spans accessibility, usability, performance, responsive design, typography, color, forms and SEO in a single pass.
Who it is for
Best for
- Developers who want accessibility checks inside the agent loop. Related: fixing-accessibility and web-accessibility-skill.
- Teams tuning speed and metadata. Related: core-web-vitals and web-seo-skill.
- Product teams testing pricing or landing pages. Related: page-cro.
Not for
- Live site crawling. The tools analyze code and values you pass in.
- Compliance sign off. The checks guide a review and do not replace a formal audit.
Use it with UiChemy
Run the accessibility, SEO and microcopy checks against the pages you build. For WordPress, UiChemy's Composer edits them in Elementor or Gutenberg, and AI to WordPress imports an AI build. Click Get Started on uichemy.com.
Connect UX MCP Server: 23 UX Analysis Tools and 28 Knowledge Resources to your AI client
claude mcp add ux -- npx -y @elsahafy/ux-mcp-serverChoose an install
Run
npx @elsahafy/ux-mcp-serverwith no install, ornpm install -g @elsahafy/ux-mcp-serverfor a globalux-mcp-servercommand.Register the server
Use the command above for Claude Code, or paste the JSON into
~/.claude/settings.json. Cursor, Continue.dev, Cline and Zed each have a block in the README.Restart the client
Claude Desktop needs a restart after you edit its configuration.
Try a prompt
Ask whether a hex color pair meets WCAG AA, and the agent should call
check_contrast.
Client configuration
{
"mcpServers": {
"ux": {
"command": "npx",
"args": ["-y", "@elsahafy/ux-mcp-server"]
}
}
}Endpoints and ports
ux://accessibility/wcagWCAG 2.1 AA guidelines with code checksux://usability/nielsen-heuristicsNielsen's 10 usability heuristicsux://forms/patternsForm design, validation and accessibilityWhat you can do with it
- 28 knowledge resourcesTopics run from WCAG and forms to e-commerce, SaaS, PWA, voice, AR and VR and neurodiversity.
- 23 analysis toolsTools cover accessibility, usability, performance, SEO, color, type, forms, charts, metrics and wireframes.
- 4 review promptsReady made workflows run accessibility, usability, design system and complete UX audits.
- Framework patternsResources cover React, Vue 3 and Angular, including signals and standalone components.
- Ethical design checksA dedicated resource and the dark pattern detector address privacy, GDPR and CCPA, and deceptive practice.
- Many clientsSetup is documented for Cursor, Continue.dev, Cline and Zed, plus desktop and terminal clients.
Tools it exposes
analyze_accessibility
Checks code for WCAG violations.
review_usability
Evaluates against Nielsen's heuristics.
suggest_pattern
Finds appropriate UI patterns for a use case.
generate_component_example
Creates accessible HTML and CSS examples.
audit_design_system
Reviews design token structure.
check_contrast
Verifies WCAG color contrast ratios.
check_responsive
Analyzes mobile first and responsive design.
suggest_error_message
Suggests user friendly error messages.
analyze_performance
Checks code for performance issues and Core Web Vitals.
check_seo
Analyzes HTML for SEO best practices.
suggest_animation
Recommends animations for UI interactions.
generate_color_palette
Creates accessible palettes from a base color.
generate_typography_scale
Generates type scales with modular ratios.
suggest_microcopy
Gives UX writing recommendations for UI elements.
recommend_form_pattern
Finds form layouts and validation patterns.
suggest_data_visualization
Chooses charts for data types.
generate_accessibility_report
Produces a full WCAG audit report.
suggest_ab_variant
Generates A/B test variant suggestions.
analyze_information_architecture
Evaluates navigation and IA structure.
detect_dark_patterns
Identifies deceptive UI practices.
calculate_ux_metrics
Calculates SUS, NPS, CSAT and task success rates.
generate_wireframe
Creates ASCII wireframes for pages and components.
suggest_microinteraction
Recommends microinteractions with timing and easing.
Frequently asked questions
What is UX MCP Server?
UX MCP Server is a Model Context Protocol server that provides 28 UX knowledge resources, 23 analysis tools and 4 workflow prompts. It covers WCAG accessibility, Nielsen's heuristics, UI patterns, design systems, performance, SEO, forms, e-commerce, PWA and more.
How do I install UX MCP Server?
Run npx @elsahafy/ux-mcp-server, or add it globally with npm install -g @elsahafy/ux-mcp-server. A client entry uses npx with the arguments -y and @elsahafy/ux-mcp-server. A from source build with npm run build is also described.
Which clients does it support?
The README lists Claude Desktop, Claude Code, Cursor, Continue.dev, Cline in VS Code, Zed and custom MCP clients, with a configuration block for each. Any client that speaks the Model Context Protocol over stdio can launch it.
What can check_contrast do?
It verifies WCAG color contrast ratios for a foreground and background pair, such as #333333 on #ffffff. The knowledge base also lists the 4.5:1, 3:1 and 7:1 thresholds, and a palette tool builds accessible palettes from a base color.
Does it replace a formal accessibility audit?
No. It checks code and values you pass in against WCAG 2.1 AA guidance and produces reports, which speeds up review. A formal audit with assistive technology testing is a separate job, and the tools do not crawl live sites.
What is the complete_ux_audit prompt?
It is one of four pre configured workflows. It runs a multi dimensional review of accessibility, usability, performance, responsive design, typography, color, forms and SEO. The others are accessibility_review, usability_audit and design_system_setup.
What does it say about SEO and performance?
Two tools handle them: check_seo analyzes HTML for meta tags, Open Graph and structured data, and analyze_performance checks code for Core Web Vitals and loading issues. Matching resources hold the underlying practices, including robots.txt, sitemaps and canonical tags.