Revisor de UI/UX: crítica de diseño con análisis de causa raíz a partir de capturas de pantalla
2026-08-28
Revisor de UI/UX te ayuda a crear interfaces más claras y fáciles de usar al leer una captura de pantalla como lo haría un líder sénior de diseño: incluye la jerarquía, el espaciado, los estados faltantes, la accesibilidad y las convenciones de la plataforma. Mientras que la mayoría de los comentarios se limita a señalar detalles de píxeles o a volcar una lista de verificación automatizada, esta IA diagnostica las causas raíz y te indica qué debes corregir primero.
✅ Analiza la jerarquía visual, los sistemas de espaciado y la coherencia de los componentes a partir de una imagen estática ✅ Detecta estados vacíos, de error, de carga y deshabilitados que las capturas de pantalla ocultan ✅ Comprueba el contraste, el tamaño de los objetivos y la independencia del color según los estándares de accesibilidad ✅ Adapta los comentarios para diseñadores, desarrolladores, responsables de producto y principiantes
Una inconsistencia de espaciado rara vez es un caso aislado. Normalmente significa que no existe un sistema de espaciado. Una etiqueta secundaria desvaída rara vez es simplemente «un gris que deberías oscurecer»: a menudo es un problema de escala tipográfica y contraste que se repetirá en todas las pantallas. Esa es la diferencia entre una revisión en forma de lista de tareas y una revisión de un líder de diseño.
Para entender por qué esa diferencia importa, resulta útil observar cómo los productos hacen que los usuarios fracasen actualmente y por qué la mayoría de los procesos de revisión nunca detecta los fallos que más costos generan.
Respuesta rápida: ¿qué es el Revisor de UI/UX?
El Revisor de UI/UX es un crítico de diseño con IA que analiza capturas de pantalla para diagnosticar problemas de jerarquía, espaciado, estados faltantes y accesibilidad, y después prescribe soluciones de causa raíz. Evalúa la pantalla según su intención, no según una preferencia estética genérica.
Capacidades principales:
- Diagnóstico de jerarquía visual, tipografía, color y espaciado basado en una cuadrícula de 8 px
- Claridad de la interacción: posibilidades de acción, CTA y estados completos de los componentes
- Revisión de accesibilidad alineada con los principios de WCAG, no con una lista de verificación añadida a posteriori
- Crítica adaptada a las convenciones de iOS, Android, la web y el escritorio
- Hallazgos clasificados por gravedad, con próximos pasos concretos a nivel de sistema
Por qué la mayoría de las revisiones de UI no detecta los problemas que realmente encuentran los usuarios
Las interfaces son cada vez más densas. La evaluación de WebAIM de 2026 sobre un millón de páginas de inicio encontró un promedio de 1.437 elementos por página, un aumento del 22,5 % en un solo año. Más elementos significan más lugares donde la jerarquía puede desmoronarse, las etiquetas pueden desaparecer y el contraste puede fallar.
La accesibilidad es la versión más medible de ese deterioro:
56,1 errores por página — promedio de errores de accesibilidad detectados, un aumento del 10,1 % respecto a 2025
83,9 % — de esas páginas de inicio fallaban únicamente en el texto de bajo contraste
Esos seis tipos de fallos recurrentes —bajo contraste, ausencia de alternativas textuales para imágenes, campos de entrada sin etiquetar, enlaces vacíos, botones vacíos y ausencia del idioma del documento— todavía representan la mayor parte de los errores detectados automáticamente. WebAIM informa de que el 96 % de los errores detectados pertenece a esas categorías. Las herramientas de comprobación automática son útiles en este aspecto. También son incompletas.
El marco de métodos de investigación de Nielsen Norman Group establece una distinción clara entre lo que hacen las personas y lo que puede contar una herramienta. Los analizadores cuantitativos responden a «cuántos fallos de contraste hay». No pueden responder si la acción principal es visualmente más débil que una etiqueta secundaria, si nunca se diseñó un estado vacío o si los filtros de un panel compiten con los datos a los que deberían dar servicio. Esa es una crítica cualitativa y orientada a la intención: el tipo de crítica para el que se contrata a los revisores sénior y que la mayoría de los equipos solo obtiene una vez, tarde y con prisas.
El costo humano no es teórico. Se estima que 1.300 millones de personas viven con alguna discapacidad, y las demandas por accesibilidad en Estados Unidos siguen representando un riesgo real de cumplimiento. Mientras tanto, WCAG 2.2 añadió criterios de éxito dirigidos a objetivos móviles, visibilidad del foco, alternativas al arrastre y autenticación que no bloquee los gestores de contraseñas, estándares que muchos productos publicados todavía no han incorporado.
Sin embargo, conseguir una revisión que realmente mejore el producto sigue siendo frustrantemente difícil:
- Los comentarios llegan demasiado tarde. La crítica suele llegar cuando el equipo de ingeniería ya está avanzando en la implementación, momento en el que deshacer un sistema de espaciado o un patrón de navegación resulta costoso.
- Las listas de verificación confunden los síntomas con los sistemas. «Haz esto 8 px más estrecho» no corrige las siguientes 40 pantallas si no existe una base de 4/8 px.
- Las capturas de pantalla ocultan la UX. Los estados vacíos, de error, de carga, deshabilitados y de desbordamiento son los puntos en los que fallan los productos, y rara vez aparecen en el diseño del recorrido ideal.
- Las herramientas y el criterio estético hablan de cosas distintas. Los desarrolladores reciben comentarios estéticos que no pueden implementar; los diseñadores reciben proporciones de contraste sin un diagnóstico de jerarquía; los responsables de producto reciben un mar de detalles con la misma prioridad.
Para eso se creó exactamente una revisión de diseño sénior basada en capturas de pantalla.
Por qué el Revisor de UI/UX
El Revisor de UI/UX trata cada carga como una crítica de diseño, no como una comprobación de estilo. Primero interpreta la intención —qué es la pantalla, para quién es y qué debe lograr la persona usuaria— y después evalúa la ejecución según esa intención. Un inicio de sesión minimalista y un panel operativo con gran densidad de datos no se evalúan con la misma rúbrica.
| Enfoque tradicional | Revisor de UI/UX |
|---|---|
| Esperar varios días a que haya disponibilidad en el calendario de un diseñador sénior | Cargar una captura de pantalla y recibir una revisión priorizada en la misma sesión |
| Los analizadores automáticos detectan el contraste y las etiquetas faltantes | Diagnostica la jerarquía, las posibilidades de acción, los textos y los estados que los analizadores no pueden ver |
| Comentarios sobre píxeles sin un sistema subyacente | Identifica la causa raíz: ausencia de escala tipográfica, cuadrícula de espaciado o biblioteca de componentes |
| Una lista genérica de problemas con su gravedad | Crítico / alto / medio / bajo, ordenados según el impacto en la tarea |
| El mismo tono para todas las audiencias | Adapta el tono para diseñadores, desarrolladores, responsables de producto o principiantes |
La revisión es específica. El contraste se analiza mediante proporciones y términos de WCAG, no con frases como «este gris parece claro». Los objetivos táctiles se comprueban según las directrices de la plataforma, como el mínimo de 44 × 44 pt de Apple y los fundamentos de accesibilidad de Material 3. Los estados faltantes se señalan como hallazgos, no se inventan.
La jerarquía antes que la decoración
El tamaño, el peso, el color, la posición, la proximidad y la elevación deberían ordenar la atención. Si una etiqueta de descuento llama más la atención que el botón de pago, la pantalla no está «recargada»: la jerarquía está invertida. El revisor comienza por ese tipo de problema porque bloquea la comprensión.
Los estados como entregable de primera clase
Predeterminado, hover, activo, foco, deshabilitado, carga, vacío, error y éxito forman la historia completa de un componente. Los estados faltantes son el hallazgo experto más común. Un formulario que solo existe en su condición ideal, completamente rellenada, no está terminado, aunque sus píxeles estén pulidos.
La accesibilidad como usabilidad
WCAG 2.2 se organiza en torno a cuatro principios: perceptible, operable, comprensible y robusto. Los nuevos criterios de 2.2 abarcan el foco no oculto, el tamaño mínimo de los objetivos, los movimientos de arrastre, la ayuda coherente, la introducción redundante y la autenticación accesible. El revisor los aplica de forma diagnóstica —el color nunca debe transmitir el significado por sí solo, el orden del foco debe tener sentido y el movimiento no debe ser obligatorio— en lugar de recitar la especificación.
Convenciones de la plataforma, no una «UI limpia» genérica
Las Pautas de interfaz humana de iOS, Material 3 y las convenciones de formularios y navegadores web son contratos diferentes. Una pestaña inferior que invierte el tratamiento de los iconos seleccionados y no seleccionados resultará incorrecta para los usuarios de iOS, aunque sea visualmente ordenada. El revisor identifica la plataforma a partir de las señales visuales cuando no la especificas.
Ejemplos de indicaciones:
"Revisa esta pantalla de pago de iOS. Es un MVP. Dime qué podría impedir que una persona usuaria primeriza pague."
"Este panel SaaS es para responsables de operaciones. Critica la jerarquía, la densidad y cualquier aspecto que no haya diseñado para los estados vacíos y de error."
"Soy desarrollador y voy a implementar este frame de Figma en React. Dame comentarios orientados a la implementación: tokens de espaciado, contraste y áreas táctiles."
Cómo funciona
No necesitas un documento completo del sistema de diseño para empezar. Basta con una captura de pantalla clara y una frase de contexto. El revisor de IA analiza lo que es visible, señala lo que no puede juzgarse a partir de una imagen estática y clasifica qué deberías cambiar primero.
Paso 1: carga la pantalla que realmente necesitas evaluar
Captura la UI real o el diseño de alta fidelidad: incluye toda la ventana, no solo un botón recortado de forma ajustada. Las capturas borrosas, diminutas o muy comprimidas pasan por un control de calidad: se te pedirá una captura mejor en lugar de recibir una revisión supuestamente segura de píxeles que no están ahí.
"Este es el hero de la página de inicio en producción, en escritorio. Ignora la calidad del texto de marketing; dime si la jerarquía y el contraste de la CTA se mantienen."
Paso 2: indica la intención, la plataforma y la fase
Una sola frase cambia el estándar de la crítica. Un MVP recibe comentarios sobre claridad estructural; un producto previo al lanzamiento recibe comentarios tanto sobre la estructura como sobre el acabado. Indica la plataforma —iOS, Android, web o escritorio— y la tarea que la persona usuaria intenta completar.
"Pantalla de ajustes de Android, Material 3, previa al lanzamiento. Los usuarios no encuentran los controles de notificaciones."
Paso 3: lee la crítica priorizada
Espera una lectura de primera impresión, fortalezas reales —específicas, no simplemente «se ve limpio»— y después problemas ordenados por gravedad. Cada hallazgo incluye qué está mal, el principio que lo sustenta y una solución concreta. Las carencias del sistema —sin escala de espaciado, sin progresión tipográfica o sin biblioteca de componentes— se identifican como raíces, no como una acumulación de detalles sin relación.
Paso 4: completa lo que la captura de pantalla no puede mostrar
Solicita los estados vacío, de error, de carga y de desbordamiento. Envía una segunda pantalla del mismo flujo para comprobar la coherencia. Para iteraciones de una misma pantalla, pide una comparación explícita del antes y el después: qué mejoró, qué empeoró y qué sigue pendiente.
"Este es el mismo panel después de añadir una cuadrícula de 8 px. ¿Qué mejoró y qué sigue afectando a la facilidad de exploración?"
Paso 5: convierte los hallazgos en un sistema, no en un parche para una sola pantalla
Si la revisión indica que tus espacios de 12 px compiten con un modelo mental de 8 px, la solución es un conjunto de tokens de espaciado, no un único margen. Si el color transmite por sí solo todo el significado del estado, la solución es combinar forma y etiqueta y aplicarlo en todos los lugares donde aparezca el estado. Cuando el producto también necesita un sistema visual documentado para evitar la siguiente ronda de desviaciones, el Generador de kits de marca puede convertir esas decisiones en paletas, tipografías y directrices reutilizables por todo el equipo.
Prueba el Revisor de UI/UX gratis, sin necesidad de tarjeta de crédito.
Resultados y casos de uso
📊 Una persona fundadora revisa un MVP antes de que se consolide
Escenario: Una startup de dos personas está a punto de mostrar un flujo de incorporación web a sus primeras 50 personas usuarias. Las pantallas se ven «limpias» en Figma. Nadie ha comprobado los estados vacíos, el texto de error ni si el botón principal funciona correctamente en la pantalla de un portátil de tamaño mediano.
Enfoque tradicional: Contratar a un diseñador independiente, esperar una semana y recibir una presentación con 40 comentarios sin diferenciar, o publicar el producto y aprender a partir de la pérdida de usuarios.
Revisor de UI/UX: Carga las tres pantallas principales con el contexto «MVP web para consumidores; el objetivo es crear una cuenta y percibir el valor en menos de dos minutos». Obtendrás una lista clasificada por gravedad: competencia entre CTA en el selector de planes, ausencia de una posibilidad de omitir el paso, fallo de contraste en el texto de ayuda y ausencia de un estado de error de contraseña. Los 2 o 3 cambios con mayor impacto quedan claramente definidos.
- Detecta antipatrones de incorporación, como mostrar demasiados pasos o retrasar el valor detrás de formularios
- Separa los problemas que bloquean el lanzamiento de los detalles de acabado
- Proporciona a la persona fundadora un lenguaje para informar al equipo de ingeniería sin fingir ser responsable de diseño
💼 Una persona diseñadora de producto realiza el control de calidad previo a la entrega
Escenario: Una persona diseñadora de producto está a cargo de un panel de analítica SaaS. El equipo de ingeniería necesita las especificaciones mañana. La persona diseñadora percibe que la densidad no es adecuada, pero quiere una segunda revisión de nivel de liderazgo antes de que el archivo se convierta en la fuente de verdad.
Enfoque tradicional: Escribir por Slack a una persona diseñadora principal ocupada y esperar comentarios asíncronos sobre algunos frames.
Revisor de UI/UX: Envía el panel, los filtros y el estado vacío. La revisión señala un diseño dominado por gráficos que no muestra información accionable, controles de filtro que compiten con el contenido y acciones por fila que no cumplen las expectativas de tamaño de objetivo según el criterio de tamaño de objetivo de WCAG 2.2. También se nombran las fortalezas —divulgación progresiva a nivel de tarjeta y alineación tabular numérica coherente— para evitar que se rediseñen innecesariamente.
- Crítica sistémica a nivel de pares, en lugar de comentarios basados en preferencias
- Coherencia entre pantallas cuando cargas más de un frame
- Una lista de tareas que puedes convertir en tickets según su gravedad
Si el siguiente paso consiste en explorar un diseño alternativo y no solo en anotar el actual, el Generador de prototipos de UI/UX puede producir una pantalla realista para iOS, Android o la web que ya refleje la jerarquía recomendada y los patrones de la plataforma.
📱 Una persona ingeniera de dispositivos móviles comprueba la implementación respecto al diseño, desde el teléfono
Escenario: Una persona ingeniera de iOS implementó una pantalla de registro de entrenamientos a partir de un diseño. En un iPhone físico, las acciones secundarias están en las esquinas superiores, fuera del alcance; el tratamiento del icono de la pestaña seleccionada parece invertido y las filas de la lista se pueden tocar, pero visualmente parecen estáticas. Busca comentarios orientados a la implementación durante el trayecto, desde el dispositivo que lleva en el bolsillo.
Enfoque tradicional: Compartir la captura en un canal de diseño y esperar. O publicar el producto y observar cómo los fallos de descubrimiento de gestos aparecen en las grabaciones de sesiones.
Revisor de UI/UX: Carga la captura del dispositivo desde iOS o Android. Pide comentarios sobre HIG o Material, un mapa de la zona accesible al pulgar y problemas con objetivos de 44 pt o 48 dp. La revisión distingue entre «el diseño estaba equivocado» y «la implementación se desvió», y señala colisiones con la barra de estado y problemas con el área segura que los frames de Figma de escritorio suelen pasar por alto.
- Funciona con paridad completa de funciones en la web, iOS y Android, por lo que la revisión puede realizarse en el mismo teléfono que reveló el error
- Comentarios adaptados a desarrolladores: áreas táctiles, foco y estados de componentes, no preferencias estéticas sin explicación
- Comprobaciones de las convenciones de la plataforma según Apple HIG y Material 3
Cuando el equipo de marketing necesite un elemento visual para una landing que coincida con la UI del producto que acabas de perfeccionar, Diseñador gráfico puede crear recursos web y de campaña coherentes con la marca, para que la tienda y la aplicación ya no parezcan dos productos distintos.
Preguntas frecuentes
¿El Revisor de UI/UX es gratis?
Sí. Puedes utilizar el Revisor de UI/UX con el plan gratuito, que incluye todas las funciones principales y un uso mensual limitado. Los planes de pago aumentan el uso —Plus comienza en 20 $ al mes— si revisas flujos completos en cada sprint. No necesitas una tarjeta de crédito para probarlo.
¿En qué se diferencia el Revisor de UI/UX de un analizador de accesibilidad?
Los analizadores destacan en los fallos cuantificables: contraste, ausencia de alt y campos de entrada sin etiquetar. La propia metodología de WebAIM señala que las herramientas automatizadas no pueden detectar todos los fallos de WCAG. Este revisor también señala esos problemas y añade lo que los analizadores no pueden ver: jerarquía invertida, ausencia de estados vacíos, de error o de carga, posibilidades de acción débiles, incumplimientos de las convenciones de la plataforma y si la pantalla cumple el objetivo que se le ha asignado.
¿Puede revisar capturas de aplicaciones móviles y no solo sitios web?
Sí. Cuando no especificas una plataforma, infiere si se trata de iOS, Android, la web o el escritorio a partir de las señales visuales y aplica las convenciones correspondientes: barras de navegación y áreas seguras en iOS, patrones de Material 3 en Android y comportamiento de formularios y ventanas gráficas en la web. Las capturas de dispositivos son entradas válidas; indícalo si quieres dar prioridad a la zona accesible al pulgar y al tamaño de los objetivos.
¿El Revisor de UI/UX funciona en un teléfono?
Sí. Las revisiones se ejecutan con paridad completa de funciones en la web, iOS y Android, incluido el dictado de voz si prefieres explicar una pantalla hablando en lugar de escribir. Esto es importante cuando el defecto solo aparece en un dispositivo real.
¿Qué precisión tiene la crítica de diseño?
Los hallazgos se basan en principios consolidados —la agrupación de la Gestalt, la ley de Fitts, WCAG 2.2 y las directrices HIG o Material de la plataforma—, no en preferencias estéticas sin explicación. Las preferencias de estilo se identifican como tales. Las afirmaciones sobre contraste se expresan con cautela cuando no es posible leer los valores hexadecimales exactos en una captura comprimida. El revisor pedirá una imagen mejor o un estado faltante en lugar de inventar lo que no puede ver.
¿Puede revisar un flujo completo o solo una pantalla?
Ambas cosas. Una captura de pantalla produce una revisión específica. Varias pantallas añaden coherencia entre pantallas, lógica del flujo y carencias del sistema de diseño —espaciado, tipografía y componentes—. Las iteraciones de una misma pantalla pueden compararse explícitamente para que sepas qué mejoró realmente.
Conclusión
La mayoría de los productos no fracasa porque el radio de una esquina sea incorrecto. Fracasa porque la jerarquía no guía la mirada, porque nunca se diseñaron los estados vacíos y de error, porque el contraste y el tamaño de los objetivos excluyen a una gran parte de las personas usuarias y porque nadie con criterio de nivel de liderazgo revisó la pantalla antes de su lanzamiento.
El Revisor de UI/UX te proporciona ese criterio bajo demanda: introduces una captura y recibes una crítica clasificada por gravedad, con soluciones de causa raíz en lugar de una lista de síntomas. Úsalo en el MVP que está a punto de consolidarse, en el panel antes de la entrega o en la captura del dispositivo que ya parece ligeramente incorrecta.
Prueba el Revisor de UI/UX ahora. Descubre más en Jenova.
Para desarrolladores: El Revisor de UI/UX está disponible mediante programación a través de la API de Jenova: integra la crítica de diseño basada en capturas de pantalla en tu aplicación con una sola llamada a la API. Documentación completa →