Cómo usar UI UX Pro Max en Codex y Claude Code.
UI UX Pro Max es una de las skills de diseño con más estrellas en GitHub. En lugar de un estilo fijo, busca en una base de datos de estilos, paletas y parejas de fuentes para recomendar un sistema de diseño para tu producto. Este tutorial muestra cómo instalarla en Codex y Claude Code, generar y guardar un sistema de diseño y obtener resultados que no parezcan genéricos.
Actualizado el 6 de noviembre de 2026 · 7 min de lectura
Qué es UI UX Pro Max
UI UX Pro Max es una skill de código abierto (licencia MIT) de nextlevelbuilder. La versión 2.15 incluye una base de datos consultable con 80 estilos, 192 tipos de producto, 192 paletas de colores, 74 parejas de fuentes y pautas para 22 stacks, entre ellos React, Next.js, Tailwind, SwiftUI, Jetpack Compose, React Native y Flutter.
Cuando le pides trabajo de UI a tu agente, la skill describe tu producto a su script de búsqueda, que devuelve un sistema de diseño recomendado: un patrón de página, un estilo, colores, fuentes, efectos, antipatrones que evitar en tu sector y una lista de comprobación para pasar antes de publicar. Después el agente construye con él. El script usa solo la biblioteca estándar de Python y no hace llamadas de red.
Instálala
Necesitas Python 3. Compruébalo con python3 --version.
En Codex (y en la mayoría de los demás agentes), instala la CLI una vez y después añade la skill a tu proyecto:
npm install -g ui-ux-pro-max-cli
cd my-project
uipro init --ai codex
En Claude Code, usa el marketplace de plugins:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
O usa la CLI con uipro init --ai claude. Añade --global para instalarla en todos los proyectos. Más adelante, uipro update actualiza los archivos de la skill y uipro uninstall los elimina.
Úsala pidiéndoselo
La skill se activa sola cuando pides trabajo de UI, así que no necesitas ningún comando especial en Codex ni en Claude Code. Sé concreto con el producto, el público y la plataforma:
Crea la pantalla de inicio de una app móvil para [una panadería de barrio que acepta pedidos anticipados]. Sus clientes son [padres ocupados que encargan para el fin de semana]. Usa la skill ui-ux-pro-max para elegir primero el sistema de diseño, enséñamelo y solo después construye la pantalla.
Pedir que te enseñe el sistema de diseño antes que la pantalla es el hábito más útil con esta skill: así puedes rechazar un estilo antes de que esté incrustado en todas las páginas.
Genera un sistema de diseño directamente
También puedes ejecutar tú mismo el script de búsqueda. La carpeta de la skill depende del agente: en Claude Code es .claude/skills/ui-ux-pro-max/, y Codex la instala en .agents/skills/ui-ux-pro-max/.
# Recommend a design system for a product, named "Crumb"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -p "Crumb"
# The same, as Markdown
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -f markdown
# Search one area only: styles, typography, charts, UX rules, icons
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
# Guidelines for a specific stack
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
El propio ejemplo del README ajusta además tres controles, --density, --motion y --variance, para decidir lo denso, lo animado y lo inusual que debe ser el resultado.
Guarda el sistema de diseño para todas las sesiones
Añade --persist para escribir el resultado en design-system/<name>/MASTER.md, y --page para añadir una excepción para una sola página:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
A partir de entonces, pídele al agente que lea MASTER.md antes de diseñar cualquier pantalla. Si usas también otras herramientas, pídele que copie los colores, las fuentes y el espaciado en un DESIGN.md en la raíz de tu proyecto y que lo enlace desde AGENTS.md, para que todos los agentes sigan el mismo sistema.
Cambia el tema de una app existente
La skill también sirve para darle un aspecto nuevo a una app existente sin reescribirla. Indica el estilo al que quieres llegar y pídele al agente que trabaje con tus tokens actuales:
Usa la skill ui-ux-pro-max para darle a esta app un aspecto [suizo y minimalista]. Primero enumera el framework, la librería de estilos y los tokens de tema que ya usa. Mantén la estructura y el comportamiento de cada componente. Actualiza los tokens existentes de color, tipografía, espaciado, radio y sombra en lugar de añadir un segundo tema, sustituye los estilos fijos componente a componente y comprueba el contraste, los estados de foco y el modo oscuro después de cada tanda.
Consigue resultados que no parezcan genéricos
- Di qué evitar. La base de datos trata como estilos normales algunos aspectos que otras skills señalan como hechos con IA, como el glassmorphism y la Aurora UI. Añade una línea como “sin glassmorphism, sin degradados, sin iconos de emoji”.
- Mira el resultado. La skill no tiene comprobación visual. Abre la página en anchos de móvil y de escritorio, o compara varias propuestas lado a lado, antes de construir más pantallas.
- Describe el producto, no el estilo. Los resultados dependen de las palabras con las que buscas. “App de pedidos anticipados de una panadería para padres” encuentra mejores coincidencias que “app moderna y limpia”.
- Parte de un sistema terminado, si lo prefieres. Nuestra biblioteca de sistemas de diseño tiene sistemas completos para web y apps que puedes darle al agente como un DESIGN.md.
Para ver cómo se compara con Taste Skill, Impeccable y frontend-design de Anthropic, consulta Taste Skill vs Impeccable vs UI UX Pro Max.
Preguntas frecuentes
¿UI UX Pro Max es gratis?
Sí. La skill del repositorio de GitHub es gratuita y de código abierto con licencia MIT. Su README también describe una versión Premium con herramientas extra de marca, logotipo y presentaciones, sin precio publicado.
¿UI UX Pro Max funciona con Codex?
Sí. Instala la CLI con npm install -g ui-ux-pro-max-cli y ejecuta uipro init --ai codex en tu proyecto.
¿Por qué la skill necesita Python?
La búsqueda del sistema de diseño se ejecuta como un pequeño script de Python sobre los archivos de datos de la skill. Usa solo la biblioteca estándar, así que no tienes que instalar ningún paquete.