ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)

Reseña

Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en un PC de pruebas Windows dedicado, un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales en cada ejecución, skill instalada (grupo con skill), ausente (control) o ausente con el requisito central de la skill comprimido en una frase añadida al prompt (grupo del prompt de una frase), 2 ejecuciones por grupo y tarea, red desactivada, escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo la redacción indicada abajo). Tres tareas, mismo prompt para todos los grupos: una landing page para una marca ficticia de suscripción de aperitivos (Tidepool), un panel de administración para una red municipal de calidad del agua y un rediseño de la página de inicio sencilla de un rocódromo (old.html) conservando todo el contenido. El grupo del prompt de una frase añade una frase que enumera las prioridades de la skill (contraste 4.5:1, objetivos de 44 px, mobile-first, iconos SVG, una escala tipográfica, movimiento reducido). Las páginas se capturaron sin conexión (escritorio y móvil) y se puntuaron a ciegas a partir de hojas de contacto barajadas, sin etiquetas de condición.

Comparación de tres ramas

Medido con Codex CLI en 18 ejecuciones, puntuado con comprobaciones basadas en reglas y sin juez LLM. Total 20.9 / 30, veredicto Según el caso.

Veredicto: Según el caso (20.9 / 30). Fuente: nextlevelbuilder/ui-ux-pro-max-skill, .claude/skills/ui-ux-pro-max, fijada en el commit 3a13158. Instalación: npx skills@latest add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max. Licencia: MIT (LICENSE del repositorio).

Qué es

La skill ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill): una base de conocimiento de diseño UI/UX con una herramienta local de búsqueda en Python (scripts/search.py) sobre datos CSV incluidos (estilos, paletas, combinaciones tipográficas, reglas por tipo de producto, guías de UX). Su flujo principal es generar una recomendación de «sistema de diseño» para el producto (--design-system -p <name>) y luego construir la interfaz conforme a ella, con un conjunto de reglas por orden de prioridad (accesibilidad, áreas táctiles, adaptabilidad, movimiento).

Cómo lo probamos

Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en un PC de pruebas Windows dedicado, un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales por ejecución, skill instalada (tratamiento) o ausente (control) o ausente con el requisito central de la skill comprimido en una frase añadida al final del prompt (grupo de una frase), 2 ejecuciones por grupo y tarea, red desactivada, escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo la formulación indicada abajo).

Tres tareas, el mismo prompt para todos los grupos: una landing page para una marca ficticia de suscripción de snacks (Tidepool), un panel de administración para una red municipal de calidad del agua y un rediseño de la página de inicio sosa de un rocódromo (old.html) conservando todo el contenido. El grupo de una frase añade una frase que enumera las prioridades de la skill (contraste 4.5:1, áreas táctiles de 44 px, mobile-first, iconos SVG, una escala tipográfica, movimiento reducido). Las páginas se capturaron sin conexión (escritorio y móvil) y se puntuaron a ciegas a partir de hojas de contacto barajadas, sin etiquetas de condición.

1. Nueva landing page a partir de un brief — Crea una landing de una sola página para Tidepool, una marca de snacks de algas de pequeño lote que vende por suscripción (tres sabores, $14/caja, envío mensual). Escribe un único index.html autocontenido con CSS en línea y JS mínimo solo si hace falta. Sin frameworks, sin compilación…
2. Interfaz de panel con muchos datos — Crea una página de panel para un equipo municipal de monitorización de la calidad del agua: lecturas actuales de 6 estaciones (pH, turbidez, cloro, temperatura), una tendencia de 7 días para cada una y un panel de alertas. Un único dashboard.html autocontenido con CSS/JS en línea y datos predefinidos…
3. Reforma una página existente y sosa — old.html es la página de inicio actual del Granite Peak Climbing Gym (Boulder, CO). Rediséñala en new.html: conserva todo su contenido real (precios, clases, horarios, dirección) pero haz que la página parezca propia de este gimnasio concreto. HTML/CSS autocontenido, sin frameworks…

Las puntuaciones provienen de una lectura a ciegas de Grok Bot (ids barajados, sin mostrar la condición) con una rúbrica fija, 0–5 por ejecución; es un juez de IA, así que las diferencias pequeñas deben tratarse como ruido.

Resultados

La frase única que recibió el tercer grupo: "Sigue las buenas prácticas de UI/UX por orden de prioridad: accesibilidad primero (contraste 4.5:1, texto alternativo, indicadores de foco visibles, etiquetas), áreas táctiles de al menos 44 px con 8 px de separación, maquetación responsive mobile-first con meta viewport y sin desplazamiento horizontal, un estilo acorde con el producto con iconos SVG (nada de emoji), una escala tipográfica coherente (base de 16 px, altura de línea 1.5) y tokens de color semánticos, y movimiento que respete prefers-reduced-motion."

Puntuación media: 4.0 sin vs 3.96 con la skill (delta -0.04). Tokens por ejecución: 116k vs 160k (1.37x); tiempo 186s vs 184s. Grupo de una frase: 3.92 (la ganancia de la skill sobre la frase única: +0.04; la ganancia de la frase única sobre sin skill: -0.08); tokens de la frase única 123k por ejecución, así que la skill cuesta 1.30x la frase única.

Qué ocurrió

• Sin diferencia de calidad visible: media a ciegas 4.00 control, 3.92 una frase, 3.96 skill (n=6 cada uno). Por tarea, los grupos difieren como máximo en 0.25 puntos, por debajo de lo que dos ejecuciones por celda pueden resolver. Las 18 páginas están pulidas, son responsive y comparten un aspecto similar (fondo crema o verde pálido, acento verde oscuro, tipografía display con serif).
• La skill se usó de verdad: las 6 ejecuciones de tratamiento leyeron SKILL.md y ejecutaron search.py --design-system (por ejemplo, para «snack subscription playful coastal»). El script funciona en Windows con el Python del sistema.
• Lo básico de accesibilidad ya es estándar en la salida de Codex sin más: meta viewport, consultas @media y estilos de foco en 18/18 páginas y prefers-reduced-motion en 17/18 (el único fallo fue un panel de control). Así que las reglas de accesibilidad prioritaria de la skill tenían poco que añadir.
• Coste: 160k tokens por ejecución con la skill frente a 116k del control y 123k de una frase (1.4x y 1.3x); el tiempo real fue el mismo (~185 s). Las ejecuciones de tratamiento también copiaron la carpeta de la skill en el proyecto (.agents), que es donde van los tokens extra.
• Una comprobación falló por error: «mantiene los precios ($22/$79/$720)» falló en 4 de 6 ejecuciones de rediseño en los grupos de control y skill porque esas páginas escribieron el signo del dólar en un elemento <sup> aparte (<sup>$</sup>79); las capturas muestran los precios intactos. No influye en la puntuación.

Puntuaciones por dimensión

Límites de esta prueba

• Juicio visual a ciegas del revisor a partir de hojas de contacto de página completa (escritorio 600 px de ancho por página, móvil 300 px); las diferencias de 0.25 están dentro del ruido del juez. Las páginas no se comparan a resolución completa ni de forma interactiva.
• Solo n=2 por celda y tres tareas; el valor de la skill en un producto largo y multipágina no está cubierto.
• Las recomendaciones basadas en datos de la skill (paletas y combinaciones de fuentes) no pudieron cargar fuentes web sin conexión; las páginas recurren a fuentes del sistema, lo que oculta las elecciones tipográficas.
• n = 2 por grupo y tarea: las diferencias de menos de ~1 punto son ruido.
• Juicio ciego con IA: un solo juez, sin comprobación entre evaluadores; las ejecuciones originales de control/tratamiento y las posteriores de una frase se juzgaron en sesiones separadas (una frase el 2026-11-02), así que es posible una deriva entre sesiones.

Seguridad

Consulta security.md. Escaneo: 0 CRITICAL / 3 HIGH / 3 MEDIUM. Veredicto: segura de ejecutar (sandbox sin red). Un escaneo limpio no demuestra que una skill sea segura.

Conclusión

Con un modelo base capaz, las páginas ya son buenas; la skill añade un paso de recomendación de sistema de diseño pero ninguna mejora de calidad medible aquí, a cambio de 1.4x tokens. Úsala como generador de ideas o lista de comprobación, no como una mejora de calidad esperada.