# ux-mcp-server [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/elsahafy/ux-mcp-server  
**GitHub Stars:** 35  
**npm Downloads (last month):** 364  
**Views:** 1  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/ux-mcp-server

## Description
UX toolkit: 28 knowledge resources, 23 analysis tools & 4 workflow prompts for any MCP client

## Tools
Capabilities this server exposes over MCP:

- **analyze_accessibility** — Analyze HTML/JSX code for accessibility issues based on WCAG guidelines. Returns specific violations and suggestions.
- **review_usability** — Review a UI description or code against Nielsen's usability heuristics. Provides ratings and specific recommendations.
- **suggest_pattern** — Suggest appropriate UI pattern for a given use case. Returns pattern details, best practices, and implementation guidance.
- **generate_component_example** — Generate framework-agnostic HTML/CSS example following UX best practices for a specific pattern.
- **audit_design_system** — Audit design system implementation for consistency with best practices. Checks tokens, naming, and structure.
- **check_contrast** — Check color contrast ratio for WCAG compliance. Supports hex, rgb, and named colors.
- **check_responsive** — Analyze code for mobile-first principles and responsive design issues. Checks viewport meta, touch targets, and breakpoints.
- **suggest_error_message** — Get user-friendly error message suggestions for specific scenarios. Returns message, tone guidance, and accessibility considerations.
- **analyze_performance** — Analyze code for performance issues and Core Web Vitals optimization. Checks resource loading, image optimization, and rendering performance.
- **check_seo** — Analyze HTML for SEO best practices. Checks meta tags, Open Graph, structured data, and technical SEO elements.
- **suggest_animation** — Suggest appropriate animation for a UI interaction. Returns animation type, duration, easing, and implementation guidance.
- **generate_color_palette** — Generate accessible color palette from a base color. Returns primary, secondary, neutral, and semantic colors with WCAG-compliant variations.
- **generate_typography_scale** — Calculate modular typography scale with recommended sizes for headings and body text. Returns complete type scale with line heights.
- **suggest_microcopy** — Suggest user-friendly microcopy for UI elements. Returns context-aware suggestions for buttons, labels, messages, and help text.
- **suggest_form_pattern** — Recommend optimal form layout and validation pattern. Returns layout recommendations, field types, and validation strategies.
- **analyze_data_viz** — Review data visualization for accessibility and clarity. Checks chart type appropriateness, color usage, labels, and accessibility.
- **generate_accessibility_report** — Generate comprehensive accessibility audit report. Checks WCAG compliance, keyboard navigation, screen reader compatibility, and semantic HTML.
- **suggest_ab_variant** — Suggest A/B test variants for optimization. Provides hypothesis, variant designs, and metrics to track.
- **analyze_information_architecture** — Analyze and suggest improvements to information architecture. Reviews navigation, labeling, hierarchy, and content organization.
- **detect_dark_patterns** — Detect dark patterns and ethical design violations. Identifies manipulative UI practices and suggests ethical alternatives.
- **calculate_ux_metrics** — Calculate key UX metrics and benchmarks. Computes SUS score, NPS, task success rate, and provides interpretation.
- **generate_wireframe** — Generate ASCII wireframe mockup for a page or component. Creates low-fidelity layout sketch using text characters.
- **suggest_microinteraction** — Suggest microinteractions for UI elements. Provides animation, feedback, and transition recommendations.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "ux-mcp-server": {
    "command": "npx",
    "args": ["-y","@elsahafy/ux-mcp-server"]
  }
}
```

## Documentation

## What ux-mcp-server does

ux-mcp-server MCP server packages UX reference material and interactive analysis operations for use from an MCP client. Its knowledge resources cover areas such as WCAG 2.1 AA, Nielsen heuristics, UI patterns, responsive design, dark mode, error messages, Core Web Vitals, SEO, internationalization, forms, microcopy, typography, color, mobile interfaces, and framework patterns for React, Vue, and Angular.

The resource set also addresses e-commerce, information architecture, usability testing, progressive web apps, ethical design, SaaS, analytics, voice interfaces, AR/VR, AI and machine learning UX, haptics, healthcare, finance, neurodiversity, and web components. Resources use URI-style identifiers such as `ux://accessibility/wcag` and `ux://performance/optimization`.

## Tools and capabilities

The server exposes 23 tools grouped around UX analysis, design content, testing, validation, and UI generation. Analysis operations can inspect code for accessibility, usability, performance, SEO, responsive behavior, and design-system concerns. Other tools check color contrast, recommend UI patterns, propose error messages and animations, and generate accessible HTML/CSS examples.

Design-oriented operations generate color palettes and typography scales, suggest microcopy, recommend form patterns, and select visualizations for data. Testing and validation tools can produce accessibility reports, suggest A/B test variants, assess information architecture, detect dark patterns, and calculate measures including SUS, NPS, CSAT, and task-success rates. UI generation includes ASCII wireframes and microinteraction recommendations.

Four predefined prompts provide structured workflows for an accessibility review, usability audit, design-system setup, and complete UX audit. The complete audit workflow is described as covering accessibility, usability, performance, responsive design, typography, color, forms, and SEO.

## How it works

An MCP-compatible client starts the server and makes its resources, tools, and prompts available to an agent. The package can be installed globally with npm, run directly with `npx`, or built from a cloned source repository. The server is therefore suited to agent-assisted design review rather than a standalone visual design application.

The ux-mcp-server MCP server can be configured by giving a client the installed `ux-mcp-server` command. Source-based setups can instead invoke the built `dist/index.js` file with Node. Tool inputs and returned guidance depend on the operation selected by the client.

## Setup and configuration

Install the published package with:

```bash
npm install -g @elsahafy/ux-mcp-server
```

For a temporary run without a global installation, use:

```bash
npx @elsahafy/ux-mcp-server
```

A source installation requires cloning the repository, running `npm install`, and executing `npm run build`. Claude Desktop and Cursor examples in the project configuration use the `ux-mcp-server` command. Claude Code can add the server with `claude mcp add ux -- npx -y @elsahafy/ux-mcp-server`.

## Limitations and notes

Its capabilities are centered on supplied UX knowledge, generated recommendations, code-oriented checks, and workflow prompts. Results should be treated as review guidance; the material does not state that the tools replace human usability research or compliance review.

_Full upstream README: https://allmcps.com/mcp/ux-mcp-server/readme_