/ Directorio / Playground / UI/UX Pro Max Skill
← Todos los servidores ↗ GitHub
● Comunidad nextlevelbuilder ⚡ Instantáneo

UI/UX Pro Max Skill

por nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill

Deja de dejar que Claude genere UIs feas. Este skill le enseña diseño real — escalas tipográficas, ritmo de espaciado, sistemas de color, accesibilidad — para web, móvil y escritorio.

UI/UX Pro Max es un skill de conocimiento de diseño exhaustivo que inyecta inteligencia de diseño en cualquier agente que lo cargue. Cubre tipografía, teoría del color, espaciado/grids, movimiento, accesibilidad (WCAG 2.2) y patrones específicos de plataforma (Apple HIG, Material 3, Fluent). Se combina mejor con ecosistemas shadcn/Tailwind pero no está acoplado a ellos.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

listo

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

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
  1. 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
  2. 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
  3. 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
  1. 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
  2. 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
  1. Auditar
    Audita /components/Form.tsx contra WCAG 2.2 AA. Encuentra problemas con contraste, etiquetas, orden de focus.✓ Copiado
    → Lista de problemas con severidad
  2. 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

HerramientaEntradasCuándo llamarCoste
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

AlternativaCuándo usarlaContrapartida
open-design-skillQuieres plantillas de sistema de diseño de calidad de marcaMenos fundamentos, más pieles preconfiguradas
Tokens de diseño curados a manoEl diseñador ya está en el bucleMás esfuerzo

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills