🎯 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>, <div>, 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_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
heuristics	10	Principios heurísticos fundamentales
gestalt	9	Principios de percepción visual
cognitive	6	Principios de psicología cognitiva
principles	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, AActor

2. 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