DEV Community

elsahafy
elsahafy

Posted on

I Built an MCP Server with 28 UX Knowledge Bases and 23 Tools - Here's What I Learned

#mcp #ux #a11y #ai

Ever wished your AI coding assistant knew about WCAG accessibility guidelines, Nielsen's usability heuristics, or the latest e-commerce UX patterns? I did too. So I built an MCP server to solve that problem.

The Problem

AI coding assistants are great at writing code, but they often lack specialized domain knowledge. When I asked for help with:

  • "Make this button accessible" → Generic advice, missing WCAG specifics
  • "What UI pattern should I use for filtering?" → No awareness of established patterns
  • "Check my color contrast" → Had to explain WCAG contrast ratios every time

I needed a way to give AI assistants deep UX expertise.

Enter the Model Context Protocol (MCP)

MCP is Anthropic's open protocol for connecting AI assistants to external data sources and tools. Think of it as giving your AI assistant access to specialized knowledge bases and capabilities.

Instead of the AI relying only on its training data, MCP lets you:

  • Provide real-time resources (knowledge bases, documentation)
  • Add custom tools (analyzers, generators, validators)
  • Create workflow prompts (pre-configured review templates)

What I Built: UX MCP Server

After months of development, I created a comprehensive UX toolkit:

📚 28 Knowledge Resources

Covering the complete UX ecosystem:

Foundation & Core

  • WCAG 2.1 AA accessibility guidelines
  • Nielsen's 10 usability heuristics
  • UI patterns library
  • Design system tokens
  • Responsive design principles
  • Dark mode implementation
  • Error message guidelines

Critical Features

  • Form design patterns & validation
  • UX writing & microcopy
  • Typography systems
  • Color theory & contrast
  • Mobile patterns & touch targets
  • Vue, Angular, React patterns
  • Data visualization

Advanced Topics

  • E-commerce UX (checkout, conversion)
  • Information architecture
  • Usability testing & A/B testing
  • PWA patterns
  • Ethical design & dark patterns
  • SaaS onboarding & pricing
  • Analytics & UX metrics

Emerging Technologies

  • Voice UI design
  • AR/VR interfaces
  • AI/ML UX patterns
  • Haptic feedback
  • Healthcare UX (HIPAA)
  • Finance UX (PCI-DSS)
  • Neurodiversity-inclusive design
  • Web Components

🛠️ 23 Analysis Tools

Real tools that do real work:

// Check color contrast
check_contrast({ foreground: "#333", background: "#fff" })
// → Returns WCAG AA/AAA compliance status

// Generate accessible color palette
generate_color_palette({ base_color: "#3b82f6", harmony: "triadic" })
// → Returns complete palette with contrast ratios

// Analyze accessibility
analyze_accessibility({ code: "<button>Click</button>" })
// → Returns WCAG violations and fixes

// Detect dark patterns
detect_dark_patterns({ page_description: "checkout with pre-checked insurance" })
// → Identifies deceptive UI practices

// Calculate UX metrics
calculate_ux_metrics({ metric_type: "SUS", data: "4,5,3,2,4,3,4,5,3,4" })
// → Returns SUS score with interpretation
Enter fullscreen mode Exit fullscreen mode

💬 4 Workflow Prompts

Pre-configured review workflows:

  1. accessibility_review - Full WCAG audit
  2. usability_audit - Nielsen heuristics evaluation
  3. design_system_setup - Design system creation guide
  4. complete_ux_audit - Comprehensive multi-dimensional review

How It Works

Installation 

npm install -g @elsahafy/ux-mcp-server
Enter fullscreen mode Exit fullscreen mode

Configuration (Claude Desktop Example) 

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "ux-mcp-server"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Usage

Once configured, you can ask your AI assistant:

"Check if #3b82f6 on #ffffff meets WCAG AA"
→ Uses check_contrast tool

"What form pattern should I use for a multi-step checkout?"
→ Uses recommend_form_pattern tool + reads ux://ecommerce/patterns

"Generate an accessibility report for my login page"
→ Uses generate_accessibility_report tool

"How do I design for users with ADHD?"
→ Reads ux://neurodiversity/design resource
Enter fullscreen mode Exit fullscreen mode

Cross-Platform Compatibility

The server works with any MCP-compatible client:

Client Status
Claude Desktop ✅
Claude Code (CLI) ✅
Cursor IDE ✅
Continue.dev ✅
Cline (VS Code) ✅
Zed Editor ✅

Lessons Learned

1. Structure Knowledge for AI Consumption

AI assistants work better with:

  • Hierarchical JSON over flat text
  • Explicit best practices AND anti-patterns
  • Code examples alongside explanations
  • Cross-references between related topics

2. Tools Should Be Focused

Each tool does one thing well:

  • check_contrast - only checks contrast
  • generate_color_palette - only generates palettes
  • analyze_accessibility - only analyzes accessibility

3. Make It Client-Agnostic

MCP is a protocol, not a platform. Design for any client:

  • Use stdio transport (universal)
  • Return structured JSON (easy to parse)
  • Document for multiple environments

4. Comprehensive > Perfect

I started with core accessibility, then expanded:

  • v1.0: 7 resources, 8 tools
  • v2.0: 12 resources, 11 tools
  • v4.0: 28 resources, 23 tools

Ship early, iterate based on real usage.

What's Next

  • More specialized knowledge: Automotive UX, Gaming UX, Accessibility testing frameworks
  • Interactive tools: Live accessibility scanners, real-time contrast checkers
  • Integration guides: Framework-specific implementation examples

Try It Out 

npm install -g @elsahafy/ux-mcp-server
Enter fullscreen mode Exit fullscreen mode

Support

If this helps you build better user experiences, consider supporting development:

What UX knowledge would you like to see added? Let me know in the comments!

Top comments (0)