README.md
🎯 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
🚀 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 |
|---|---|---|
web-html |
HTML/CSS | <html>, ``, class= |
web-react |
React | useState, <Component />, className= |
web-vue |
Vue.js | <template>, v-if, v-for |
web-angular |
Angular | *ngIf, [(ngModel)], @Component |
📱 Mobile (6)
| ID | Plataforma | Detección |
|---|---|---|
ios-swiftui |
SwiftUI | @State, VStack, .modifier |
ios-uikit |
UIKit | UIView, UIButton, @IBOutlet |
android-compose |
Jetpack Compose | @Composable, Modifier., remember |
android-xml |
Android XML | android:, app:layout_ |
flutter |
Flutter | Widget, StatelessWidget, BuildContext |
react-native |
React Native | <View>, StyleSheet.create, react-native |
💻 Desktop (4)
| ID | Plataforma | Detección |
|---|---|---|
desktop-electron |
Electron | electron, ipcRenderer, BrowserWindow |
desktop-wpf |
WPF | <Window, x:Name, <Grid> |
desktop-macos |
macOS/AppKit | NSView, NSWindow, @IBAction |
desktop-qt |
Qt/QML | QWidget, QML, Q_OBJECT |
🎙️ Voice (2)
| ID | Plataforma | Detección |
|---|---|---|
voice-alexa |
Alexa Skills | IntentHandler, Alexa, canHandle |
voice-google |
Google Assistant | DialogflowApp, conv.ask, actions-on-google |
⌨️ CLI (1)
| ID | Plataforma | Detección |
|---|---|---|
cli |
Command Line | argv, commander, inquirer, chalk |
🎮 Games (2)
| ID | Plataforma | Detección |
|---|---|---|
game-unity |
Unity | MonoBehaviour, GameObject, [SerializeField] |
game-unreal |
Unreal Engine | UCLASS, AActor, UUserWidget |
🥽 XR (1)
| ID | Plataforma | Detección |
|---|---|---|
ar-vr |
AR/VR | XRController, ARSession, OVRInput |
🛠️ 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 Feedback
Parámetros de las herramientas de análisis:
| Parámetro | Tipo | Descripción |
|---|---|---|
code |
string | Código fuente a analizar |
component_description |
string | Descripción del componente |
platform |
enum | Plataforma (o "auto" para detectar) |
context |
string | Contexto adicional |
🔧 Herramientas de Utilidad (7)
`ux_full_au
Tools 5
analyze_fitts_lawAnalyzes interface based on Fitts's Law regarding sizes and distances.analyze_hicks_lawAnalyzes interface based on Hick's Law regarding decision complexity.analyze_jakobs_lawAnalyzes interface based on Jakob's Law regarding user familiarity.analyze_millers_lawAnalyzes interface based on Miller's Law regarding 7±2 elements.analyze_postels_lawAnalyzes interface based on Postel's Law regarding tolerance.Try it
→Analyze this React component code using Fitts's Law to see if the buttons are easy to click.
→Check my login form against Jakob's Law to ensure it follows standard design patterns.
→Does this navigation menu violate Miller's Law? Please analyze it.
→Perform a full UX audit on this mobile UI code snippet.
→Evaluate the cognitive load of this dashboard interface using the analyze_cognitive_load tool.