Comparación de estilos HTML en paralelo frente a un único prompt de interfaz
Pedir a un agente de IA un único borrador de interfaz es como pedir a un diseñador un solo boceto: no tienes forma de juzgar si otra escala tipográfica, ritmo espacial o tono de superficie serviría mejor al producto. Un hábito fundamental de Oil UI es generar un panel HTML de comparación con 3 o 4 direcciones realmente diferenciadas, usando los textos reales de tu producto antes de desarrollar todos los estados de la aplicación.
Ideas clave
- El buen criterio requiere comparación: ver 3 direcciones diferenciadas en paralelo a 1440 o 390 píxeles hace evidentes de inmediato la jerarquía sólida y los malos hábitos.
- Las direcciones reales difieren en composición espacial, voz tipográfica, brillo de las superficies y controles principales, no solo en el color de los botones.
- Cuando elijas una dirección ganadora, respeta plenamente su sistema en lugar de unir fragmentos incompatibles de las opciones descartadas.
- La galería incluye series completas de varias direcciones creadas a partir de briefs idénticos: nueve páginas de Orvo, tres de Atelier Volders y tres de Fonderie Mercier.
npx skills add oil-oil/oil-uiEl panel HTML integrado de comparación en paralelo funciona tanto con viewports de escritorio como móviles en la Skill gratuita.
Por qué el prompt de un único borrador te encierra en máximos locales
Cuando un agente genera una sola pantalla, elige con naturalidad el promedio estadístico más seguro. Si respondes «hazlo más atrevido» o «prueba el modo oscuro», el agente se limita a retocar la misma estructura subyacente, a menudo estropeando por el camino el espaciado y el contraste.
Generar primero un panel de comparación en paralelo abre el espacio de diseño antes de invertir tokens en estados secundarios. Cada dirección candidata utiliza el nombre real de tu producto, los precios reales de los planes y el contenido interactivo real, en lugar del texto de relleno lorem ipsum.
| Producto y brief compartido | Dirección A | Dirección B | Dirección C y otras variaciones |
|---|---|---|---|
| Orvo (creador de sitios web con IA; $0 / $24.99 / $34.99 al mes; orientación de expertos humanos) | Launch Garden (orvo-garden): lienzo lima brillante con un ritmo modular de cultivo | Tandem (orvo-tandem): papel editorial cálido que destaca la colaboración humana | Coastal Workshop (orvo-coast), Open Creative Studio (orvo-studio), The Launch Line (orvo-launch) y 4 más |
| Atelier Volders (taller de Gante que fabrica un taburete de roble de 3 patas en lotes de 24 unidades) | Grain & Tenon (volders-grain): centrado en las vetas de madera secada al aire durante 3 años y la ebanistería | River Timber (volders-hearth): escala cálida junto al hogar e historia del taller de Korenlei | The Wedged Oak (volders-wedge): secciones técnicas de ensamblajes y tabla de especificaciones |
| Fonderie Mercier (fundición familiar de campanas de bronce que produce 18 campanas al mes) | Bronze, with a Voice (mercier-voice): la prueba interactiva de armónicos ocupa el centro | Eighteen Bells (mercier-pour): organizado en torno a los lotes mensuales del horno y las inscripciones | The Tuning Sheet (mercier-bell): libro acústico contenido y notación de frecuencias |
Qué hace que tres direcciones sean realmente distintas
Sin supervisión, un modelo puede entregarte exactamente la misma cuadrícula de tres columnas pintada de azul, verde y morado. Oil UI separa las direcciones en cuatro ejes estructurales (y Oil UI Pro añade una comprobación explícita de solapamiento entre direcciones):
- Composición y punto de entrada diferentes en la primera pantalla
- La dirección 1 puede abrir con tipografía editorial contundente y una calculadora integrada; la dirección 2 abre directamente un banco de trabajo interactivo; la dirección 3 utiliza una división asimétrica.
- Voz tipográfica y relación de escala diferentes
- Contrasta una serif editorial de gran contraste en una candidata con un sistema nítido de grotesca y cifras monoespaciadas en otra.
- Brillo y densidad de superficie diferentes
- Prueba cómo se lee tu contenido real sobre papel cálido, blanco luminoso y definido o una superficie oscura y concentrada apropiada para la categoría.
- Disciplina estricta de una única ganadora después de elegir
- Considera el panel de comparación como un paso de selección claro. Cuando elijas la dirección B, desarrolla todos los estados posteriores dentro de sus reglas, sin reconstruirla con controles de la dirección A.
Plantilla de prompt para generar un panel de comparación en paralelo
Utiliza este prompt siempre que empieces un sitio web nuevo, un flujo de aplicación o el rediseño de una pantalla de referencia:
Usa Oil UI para explorar direcciones de diseño para [nombre y categoría del producto].
- Contenido real del producto: [Incluye tu titular, 3 capacidades principales, precios exactos o campos clave del sector]
- Viewport de destino: [1440×900 escritorio / 390×844 móvil]
Antes de desarrollar todos los estados de producción, genera un panel de comparación con 3 direcciones visuales realmente diferenciadas. Distingue su composición de portada, combinación tipográfica y tono de superficie utilizando nuestro contenido real del producto. Cuando elija una ganadora, perfeccionaremos el flujo completo.Disponible de serie tanto en la Skill Oil UI gratuita como en Oil UI Pro.
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.
Atelier Volders · Veta y espiga
Sitio web de taller de muebles artesanos
El sitio web de Atelier Volders, un taller de ebanistería de dos personas en Korenlei 14, Gante, Bélgica (desde 1440×900, adaptable hasta 390 px de ancho), con interfaz en inglés. Solo fabrican un objeto: De Drievoet, un taburete de tres patas de roble macizo, torneado y ensamblado con cuñas a mano a partir de madera secada al aire durante tres años, producido en un único lote mensual de 24 taburetes. Se ofrece en tres alturas (taburete bajo para chimenea de 32 cm por €240, taburete de comedor y escritorio de 45 cm por €270, taburete de barra de 62 cm con reposapiés de fresno por €310) y tres acabados (roble natural frotado con jabón, roble oscuro fumigado, aceite de linaza hervido y cera de abejas). Los visitantes pueden cambiar la altura y el acabado en tiempo real, explorar el proceso de fabricación de seis semanas, el sello de lote estampado en caliente en la base y el horario de apertura de los sábados, y reservar un taburete del lote actual. No se proporcionan fotos del producto.
Ver obra y prompt →
Atelier Volders · Madera del río
Sitio web de taller de muebles artesanos
El sitio web de Atelier Volders, un taller de ebanistería de dos personas en Korenlei 14, Gante, Bélgica (desde 1440×900, adaptable hasta 390 px de ancho), con interfaz en inglés. Solo fabrican un objeto: De Drievoet, un taburete de tres patas de roble macizo, torneado y ensamblado con cuñas a mano a partir de madera secada al aire durante tres años, producido en un único lote mensual de 24 taburetes. Se ofrece en tres alturas (taburete bajo para chimenea de 32 cm por €240, taburete de comedor y escritorio de 45 cm por €270, taburete de barra de 62 cm con reposapiés de fresno por €310) y tres acabados (roble natural frotado con jabón, roble oscuro fumigado, aceite de linaza hervido y cera de abejas). Los visitantes pueden cambiar la altura y el acabado en tiempo real, explorar el proceso de fabricación de seis semanas, el sello de lote estampado en caliente en la base y el horario de apertura de los sábados, y reservar un taburete del lote actual. No se proporcionan fotos del producto.
Ver obra y prompt →
Atelier Volders · El roble en cuña
Sitio web de taller de muebles artesanos
El sitio web de Atelier Volders, un taller de ebanistería de dos personas en Korenlei 14, Gante, Bélgica (desde 1440×900, adaptable hasta 390 px de ancho), con interfaz en inglés. Solo fabrican un objeto: De Drievoet, un taburete de tres patas de roble macizo, torneado y ensamblado con cuñas a mano a partir de madera secada al aire durante tres años, producido en un único lote mensual de 24 taburetes. Se ofrece en tres alturas (taburete bajo para chimenea de 32 cm por €240, taburete de comedor y escritorio de 45 cm por €270, taburete de barra de 62 cm con reposapiés de fresno por €310) y tres acabados (roble natural frotado con jabón, roble oscuro fumigado, aceite de linaza hervido y cera de abejas). Los visitantes pueden cambiar la altura y el acabado en tiempo real, explorar el proceso de fabricación de seis semanas, el sello de lote estampado en caliente en la base y el horario de apertura de los sábados, y reservar un taburete del lote actual. No se proporcionan fotos del producto.
Ver obra y prompt →
Fonderie Mercier · Bronce con voz
Sitio web de fundición familiar de campanas de bronce
El sitio web de Fonderie Mercier, una fundición familiar de campanas de tercera generación en Quai Saint-Vincent 28, junto al río Saône en Lyon (desde 1440×900, adaptable hasta 390 px de ancho), con interfaz en inglés. Funden un único objeto emblemático en bronce para campanas de 78 % cobre / 22 % estaño, usando moldes de arena de río apisonada: Le Bourdon de Table, afinado en el torno a un tono musical preciso y fundido una vez al mes en un lote fijo de 18 campanas. Se ofrece en tres tamaños y tonos (campana de escritorio Ø 72 mm A4 440Hz €180, campana de patio Ø 96 mm F#4 370Hz €240, campana de pared Ø 124 mm con soporte de hierro forjado D4 293.7Hz €340) y tres pátinas (bronce torneado en bruto, bronce ahumado y cardenillo). Los visitantes pueden escuchar cada tono, cambiar tamaño y pátina, explorar el proceso de fundición en cinco etapas, el registro estampado en frío en la corona y el horario de apertura de los viernes, y preparar una hoja de reserva para la próxima fundición mensual. No se proporcionan fotos del producto.
Ver obra y prompt →Oil UI Pro: comprobaciones de solapamiento entre direcciones y revisión desde varias perspectivas
Oil UI Pro añade comprobaciones automáticas de solapamiento entre direcciones (que evitan simples cambios de paleta) y evaluaciones a ciegas con subagentes para ayudarte a poner a prueba las direcciones candidatas antes de desarrollar pantallas completas.
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿El panel HTML de comparación en paralelo está incluido en la Skill gratuita de código abierto?
Sí. La Skill Oil UI gratuita incluye el panel de comparación en paralelo para viewports de escritorio y móvil. Instálala mediante npx skills add oil-oil/oil-ui y pide a tu agente que proponga direcciones de diseño diferenciadas.
¿Cuántas direcciones debo comparar a la vez?
Tres o cuatro es el punto ideal. Dos opciones suelen resultar demasiado binarias, mientras que más de cuatro diluye el trabajo dedicado a cada candidata.
¿Puedo combinar la paleta de la dirección A con el diseño de la dirección B?
Puedes aplicar una paleta de colores coherente a una estructura de diseño ganadora, pero evita mezclar estilos individuales de tarjetas o escalas tipográficas de direcciones diferentes. Pide al agente que aplique limpiamente la paleta de superficies de la dirección A al diseño de la dirección B y vuelve a verificar el contraste.
¿Qué obras de la galería muestran mejor la exploración de varias direcciones?
Abre las nueve páginas de destino de Orvo, los tres sitios del taller Atelier Volders, los tres sitios de la fundición Fonderie Mercier o las parejas de obras de Vesper, Sonar, Archon y Tempo. Puedes compararlas en pestañas del navegador una junto a otra; en las obras que tienen un brief de tarea registrado, también puedes consultar los prompts.