lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

skill intermedio claude-codecodexcursoropencodedisenoaccesibilidad

UI UX Pro Max: criterio de diseño para tu agente de programación

Define colores, tipografía y patrones de interfaz antes de pedirle código a tu agente. Usa una base de reglas consultable para diseñar una pantalla o revisar una aplicación existente.

✓ verificado el 26 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: elige el arnés y comprueba Python

Consulta el README oficial. Estos pasos usan Claude Code y su marketplace; el README también documenta la CLI para otros agentes. Ejecuta en tu terminal:

python3 --version

El buscador requiere Python 3. Si falta, prepara ese requisito antes de continuar.

Paso 2: instala la skill en Claude Code

Introduce estos comandos en la sesión de Claude Code, no en la terminal del sistema:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Para Codex, Cursor u otro arnés, sigue la sección de instalación por CLI del README y selecciona tu plataforma. No mezcles los archivos de distintas instalaciones.

Paso 3: pide una tarea concreta

En Claude Code, pide en español que use la skill para diseñar una página e indica el producto, el público y el stack. Por ejemplo: «Usa ui-ux-pro-max para revisar el formulario de alta de mi aplicación Svelte. Conserva sus componentes y sus tokens; propón mejoras de legibilidad, foco y distribución en móvil».

Primero revisa las recomendaciones. Después pide que aplique un cambio acotado y conserve el comportamiento existente.

Comprobación

Comprueba que el agente encuentra la skill y explica qué reglas ha usado. Revisa la interfaz en el navegador: texto sin cortes, foco visible, navegación con teclado y distribución en móvil y escritorio. Que la instalación termine no demuestra que el diseño resultante sea correcto.

Si algo falla

Si el marketplace falla, consulta la alternativa por CLI del README. Si el buscador no se ejecuta, comprueba Python y las rutas de la instalación seleccionada. El repositorio completo no es el ZIP para subir a Claude.ai: el README señala que supera su límite de archivos y recomienda los métodos de instalación anteriores.

ver en .md ¿Prefieres el recurso entero?

Qué es

UI UX Pro Max es una skill que ayuda a un agente de programación a tomar decisiones de diseño de interfaces. Combina catálogos de estilos, paletas y tipografías con reglas de experiencia de usuario y recomendaciones por stack. Esta guía cubre la edición abierta del repositorio enlazado.

Para qué te sirve

  • Cuando una página sale con colores y tipografías sin relación, puedes generar primero una propuesta de sistema de diseño y pedir al agente que la aplique.
  • Cuando ya tienes una aplicación, puedes revisar sus estilos y sustituir valores aislados por los tokens que usa el proyecto.
  • Cuando un formulario o un panel falla en pantallas pequeñas, puedes buscar recomendaciones concretas de diseño, gráficos y accesibilidad antes de modificar componentes.

Cómo funciona

Un buscador local en Python consulta los datos del proyecto mediante BM25. A partir del tipo de producto y del stack, devuelve reglas, patrones y combinaciones visuales para orientar al agente. El instalador genera los archivos necesarios para el arnés que elijas, incluidos Claude Code, Codex, Cursor y OpenCode.

La propuesta puede guardarse en un archivo maestro y en ajustes por página. El agente consulta esas reglas al implementar: el buscador por sí solo no reescribe la aplicación. Para renovar una interfaz existente, el README propone inspeccionar primero sus versiones, componentes y tokens, y migrar por partes.

Antes de empezar

Necesitas un agente compatible y Python 3 para el buscador, que usa la biblioteca estándar y no hace llamadas de red. La ruta de instalación por CLI usa npm y requiere su entorno de Node.js; también existe una instalación desde el marketplace de Claude Code.

La edición del repositorio tiene licencia MIT. El autor distingue una edición premium con funciones adicionales; esta guía no depende de ella. El uso de tu agente puede tener el coste habitual de su proveedor. GitHub registra el último commit consultado el 26 de octubre de 2026 y el repositorio no está archivado.

Límites y alternativas

Las reglas orientan decisiones; no demuestran que una página cumpla los requisitos de accesibilidad ni que convierta mejor. Revisa el contraste, el foco del teclado, el ajuste del texto y los tamaños de pantalla en la aplicación resultante. Si ya tienes un sistema de diseño, úsalo como referencia para adaptar las recomendaciones y conservar coherencia.

Los archivos de la skill pasan a formar parte del contexto de tu agente. Revisa qué instala en el proyecto y evita mantener varias copias que den instrucciones contradictorias. Para una interfaz sencilla, trabajar directamente con tu biblioteca de componentes y sus reglas puede bastar.

Recursos