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