MCP Servers

UX Laws MCP

An MCP server for auditing and analyzing user interfaces across 20 platforms based on 30 fundamental UX laws. It provides automated code detection, platform-specific checklists, and comparative analysis to optimize design usability.

README

🎯 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

Recommended Servers

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official

Featured

TypeScript

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official

Featured

Local

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official

Featured

Python

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official

Featured

TypeScript

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official

Featured

Neon Database

MCP server for interacting with Neon Management API and databases

Official

Featured

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official

Featured

E2B

Using MCP to run code via e2b.

Official

Featured