UX MCP Server
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Capabilities
Features and capabilities supported by this server
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
| prompts | {
"listChanged": true
} |
| resources | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| analyze_accessibilityB | Analyze HTML/JSX code for accessibility issues based on WCAG guidelines. Returns specific violations and suggestions. |
| review_usabilityB | Review a UI description or code against Nielsen's usability heuristics. Provides ratings and specific recommendations. |
| suggest_patternB | Suggest appropriate UI pattern for a given use case. Returns pattern details, best practices, and implementation guidance. |
| generate_component_exampleB | Generate framework-agnostic HTML/CSS example following UX best practices for a specific pattern. |
| audit_design_systemB | Audit design system implementation for consistency with best practices. Checks tokens, naming, and structure. |
| check_contrastA | Check color contrast ratio for WCAG compliance. Supports hex, rgb, and named colors. |
| check_responsiveB | Analyze code for mobile-first principles and responsive design issues. Checks viewport meta, touch targets, and breakpoints. |
| suggest_error_messageA | Get user-friendly error message suggestions for specific scenarios. Returns message, tone guidance, and accessibility considerations. |
| analyze_performanceA | Analyze code for performance issues and Core Web Vitals optimization. Checks resource loading, image optimization, and rendering performance. |
| check_seoA | Analyze HTML for SEO best practices. Checks meta tags, Open Graph, structured data, and technical SEO elements. |
| suggest_animationA | Suggest appropriate animation for a UI interaction. Returns animation type, duration, easing, and implementation guidance. |
| generate_color_paletteA | Generate accessible color palette from a base color. Returns primary, secondary, neutral, and semantic colors with WCAG-compliant variations. |
| generate_typography_scaleA | Calculate modular typography scale with recommended sizes for headings and body text. Returns complete type scale with line heights. |
| suggest_microcopyA | Suggest user-friendly microcopy for UI elements. Returns context-aware suggestions for buttons, labels, messages, and help text. |
| suggest_form_patternB | Recommend optimal form layout and validation pattern. Returns layout recommendations, field types, and validation strategies. |
| analyze_data_vizA | Review data visualization for accessibility and clarity. Checks chart type appropriateness, color usage, labels, and accessibility. |
| generate_accessibility_reportC | Generate comprehensive accessibility audit report. Checks WCAG compliance, keyboard navigation, screen reader compatibility, and semantic HTML. |
| suggest_ab_variantC | Suggest A/B test variants for optimization. Provides hypothesis, variant designs, and metrics to track. |
| analyze_information_architectureA | Analyze and suggest improvements to information architecture. Reviews navigation, labeling, hierarchy, and content organization. |
| detect_dark_patternsA | Detect dark patterns and ethical design violations. Identifies manipulative UI practices and suggests ethical alternatives. |
| calculate_ux_metricsB | Calculate key UX metrics and benchmarks. Computes SUS score, NPS, task success rate, and provides interpretation. |
| generate_wireframeB | Generate ASCII wireframe mockup for a page or component. Creates low-fidelity layout sketch using text characters. |
| suggest_microinteractionB | Suggest microinteractions for UI elements. Provides animation, feedback, and transition recommendations. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
| accessibility_review | Comprehensive accessibility review following WCAG 2.1 AA guidelines |
| usability_audit | Full usability audit using Nielsen's 10 heuristics |
| design_system_setup | Guide for setting up a new design system with tokens and components |
| complete_ux_audit | Comprehensive UX audit combining accessibility, usability, performance, SEO, and responsive design checks |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
| WCAG 2.1 AA Guidelines | Web Content Accessibility Guidelines with code checks and examples |
| Nielsen's 10 Usability Heuristics | Core usability principles with examples and evaluation questions |
| UI Patterns Library | Common interface patterns for navigation, forms, feedback, and data display |
| Design System Principles | Design primitives, atomic design, and component API guidelines |
| Responsive Design Best Practices | Mobile-first principles, breakpoints, responsive patterns, and testing guidelines |
| Dark Mode Implementation Guide | Dark mode best practices, color considerations, and accessibility |
| Error Message Library | User-friendly error messages for common scenarios with tone guidelines |
| Performance Best Practices | Core Web Vitals, performance optimization, and loading strategies |
| SEO Best Practices | Search engine optimization, meta tags, structured data, and technical SEO |
| Internationalization (i18n) Patterns | Guidelines for building multilingual, globally accessible applications |
| Animation & Motion Design | Motion design principles, performance, and accessibility for UI animations |
| React Component Patterns | Advanced React patterns for composition, state management, and performance |
| Form Design Patterns | Comprehensive guide to designing accessible, user-friendly forms |
| Microcopy & UX Writing | Guide to writing clear, user-friendly interface copy and microcopy |
| Typography System | Type scales, font pairing, hierarchy, and responsive typography |
| Color Theory & Palettes | Color theory, palette generation, accessibility, and color usage |
| Mobile-Specific UX Patterns | Mobile-first design, touch interactions, and mobile navigation patterns |
| Vue.js Patterns & Best Practices | Vue.js component patterns, Composition API, and state management |
| Angular Patterns & Best Practices | Angular component patterns, services, RxJS, and performance optimization |
| Data Visualization Patterns | Choosing, designing, and implementing accessible data visualizations |
| E-commerce UX Patterns | E-commerce user experience patterns, conversion optimization, and best practices |
| Information Architecture | Organizing and structuring information for optimal findability and usability |
| UX Testing & Validation | User experience testing methodologies, validation techniques, and research methods |
| Progressive Web App Patterns | Building progressive web apps with optimal UX patterns and best practices |
| Ethical Design & Dark Patterns | Ethical design principles and avoiding dark patterns that manipulate users |
| Advanced Design System Patterns | Advanced concepts for building, scaling, and maintaining enterprise design systems |
| SaaS Product UX Patterns | UX patterns for SaaS products including onboarding, pricing, and retention |
| UX Analytics & Metrics | Measuring user experience through analytics, metrics, and data-driven decision making |
| Voice User Interface (VUI) Design | Designing voice interfaces for assistants, smart speakers, and voice-enabled apps |
| AR/VR Interface Design | Design principles and patterns for Augmented and Virtual Reality interfaces |
| AI/ML UX Patterns | User experience patterns for AI and machine learning powered features |
| Haptic Feedback Design | Design guide for tactile feedback in user interfaces across devices |
| Healthcare UX Patterns | UX design for healthcare applications prioritizing safety, privacy, and usability |
| Financial Services UX Patterns | UX design for banking, fintech, and financial applications |
| Neurodiversity-Inclusive Design | Designing for neurodivergent users including ADHD, autism, and dyslexia |
| Web Components | Building framework-agnostic, reusable UI components with Web Components |
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/elsahafy/ux-mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server