Capturas en viewports reales y revisión visual a ciegas con subagentes para interfaces de IA
Un agente que lee su propio JSX y sus clases de Tailwind afirmará encantado que una pantalla parece «limpia y equilibrada», mientras el renderizado real del navegador sufre titulares que saltan a tres líneas, etiquetas grises ilegibles sobre fondos oscuros y una cuadrícula descompensada. Oil UI considera obligatorios el renderizado en un navegador real y la crítica de un subagente sin contexto antes de dar cualquier interfaz por terminada.
Ideas clave
- El código fuente no es la interfaz: evalúa los diseños exclusivamente a partir de los píxeles reales del navegador renderizados en los viewports de destino (1440×900, 390×844, 1920×720).
- El agente que escribió el código está condicionado por sus propias intenciones; crear un subagente nuevo que solo vea las capturas produce una crítica honesta.
- Inspecciona tres vistas: capturas de página completa al 100 % para el ritmo, recortes al 200 % para la alineación y el uso de bordes, e imágenes con el texto desenfocado para el peso de los bloques.
- Las capturas verifican el acabado estático; hacer clic y escribir en la página en ejecución confirma que los estados, paneles laterales y la recuperación de errores funcionan realmente.
npx skills add oil-oil/oil-uiRequiere un modelo capaz de interpretar imágenes y un entorno de navegador local que pueda renderizar y capturar páginas.
Por qué la inspección del código fuente pasa por alto defectos visuales
En el código fuente, una fila flex con justify-between parece ordenada. En un viewport real de 390 píxeles con un título de producto de 32 caracteres y tres botones de acción, esa misma fila aplasta los botones hasta convertirlos en etiquetas altas e ilegibles. Del mismo modo, las clases de color del código no revelan cuándo desaparece el texto secundario sobre un fondo oscuro.
Muchos de los detalles más logrados de la galería de Oil UI dependen del comportamiento exacto del viewport: en Yantu (infoentretenimiento de coche a 1920×720), al acercarse a un giro se amplían las indicaciones de navegación y se atenúan los controles multimedia; en Splitwater (reloj de natación a 198×242, DPR=4), un único número gigante domina la pantalla mojada; en Forkside (lecciones de ajedrez), el movimiento correcto del caballo ilumina dos líneas de ataque simultáneas de la doble amenaza. Solo el renderizado en directo confirma que esos estados funcionan.
| Capa de inspección | Cómo funciona | Qué defectos detecta |
|---|---|---|
| Captura del viewport al 100 % | Capturas a todo lo ancho y de desplazamiento completo a 1440×900 (escritorio) o 390×844 (móvil) | Acciones principales ocultas, alturas de sección monótonas, ritmo de desplazamiento roto y pies de página cortados |
| Recortes de detalles al 200 % | Recortes con aumento de 2× de cabeceras, filas de tablas, campos de formularios y planes de precios | Bordes dobles, columnas numéricas desalineadas, relleno incoherente y texto auxiliar con poco contraste |
| Comprobación de la estructura de bloques desenfocados | Texto desenfocado o reducido para que solo queden visibles las masas espaciales y los acentos de color | Diseños cargados arriba o descompensados, colores de acento que compiten y cuadrículas uniformes de cajas idénticas |
| Recorrido interactivo en directo | Hacer clic, escribir, arrastrar controles y provocar estados de error en el navegador | Botones sin respuesta, elementos emergentes que tapan el contexto crítico, recuperación de validación rota y estados desincronizados |
Cómo funciona la revisión a ciegas de un subagente sin contexto
Pide al agente autor que critique su propia captura y normalmente justificará sus errores porque recuerda el prompt que intentaba satisfacer.
Oil UI rompe ese sesgo de confirmación creando un subagente independiente que no recibe código fuente ni historial de implementación: solo las capturas PNG renderizadas y una frase que explica qué es el producto. Como un primer usuario exigente, el revisor a ciegas señala espacios estrechos, tópicos de IA restantes y contraste deficiente.
Captura imágenes deterministas de todos los estados necesarios
El agente principal abre la página en ejecución en un navegador sin interfaz gráfica y captura la vista predeterminada, los estados de interacción activa y los puntos de interrupción móviles.
Entrega las imágenes a un subagente nuevo sin contexto de código
El revisor inspecciona las capturas según los criterios de legibilidad, jerarquía y eliminación de patrones genéricos de Oil UI, y devuelve una lista concreta de defectos visuales.
Corrige los defectos, elimina elementos superfluos y vuelve a capturar
El agente principal resuelve en el código cada problema detectado y toma una nueva captura para verificar la corrección antes de completar la tarea.
Plantilla de prompt para iniciar una revisión a ciegas mediante capturas
Cuando un borrador de pantalla funcione pero todavía notes que algo no encaja, ejecuta esta pasada de revisión:
Ejecuta una verificación visual de Oil UI y una revisión a ciegas con subagente en la pantalla actual:
1. Abre la página en ejecución en un navegador local y captura pantallas a 1440×900 (escritorio) y 390×844 (móvil), incluidos el estado predeterminado y [estado 1 / estado 2].
2. Crea un subagente nuevo sin contexto de código. Entrégale solo las capturas y el resumen del producto, y pídele que critique: tópicos restantes de plantillas de IA, texto con poco contraste, relleno estrecho, columnas desalineadas y falta de claridad en el foco de la primera pantalla.
3. Corrige todos los problemas señalados por el revisor a ciegas y vuelve a capturar pantallas para confirmarlo.Funciona automáticamente en agentes que admiten subagentes e inspección de imágenes, como Claude Code y Codex.
Ejemplos funcionales y prompts de la galería
Abre las demos en directo a 1440 o 390 píxeles para examinar cómo el modelo y el prompt dieron forma a la interfaz final.
Nightwatch
Supervisión de operaciones y respuesta a incidentes
Una herramienta de supervisión y guardia para un equipo de plataforma de tamaño medio (1440×900), con interfaz en inglés: topología de servicios, gráficos de latencia, tasa de errores y tráfico, despliegues recientes, registros y trazas; durante un incidente, muestra alertas, la persona de guardia y una cronología del incidente. El desarrollo de un incidente es el núcleo: el servicio que falla y los servicios descendentes afectados deben resultar evidentes en la topología. Al arrastrar el intervalo temporal, los gráficos, los marcadores de despliegue y los registros se alinean para que se pueda ver qué despliegue causó el problema. Diseña tres estados: una visión general saludable; un incidente en curso con una alerta y la ruta afectada resaltada en la topología; y registros y trazas abiertos en el pico de errores para identificar el despliegue responsable.
Ver obra y prompt →
Yantu
Sistema de infoentretenimiento del coche
La interfaz principal de la pantalla de infoentretenimiento de un coche (1920×720, legible de un vistazo mientras se conduce), con interfaz en chino: mapa de navegación, música en reproducción, controles de climatización y controles habituales del vehículo. El cambio de prioridades en una misma pantalla es el núcleo de este trabajo: normalmente el mapa domina, mientras la música y la climatización ocupan áreas pequeñas; al acercarse a un giro, la guía se amplía automáticamente y la música cede espacio; al ajustar la climatización, aparece un control deslizante de temperatura y todo lo demás se atenúa. Los botones deben ser lo bastante grandes para pulsarlos con precisión sin mirar. Dibuja el mapa tú mismo en lugar de usar un servicio de mapas real. Colores: fondo azul negruzco nocturno y ruta de navegación azul eléctrico, con ámbar reservado para advertencias y guía de giro. No uses blanco cálido ni beige. Diseña tres estados: circulación, aproximación a un giro y ajuste de climatización. Captura pantallas a 1920×720, DPR=1.
Ver obra y prompt →
Splitwater
App de entrenamiento de natación para reloj
Una app de reloj para registrar entrenamientos en piscina (diseña cada pantalla a 198×242 sin dibujar la caja ni la correa del reloj), con interfaz en inglés: largos, ritmo, frecuencia cardiaca, cuenta atrás de descanso y resumen posterior a la sesión. Un vistazo a la muñeca debe bastar: cada pantalla tiene un número grande como protagonista; el recuento de largos salta brevemente al completar cada largo; durante el descanso, un anillo de cuenta atrás se completa y una vibración indica que es hora de volver al agua. La pantalla se moja, así que usa el giro de la corona para desbloquearla y muestra el estado correspondiente en la interfaz. Colores: pantalla de reloj negro puro, cian de piscina como color principal y números blancos. No uses colores cálidos. Diseña cinco pantallas: natación, cuenta atrás de descanso, bloqueo por agua, pausa y fin, y resumen del entrenamiento. Entrega `index.html` con una pantalla interactiva y `screens.html` con las cinco pantallas una al lado de otra. Captura pantallas a 198×242, DPR=4.
Ver obra y prompt →
Forkside
Lecciones de táctica de ajedrez
Un sitio web para aprender táctica de ajedrez (desde 1440×900, adaptable hasta 390 píxeles de ancho), con interfaz en inglés, para aficionados con puntuación de 800–1600. Enseña una táctica cada vez, como horcas, clavadas, rayos X y ataques a la descubierta, con explicaciones paso a paso sobre el tablero seguidas de algunos ejercicios. El núcleo son las flechas y los resaltados que aparecen en el tablero paso a paso con la explicación. Cuando se hace una jugada correcta, como saltar con el caballo a una casilla de horca, dos líneas de ataque se iluminan a la vez. Una jugada incorrecta debe mostrar la respuesta concreta del rival, no limitarse a decir «incorrecta». Las piezas y el tablero deben estar refinados, con materiales creados mediante generación de imágenes o renderizado 3D en lugar de iconos de piezas predeterminados. Diseña tres estados: explicación de una lección; resolución de un ejercicio; y táctica revelada después de resolverlo.
Ver obra y prompt →Oil UI Pro: hasta 3 rondas de revisión a ciegas con el objetivo de alcanzar una calidad de 9/10
Mientras la Skill gratuita incluye una única pasada de revisión a ciegas, Oil UI Pro ejecuta hasta tres rondas iterativas de crítica a ciegas con subagentes y el objetivo de 9/10, junto con listas de comprobación al 100 %/200 %, bloques con texto oculto y recorridos de navegador contando los clics.
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿Qué ocurre si mi entorno de agente no puede abrir un navegador ni inspeccionar imágenes?
La definición del brief, la orientación por categoría y las reglas contra patrones genéricos de Oil UI siguen ayudando durante la generación de código, pero sin un navegador real e inspección de imágenes el agente no puede ver los píxeles renderizados ni realizar revisiones visuales a ciegas. Para obtener los mejores resultados, combina Oil UI con Playwright o herramientas de navegador local.
¿Por qué inspeccionar recortes ampliados al 200 % además de capturas de página completa?
Las capturas de página completa comprimen las tablas densas y los controles de formulario lo bastante para ocultar desajustes de 1 píxel, bordes que chocan y texto secundario poco definido. Recortar los controles clave al 200 % hace evidentes los errores de microtipografía y espaciado.
¿Qué revela desenfocar u ocultar el texto durante una revisión?
Cuando ya no puedes leer las palabras, dejas de perdonar un diseño deficiente porque el texto suene inteligente. Las vistas de bloques desenfocados muestran de inmediato si la acción principal destaca y si el peso visual está equilibrado en todo el lienzo.
¿Cuántas rondas de revisión a ciegas necesita una pantalla típica?
Una o dos rondas detectan la gran mayoría de los problemas de espaciado, contraste y tópicos en pantallas cotidianas. Para páginas de destino principales o espacios de trabajo complejos, el ciclo de tres rondas de Oil UI Pro eleva notablemente el nivel de acabado.