UX Laws MCP

🎯 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)

📱 Mobile (6)

💻 Desktop (4)

🎙️ Voice (2)

⌨️ CLI (1)

🎮 Games (2)

🥽 XR (1)

🛠️ 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 (",
  "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

💡 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, 
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