Skip to main content
Glama
Agencia-Tecnologica-Multiverse-Limitada

UX Laws MCP

by Agencia-Tecnologica-Multiverse-Limitada
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Remote

🎯 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

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

Resources

New MCP Servers

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/Agencia-Tecnologica-Multiverse-Limitada/UX-UI-MCP'

If you have feedback or need assistance with the MCP directory API, please join our Discord server