Ux MCP Server logo

Ux MCP Server

UX guidance MCP server with 28 knowledge resources, 23 analysis tools, and four review workflows.

Install Ux MCP Server

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "ux-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@elsahafy/ux-mcp-server"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Automated check passed— started and listed 23 tools correctly (5d ago).

Overview

ux-mcp-server MCP server gives MCP-compatible clients access to UX guidance, analysis tools, and predefined review workflows. It exposes 28 knowledge resources covering accessibility, usability, design systems, performance, SEO, frameworks, testing, and specialized UX topics. The server also provides 23 operations for reviewing code and designs, generating examples, checking contrast, creating wireframes, and calculating UX metrics. Reach for it when an agent needs structured UX recommendations or repeatable accessibility, usability, or broader UX audits.

Use cases

  • Review interface code for WCAG issues
  • Audit a product against Nielsen heuristics
  • Generate accessible component examples
  • Create a complete UX audit workflow
  • Calculate SUS, NPS, or CSAT metrics

Key features

  • 28 UX knowledge resources
  • 23 UX analysis and generation tools
  • Four predefined review prompts
  • WCAG accessibility and contrast checks
  • Wireframe, palette, and typography generation
  • Support for npm, npx, and source installation

Tools23

What Ux MCP Server lets your agent do. Expand a tool for its parameters.

Verified live~2.9k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 2d ago

Recent health check succeeded.

4/4 checks healthy over the last 42d

What it can do

From the 23 tools this server returned when we ran it.

Handles credentials · 1Read-only tools · 23
Network at startup3 connections
Files written at startupNone
Install scriptsprepare
npm provenanceNot published
Package age268 days
Maintainers1

Observed 2026-10-19 in an isolated sandbox. A description of reach, not a security audit.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 16h ago via OSV.dev · @elsahafy/ux-mcp-server (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars35Stargazers on the source repository.
npm downloads364Package downloads in the last 30 days.
Last commit6mo agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed23Callable tools this server registers over MCP.
Directory activity1 viewsConfig copies, upvotes, and views on AllMCPs.

How Ux MCP Server works

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:

Terminal
npm install -g @elsahafy/ux-mcp-server

For a temporary run without a global installation, use:

Terminal
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.

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Ux MCP Server

ux-mcp-server is an MCP server that connects MCP-compatible clients to UX knowledge resources, analysis tools, and workflow prompts. It covers accessibility, usability, design systems, performance, SEO, and related UX topics, with tools for WCAG checks, heuristic reviews, contrast analysis, component examples, wireframes, UX metrics, and complete audit workflows.

Install it globally with `npm install -g @elsahafy/ux-mcp-server`, or run it without installation using `npx @elsahafy/ux-mcp-server`. You can also clone the repository, install dependencies, and build it from source with `npm install` followed by `npm run build`.

Yes, ux-mcp-server works with Cursor IDE. Add it to Cursor's MCP configuration at `~/.cursor/mcp.json` using the `ux-mcp-server` command, or add it through Cursor Settings, MCP Servers, and Add Server.

The README names Claude Desktop, Claude Code, Cursor IDE, Continue.dev, Cline, Zed Editor, and custom MCP clients as supported. It describes the server as compatible with any client that supports the Model Context Protocol.

Related MCP servers

Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewUx MCP Server AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/ux-mcp-server?style=directory)](https://allmcps.com/mcp/ux-mcp-server)
HTML Embed
<a href="https://allmcps.com/mcp/ux-mcp-server"><img src="https://allmcps.com/api/badge/ux-mcp-server?style=directory" alt="Ux MCP Server on AllMCPs" /></a>