UI/UX Pro Max Skill — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

Escalas tipográficas con ritmo vertical
Sistemas de color con tokens semánticos, modo oscuro, accesibilidad
Escala de espaciado + patrones de grid
Guías de movimiento (duraciones, easings, cuándo animar)
Patrones de plataforma: web, iOS HIG, Material 3, macOS
Checklist de accesibilidad (valores por defecto WCAG 2.2 AA)

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "ui-ux-pro-max-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "ui-ux-pro-max-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
          "~/.claude/skills/ui-ux-pro-max"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add ui-ux-pro-max-skill -- git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill ~/.claude/skills/ui-ux-pro-max

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: UI/UX Pro Max Skill

Corregir el aspecto 'UI generada por IA' en una app existente

👤 Devs cuya UI construida por Claude parece genérica ⏱ ~60 min intermediate

Cuándo usarlo: Tu output de shadcn funciona pero se ve de serie.

Flujo

Diagnosticar

Usa UI/UX Pro Max. Audita el sistema de diseño en /src/ui — tipo, espaciado, tokens de color. Puntúa cada uno.✓ Copiado

→ Scorecard por eje con problemas concretos
Establecer tokens

Recomienda una escala tipográfica de 4 pasos + escala de espaciado de 4 pasos alineada a grid de 4px.✓ Copiado

→ Tabla de tokens
Aplicar

Actualiza tokens.css y vuelve a ejecutar. Haz diff del cambio en el aspecto renderizado.✓ Copiado

→ Tipografía más ajustada, ritmo consistente

Resultado: UI que no grita 'la hice en 5 minutos'.

Errores comunes

Sobre-tokenización — cada valor se convierte en una variable — Variables para tokens repetidos; los literales están bien para elementos únicos

Diseñar una pantalla móvil que siga iOS HIG

👤 Devs construyendo apps multiplataforma ⏱ ~45 min intermediate

Cuándo usarlo: Tienes una superficie iOS y quieres que se sienta nativa, no multiplataforma-mezclado.

Flujo

Especificar

Diseña una pantalla de configuración para iOS — celdas agrupadas, navegación, modo claro/oscuro, indicaciones de accesibilidad. Referencia el HIG.✓ Copiado

→ Especificación con referencias al HIG
Implementar

Traduce a SwiftUI. Usa fuentes del sistema, colores semánticos, dynamic type.✓ Copiado

→ Código SwiftUI que parece nativo del sistema

Resultado: Pantalla que supera la prueba visual de 'parece nativa'.

Errores comunes

Los colores codificados en duro rompen el modo oscuro — Usa colores semánticos del sistema; el skill lo impone

Ejecutar una auditoría de accesibilidad en un componente

👤 Devs preparando el cumplimiento de a11y ⏱ ~30 min intermediate

Cuándo usarlo: Necesitas WCAG 2.2 AA en un flujo crítico.

Flujo

Auditar

Audita /components/Form.tsx contra WCAG 2.2 AA. Encuentra problemas con contraste, etiquetas, orden de focus.✓ Copiado

→ Lista de problemas con severidad
Corregir

Aplica las correcciones. Verifica con el esquema semántico del lector de pantalla.✓ Copiado

→ La lista de problemas se reduce; el esquema semántico se lee limpiamente

Resultado: Componente que pasa la auditoría + pruebas con usuarios reales.

Errores comunes

Las correcciones automáticas rompen el layout visual — Vuelve a renderizar tras cada corrección; comprobación de regresión visual

Combinar con: filesystem

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

ui-ux-pro-max-skill + open-design-skill

Sistema de diseño + sistemas de referencia de calidad de marca

Usa UI/UX Pro Max para los fundamentos + open-design para los estilos de marca.✓ Copiado

ui-ux-pro-max-skill + filesystem

Aplicar cambios de tokens en toda la codebase

Actualiza tokens.css y propaga; ejecuta la auditoría.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
design_audit	scope: directory or component	Evaluación inicial	tokens
tokens_recommend	constraints (brand, platform)	Configurar un sistema de diseño	tokens
a11y_check	component path	Pasada de cumplimiento	tokens

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: N/A
Tokens por llamada: Pesado en la primera auditoría; más ligero en los seguimientos
Monetario: Gratis
Consejo: Audita por componente, no toda la app de una vez

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: Read project files

Almacenamiento de credenciales: Ninguno

Salida de datos: Ninguno

Resolución de problemas

Errores comunes y soluciones

Las recomendaciones chocan con las directrices de marca

Proporciona las restricciones de marca de antemano; el skill las respeta

El skill se activa demasiado agresivamente

Limita por directorio o invoca explícitamente

Alternativas

UI/UX Pro Max Skill vs otros

Alternativa	Cuándo usarla	Contrapartida
open-design-skill	Quieres plantillas de sistema de diseño de calidad de marca	Menos fundamentos, más pieles preconfiguradas
Tokens de diseño curados a mano	El diseñador ya está en el bucle	Más esfuerzo

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills