Probada en una tarea realComunidad, verificadaDiseño y front end

UI/UX Pro Max

Una página de reservas, formulario o pantalla de app revisada contra reglas claras de teléfono y accesibilidad antes de publicarla.

Mira lo que creó

Instala UI/UX Pro Max gratis

Deja tu email y los pasos de instalación se abren aquí mismo: un prompt para pegar en tu herramienta de IA. Sirve para las 149 skills.

Nuestra nota: 5/10
Funciona en: Claude Code, Codex+6 más
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf y más de 60 herramientas de IA que leen skills.
¿Hace falta programar?: No
Tiempo hasta el resultado: 15 min
Creado por: Next Level Builder
Probada: 19 oct 2026

Sin la skill — Las dos primeras pantallas son casi iguales, con el mismo titular y la misma foto del taller; con la skill los talleres van bajo una barra de progreso de 4 pasos en vez de paneles numerados.

Con la skill — Las dos primeras pantallas son casi iguales, con el mismo titular y la misma foto del taller; con la skill los talleres van bajo una barra de progreso de 4 pasos en vez de paneles numerados.

La respuesta corta

UI/UX Pro Max es una skill de Claude Code que le da a Claude una librería local con buscador de estilos de diseño, paletas de color, combinaciones de fuentes y 119 reglas de UX, más una checklist para correr antes de entregar. Le sirve a fundadores y equipos pequeños que construyen flujos de reserva, formularios y pantallas de app que deben funcionar bien en teléfonos y para todos. Nuestro veredicto es 5/10: con el mismo prompt Claude sin la skill armó una página de reservas accesible casi idéntica, y la skill aportó sobre todo un flujo paso a paso en teléfono y una checklist más estricta, mientras que su generador de sistemas de diseño falló dos veces.

Ideal para: Revisar un flujo de reservas o de checkout contra reglas de accesibilidad y usabilidad en teléfono antes del lanzamiento.

¿Quieres este resultado en tu propio trabajo?

Regístrate gratis e instala UI/UX Pro Max en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.

Cuándo vale la pena usarla

Flujo de reservas que funciona en teléfonos

Recibes reservas para clases o citas y la mayoría de los visitantes usan el teléfono. En nuestra prueba armó un flujo de 4 pasos con barra de progreso, una barra inferior fija con tu elección y el precio, y una fecha completa marcada con texto, no solo con color.

Revisión de accesibilidad antes del lanzamiento

Tu formulario o página está casi lista y quieres que todos puedan usarla. Pídele a Claude que corra la checklist de la skill: contraste de texto de 4.5 a 1, zonas táctiles de 44 píxeles, foco visible, errores claros y una prueba con texto al 200%.

Fuentes y colores para una app

Estás empezando una pantalla de app o un dashboard y necesitas una paleta y un par de fuentes. La skill busca en su librería de 192 paletas y 74 combinaciones de fuentes por tipo de producto, lo que funciona mejor para tipos de producto comunes.

Cómo conseguir un gran resultado

Instálala (pasos abajo)
Úsala en Claude Code con Python 3 en tu computadora. La herramienta de búsqueda usa solo Python estándar, así que no hay nada más que instalar.
Describe el flujo y a los usuarios
Di qué debe hacer la gente paso a paso, en qué dispositivo y cualquier límite real, como fechas o cupos agotados. La skill empieza anotando el tipo de producto, el público, las palabras de estilo y tu stack técnico, y no va a adivinar un stack.
Revisa el sistema de diseño que elige
Claude corre una búsqueda de sistema de diseño, reintenta una vez si el resultado no encaja y te avisa si nada sirve. En nuestra prueba ambos intentos fallaron (una paleta de coworking, luego blanco y negro), así que eligió estilo, paleta y fuentes a partir de búsquedas separadas.
Deja que corra la checklist
Después de construir, Claude recorre la checklist previa a la entrega de la skill y, donde puede, toma capturas en tamaños de teléfono, horizontal y escritorio en modo claro y oscuro. En nuestra prueba esto detectó una zona táctil de 36 píxeles de ancho y una barra de resumen que se partía en cuatro líneas.
Conecta la reserva real
Completa cada [placeholder], como los horarios de inicio y la política de cancelación. El botón Confirmar solo simula una reserva, así que pídele a quien maneje tu sitio que lo conecte a tu sistema de reservas o de email.

Este es el prompt exacto con el que empezamos nuestra prueba:

El prompt que usamos

Diseña y construye una página de reservas de talleres para Clay & Co, un solo archivo HTML responsive, out/index.html (CSS y JS dentro). Flujo: elegir un taller, elegir una de las próximas fechas, ingresar nombre y email, confirmar, ver una confirmación. Próximas fechas para cada taller: jueves 5 de nov, sábado 7 de nov, jueves 12 de nov y sábado 14 de nov de 2026. El sábado 7 de nov está completo. Tiene que funcionar muy bien en un teléfono y ser accesible.

Todo lo que creó

Cada pieza de abajo es un resultado real de nuestra prueba, abierto tal como lo abrirías tú.

Con la skill, en un teléfono — Con la skill: un paso a la vez con barra de progreso, precios en cada tarjeta de taller y un resumen de la reserva junto al flujo; en teléfonos una barra fija abajo lleva Atrás y Continuar.

Sin la skill, en un teléfono — Sin la skill: taller, fecha y formulario de contacto en una sola página, con el sábado 7 de nov tachado como completo y el total con Confirmar en un panel lateral.

Cómo fue la sesión

La conversación de nuestra prueba, resumida. Unos 15 minutos desde el primer prompt hasta el resultado final.

Tú: Diseña y construye una página de reservas de talleres para Clay & Co, un solo archivo HTML responsive (CSS y JS dentro). Flujo: elegir un taller, elegir una de las próximas fechas, ingresar nombre y email, confirmar, ver una confirmación. Próximas fechas para cada taller: jueves 5 de nov, sábado 7 de nov, jueves 12 de nov y sábado 14 de nov de 2026. El sábado 7 de nov está completo. Tiene que funcionar muy bien en un teléfono y ser accesible. [Ficha de datos y 8 fotos del taller adjuntas.]
AI: Es una pequeña tienda artesanal con un flujo de reservas, usada sobre todo en teléfonos. Palabras de estilo: artesanal, cálido, tranquilo. El stack es HTML, CSS y JS simples, como pediste.
AI: No hay coincidencia de producto. Sugirió minimalismo suizo, una paleta ámbar y "azul de reservas" de un perfil de coworking y fuentes Amatic SC. Eso no encaja.
AI: Eso coincidió con un estudio de fotografía: blanco y negro, Plus Jakarta Sans. Tampoco encaja. La skill dice que pare después de un reintento, así que no se encontró un sistema de diseño verificado y no lo guardaré.
AI: Elegido: el estilo "Nature Distilled" para productos artesanales, una paleta cálida terracota sobre fondo avena, Lora con Raleway. Reglas de UX: un resumen de errores que recibe el foco, errores en línea, progreso por pasos con Atrás, opciones no disponibles marcadas con texto y no solo con color, foco movido en cada paso.
AI: Corregí 7 problemas: un botón oculto que igual se veía, un enlace de encabezado de 36px, viñetas de error desalineadas, una barra de resumen que se partía en 4 líneas, un hueco de imagen en las tarjetas del teléfono, etiquetas de paso ocultas en teléfonos y una foto de introducción que empujaba el flujo fuera de la primera pantalla.
AI: Listo: out/index.html. Confirmar simula la solicitud, porque no hay backend de reservas. Placeholders: horarios de inicio, una línea por taller sobre lo que se hace, política de pago y cancelación, lo que envía el taller después de reservar. Un cupo por reserva. Unos 15 minutos.

Qué funcionó y dónde se quedó corta

Qué funcionó

Un flujo en teléfono más ordenado que el de Claude sin la skill: un paso a la vez con barra de progreso, una barra inferior fija que muestra tu elección y el precio ("Make a Mug, jue 12 de nov, $80") y el botón Atrás del navegador que vuelve al paso anterior.
Su checklist detectó pequeños defectos que Claude sin la skill no probó: un enlace de encabezado de 36px de ancho por debajo del tamaño táctil de 44px, un botón oculto que igual se veía y una barra de resumen que se partía en cuatro líneas.
El sábado 7 de nov aparece como "Completo" con un ícono y borde punteado, no solo con color, y las fechas abiertas dicen "Cupos disponibles" en un verde comprobado por contraste.
Fue honesta cuando su propia base de datos falló: reportó los dos resultados de sistema de diseño que no encajaban en vez de usarlos.

Dónde se quedó corta

La diferencia es pequeña: Claude sin la skill, con el mismo prompt, armó casi la misma página (mismo titular oscuro, misma foto del taller, tarjetas con fotos, resumen de errores, fecha completa, modo oscuro) en unos 12 minutos.
La función estrella de la skill, el generador de sistemas de diseño, falló dos veces para un taller de cerámica, así que el look final se eligió a mano a partir de búsquedas separadas.
El asistente esconde las fechas detrás de un toque en Continuar, mientras que la versión de Claude sin la skill muestra taller, fechas y formulario en una sola pantalla; la tarjeta de reseña muestra cinco estrellas completas para una calificación de 4.9.

¿Quieres este resultado en tu propio trabajo?

Regístrate gratis e instala UI/UX Pro Max en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.

Prompts que funcionan

Cambia las partes entre corchetes por tus propios datos. No hace falta nombrar la skill: pide el trabajo y tu herramienta de IA la usa sola.

Página de reservas de talleres o clases

Diseña y construye una página de reservas para [nombre del negocio], un solo archivo HTML responsive. Flujo: elegir un [clase / taller / servicio], elegir una de las próximas fechas, ingresar nombre y email, confirmar, ver una confirmación. Próximas fechas: [lista]. [Fecha] está completa. Tiene que funcionar muy bien en un teléfono y ser accesible. Usa solo estos datos y marca todo lo demás como [placeholder]: [pega los datos].

Revisión de accesibilidad de una página

Revisa esta página contra tus reglas de accesibilidad y uso táctil: contraste, tamaño de zonas táctiles, foco, etiquetas de formulario y errores. Enumera lo que falla con su medida y luego corrígelo. Esta es la página: [pega el HTML o el archivo].

Paleta y fuentes para una app

Sugiere una paleta de colores y una combinación de fuentes para una app de [tipo de app, p. ej. meditación / fitness / facturación] para [público]. Dime si tu búsqueda encontró una coincidencia real o si es una guía general, y luego arma la pantalla de inicio.

Arregla un checkout o formulario torpe

Mi formulario de [checkout / registro / contacto] es confuso en teléfonos. Rehazlo con pasos claros, etiquetas visibles, errores en línea y un resumen de lo que la persona eligió. Conserva mis campos: [lista de campos]. Este es el formulario actual: [pégalo].

Consejos de nuestra prueba

Dale los límites reales de tus reservas: fechas, cupos agotados, lugares por reserva. En nuestra prueba eso le permitió marcar la fecha completa con texto y un ícono, no solo con color.
Pregúntale a Claude si su búsqueda de sistema de diseño encontró una coincidencia verificada. La skill le indica decirlo cuando una búsqueda falla, y en nuestra prueba ambos intentos fallaron para un taller de cerámica.
Nombra tu stack técnico, o di "un solo archivo HTML". La skill se niega a suponer un stack, y sus consejos de stack cubren 22 opciones como React, Next.js, Vue y Flutter, pero no Shopify ni WordPress.
Pide que la checklist se corra con capturas en tamaño de teléfono, horizontal, escritorio y texto al 200%. Ahí es donde encontró defectos reales en nuestra prueba.
Decide si quieres un paso a la vez o todo en una página. La skill armó un asistente de 4 pasos, mientras que Claude sin la skill mantuvo todos los pasos visibles, lo que pide menos toques para un formulario corto.

Lo que necesitas: Las skills de la app de Claude funcionan en todos los planes de Claude, incluido Free, con la ejecución de código y la creación de archivos activadas; Claude Code necesita Pro o superior. La herramienta de búsqueda de esta skill necesita Python 3, y la instalación en Claude.ai no está documentada, así que en la práctica corre en Claude Code..

Cómo instalarla

Las skills siguen el estándar abierto Agent Skills, así que esta no depende de una sola empresa. Elige la herramienta de IA que usas. ¿No lo tienes claro? La primera pestaña cubre la mayoría en un solo paso.

Lo más fácil: pega esto en tu herramienta de IA

Instala esta skill para que funcione en todos mis proyectos: ejecuta `npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-ux-pro-max -g -y` en mi terminal. Si falta Node.js, dime primero cómo instalarlo. Cuando termines, confirma que la skill quedó instalada y dime cómo empezar a usarla.

O hazlo tú mismo:

Un solo comando instala la skill en las herramientas de IA de tu computadora. Detecta las que tienes y te pregunta en cuáles añadirla: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode y más de 60 más.

$npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-ux-pro-max -g

Necesitas tener Node.js instalado (gratis, en nodejs.org). La opción -g hace que la skill esté disponible en todos tus proyectos.

Bueno saber: También se puede instalar con un CLI complementario (uipro).

Desbloquea los pasos de instalación

Gratis. Deja tu email una vez para abrir los pasos de instalación de las 149 skills y recibir cada mes las mejores skills nuevas.

Cómo lo verificamos

Confirmamos la skill en su fuente original el 18 de octubre de 2026: el SKILL.md está donde debe estar, los archivos se actualizaron en el último año y la licencia (MIT) permite usarla. Después, el 19 de octubre de 2026, la instalamos, la usamos en la tarea de arriba sin modificarla y anotamos lo que pasó, incluido lo que salió mal.

Preguntas frecuentes

¿Necesito programar para usar UI/UX Pro Max?

No. Claude corre la herramienta de búsqueda y escribe el código. Sí tienes que juzgar sus sugerencias de diseño, porque en nuestra prueba sus resultados de sistema de diseño no encajaban con el negocio.

¿Qué plan o herramientas necesita?

Las skills de la app de Claude funcionan en todos los planes de Claude, incluido Free, con la ejecución de código y la creación de archivos activadas; Claude Code necesita Pro o superior. La herramienta de búsqueda de esta skill también necesita Python 3 en tu computadora, sin paquetes extra.

¿Funciona en Claude.ai o solo en Claude Code?

Está hecha para Claude Code, donde la agregas como plugin, y un instalador de línea de comandos complementario también puede configurarla. La instalación en Claude.ai no está documentada, y el proyecto advierte que su descarga completa es demasiado grande para el límite de subida de 200 archivos de Claude.ai.

¿Es mejor que simplemente pedírselo a Claude?

Solo un poco, en nuestra prueba. Con el mismo prompt de reservas, Claude sin la skill armó casi la misma página, con el mismo titular, tarjetas con fotos, resumen de errores, fecha completa y modo oscuro. La skill la convirtió en un flujo de 4 pasos con una barra fija en el teléfono y su checklist detectó algunos defectos pequeños, como una zona táctil demasiado chica, pero su generador de sistemas de diseño falló dos veces.

¿Funciona con mi constructor de sitios o framework?

Tiene guías específicas para 22 stacks técnicos, incluidos React, Next.js, Vue, Svelte, Astro, Laravel, SwiftUI, Flutter y HTML simple con Tailwind. Shopify y WordPress no están en esa lista, así que para esos solo obtienes sus reglas generales de UX y accesibilidad.