UX Laws MCP
Analyzes Android application interfaces for compliance with UX laws and Material Design guidelines.
Evaluates Angular web components and templates against fundamental UX principles and patterns.
Provides analysis based on Apple Human Interface Guidelines for iOS and macOS applications.
Analyzes CSS and HTML code to identify usability issues and UX law violations in web interfaces.
Analyzes voice interaction patterns for Google Assistant skills built with Dialogflow.
Evaluates desktop applications built on the Electron framework for adherence to UX laws.
Audits Flutter application code and provides platform-specific UX checklists for mobile widgets.
Analyzes voice interactions for Google Assistant based on cognitive UX principles and conversational guidelines.
Provides comprehensive UX audits for iOS applications using SwiftUI and UIKit frameworks.
Analyzes Android UI code written in Jetpack Compose to ensure compliance with modern UX laws and patterns.
Audits macOS desktop applications against platform-specific UX patterns and Apple's design guidelines.
Integrates Material Design principles into the analysis of Android and web interface code.
Analyzes React and React Native codebases to evaluate interface usability and compliance with UX laws.
Analyzes Swift-based UI code for SwiftUI and UIKit to identify improvements based on UX laws.
Evaluates iOS interfaces built with the UIKit framework for adherence to professional UX standards.
Provides UX analysis for game interfaces developed in Unity, focusing on resolution scaling and interactivity.
Analyzes game user interfaces built with Unreal Engine against core UX principles.
Evaluates Vue.js templates and components for adherence to UX laws and web usability patterns.
Analyzes Android layout XML files to detect usability issues and alignment with UX principles.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@UX Laws MCPAnalyze this React login form using Hick's Law"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
🎯 UX Laws MCP v2.0
MCP Server para análisis de interfaces basado en las 30 Leyes de UX con soporte multi-plataforma (20 plataformas).
📋 Características
✅ 30 Leyes de UX extraídas de lawsofux.com
✅ 20 Plataformas con patrones específicos
✅ Detección automática de plataforma basada en código
✅ 37 Herramientas (30 para leyes + 7 utilidades)
✅ Checklists específicos por plataforma y componente
✅ Comparación entre plataformas
Related MCP server: a11y-mcp-server
🚀 Instalación
npm install
npm run build⚙️ Configuración en Claude Desktop
Añade a tu claude_desktop_config.json:
{
"mcpServers": {
"ux-laws": {
"command": "node",
"args": ["C:/ruta/a/UX-UI-MCP/dist/index.js"]
}
}
}🖥️ Plataformas Soportadas (20)
El MCP detecta automáticamente la plataforma basándose en el código, o puedes especificarla manualmente.
🌐 Web (4)
ID | Plataforma | Detección |
| HTML/CSS |
|
| React |
|
| Vue.js |
|
| Angular |
|
📱 Mobile (6)
ID | Plataforma | Detección |
| SwiftUI |
|
| UIKit |
|
| Jetpack Compose |
|
| Android XML |
|
| Flutter |
|
| React Native |
|
💻 Desktop (4)
ID | Plataforma | Detección |
| Electron |
|
| WPF |
|
| macOS/AppKit |
|
| Qt/QML |
|
🎙️ Voice (2)
ID | Plataforma | Detección |
| Alexa Skills |
|
| Google Assistant |
|
⌨️ CLI (1)
ID | Plataforma | Detección |
| Command Line |
|
🎮 Games (2)
ID | Plataforma | Detección |
| Unity |
|
| Unreal Engine |
|
🥽 XR (1)
ID | Plataforma | Detección |
| AR/VR |
|
🛠️ Herramientas Disponibles (37)
📊 Herramientas por Ley (30)
Cada ley tiene su propia herramienta de análisis con patrones específicos por plataforma:
analyze_fitts_law - Ley de Fitts (tamaños/distancias)
analyze_hicks_law - Ley de Hick (complejidad de decisión)
analyze_jakobs_law - Ley de Jakob (familiaridad)
analyze_millers_law - Ley de Miller (7±2 elementos)
analyze_postels_law - Ley de Postel (tolerancia)
analyze_peak_end_rule - Regla del Peak-End
analyze_aesthetic_usability - Efecto Estética-Usabilidad
analyze_doherty_threshold - Umbral de Doherty (<400ms)
analyze_teslers_law - Ley de Tesler (complejidad irreducible)
analyze_pareto_principle - Principio de Pareto (80/20)
analyze_proximity_law - Ley de Proximidad
analyze_common_region_law - Ley de Región Común
analyze_pragnanz_law - Ley de Prägnanz
analyze_similarity_law - Ley de Semejanza
analyze_uniform_connectedness - Conexión Uniforme
analyze_closure_law - Ley de Cierre
analyze_common_fate_law - Ley del Destino Común
analyze_continuity_law - Ley de Continuidad
analyze_figure_ground - Figura y Fondo
analyze_serial_position - Efecto de Posición en Serie
analyze_von_restorff_effect - Efecto Von Restorff
analyze_zeigarnik_effect - Efecto Zeigarnik
analyze_chunking - Fragmentación (Chunking)
analyze_cognitive_load - Carga Cognitiva
analyze_selective_attention - Atención Selectiva
analyze_goal_gradient - Efecto de Gradiente de Meta
analyze_occams_razor - Navaja de Occam
analyze_parkinsons_law - Ley de Parkinson
analyze_progressive_disclosure - Revelación Progresiva
analyze_feedback_principle - Principio de FeedbackParámetros de las herramientas de análisis:
Parámetro | Tipo | Descripción |
| string | Código fuente a analizar |
| string | Descripción del componente |
| enum | Plataforma (o "auto" para detectar) |
| string | Contexto adicional |
🔧 Herramientas de Utilidad (7)
ux_full_audit
Auditoría completa contra las 30 leyes.
{
"code": "<código>",
"component_description": "Formulario de checkout",
"platform": "web-react",
"focus_areas": ["heuristics", "gestalt"]
}ux_get_law_info
Información detallada de una ley específica.
{
"law_id": "fitts_law",
"platform": "ios-swiftui"
}ux_list_laws
Lista todas las leyes, opcionalmente filtradas por categoría.
{
"category": "gestalt"
}ux_checklist
Genera checklist para un tipo de componente.
{
"component_type": "form",
"platform": "flutter"
}ux_list_platforms
Lista todas las plataformas soportadas.
{
"category": "mobile"
}ux_detect_platform
Detecta la plataforma basándose en el código.
{
"code": "@Composable fun MyScreen() { ... }",
"file_extension": ".kt"
}ux_compare_platforms
Compara cómo aplicar una ley en diferentes plataformas.
{
"law_id": "fitts_law",
"platforms": ["web-react", "ios-swiftui", "android-compose", "flutter"]
}📚 Categorías de Leyes
Categoría | Leyes | Descripción |
| 10 | Principios heurísticos fundamentales |
| 9 | Principios de percepción visual |
| 6 | Principios de psicología cognitiva |
| 5 | Principios de diseño de UX |
💡 Ejemplos de Uso
Analizar un botón en SwiftUI
Herramienta: analyze_fitts_law
{
"code": "Button(action: {}) { Text(\"Submit\") }.frame(width: 200, height: 44)",
"platform": "ios-swiftui"
}Auditoría completa de un formulario Flutter
Herramienta: ux_full_audit
{
"code": "...(código del formulario)...",
"platform": "flutter",
"focus_areas": ["heuristics", "cognitive"]
}Comparar Ley de Fitts entre plataformas
Herramienta: ux_compare_platforms
{
"law_id": "fitts_law",
"platforms": ["web-react", "ios-swiftui", "android-compose", "game-unity"]
}Generar checklist de navegación para CLI
Herramienta: ux_checklist
{
"component_type": "navigation",
"platform": "cli"
}🎯 Cómo el MCP Diferencia Plataformas
1. Detección Automática
Cuando usas platform: "auto", el MCP analiza el código buscando patrones específicos:
SwiftUI → @State, VStack, .frame
Compose → @Composable, Modifier., remember
Flutter → Widget, build(), StatelessWidget
React → useState, className, <Component />
CLI → argv, commander, inquirer
Voice → IntentHandler, conv.ask
Games → MonoBehaviour, AActor2. Patrones Específicos por Plataforma
Cada ley tiene patrones de código adaptados:
Ley de Fitts - Tamaños mínimos:
iOS:
44pt(Human Interface Guidelines)Android:
48dp(Material Design)Web:
44px(WCAG)Games: Escalar con resolución
Ley de Jakob - Patrones familiares:
iOS: TabBar inferior, Navigation Stack
Android: BottomNavigation, Drawer
Web: Hamburger menu, breadcrumbs
CLI: Subcomandos tipo git
3. Guidelines de Plataforma
El MCP incluye referencias a las guías oficiales:
📘 Apple Human Interface Guidelines
📗 Material Design Guidelines
📙 Windows Design Guidelines
📕 Web Content Accessibility Guidelines
📂 Estructura del Proyecto
UX-UI-MCP/
├── src/
│ ├── index.ts # Servidor MCP principal
│ └── knowledge/
│ ├── ux-laws.ts # 30 leyes de UX
│ ├── platforms.ts # 20 definiciones de plataforma
│ └── platform-patterns.ts # Patrones específicos por plataforma
├── dist/ # Código compilado
├── package.json
├── tsconfig.json
└── README.md🔄 Changelog
v2.0.0
✨ Soporte para 20 plataformas
✨ Detección automática de plataforma
✨ Patrones de código específicos por plataforma
✨ 3 nuevas herramientas:
ux_list_platforms,ux_detect_platform,ux_compare_platforms✨ Checklists específicos por plataforma
📚 Guidelines de plataforma en análisis
v1.0.0
🎉 Release inicial
📚 30 leyes de UX
🛠️ 34 herramientas
📄 Licencia
MIT
🙏 Créditos
Leyes de UX: lawsofux.com por Jon Yablonski
Basado en el protocolo MCP de Anthropic
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- Flicense-qualityDmaintenanceAn MCP server that provides a copywriter agent to automatically enforce predefined copywriting rules for UI text generation. It enables users to process text through a modular rules system to ensure consistency in elements like button labels and error messages.
- Alicense-qualityCmaintenanceAn MCP server for accessibility auditing that provides WCAG 2.2 criteria lookup, HTML remediation guidance, and automated documentation generation for UI components. It enables users to analyze code snippets for issues and generate professional accessibility audit reports.274MIT
- Alicense-quality-maintenanceAn automated MCP server for Google Stitch that enables AI-driven UI design generation, screen management, and design system extraction. It provides 19 professional tools for creating consistent web interfaces, conducting accessibility audits, and exporting design tokens.
- AlicenseBqualityBmaintenanceAn MCP server that provides comprehensive UX best practices covering accessibility, usability, UI patterns, design systems, performance, and more, enabling clients to analyze and generate UX-optimized code and recommendations.237424MIT
Related MCP Connectors
Conformance checker for MCP servers. Free, no key, verdicts recomputable and re-measured daily.
MCP server providing access to the Scorecard API to evaluate and optimize LLM systems.
A paid remote MCP for hosted MCP server, built to return verdicts, receipts, usage logs, and audit-r
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
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/Agencia-Tecnologica-Multiverse-Limitada/UX-UI-MCP'
If you have feedback or need assistance with the MCP directory API, please join our Discord server