Cómo corregir interfaces genéricas de IA: una lista de simplificación para agentes de programación
Sin orientación, los modelos de lenguaje convergen en los mismos hábitos reconocibles de interfaz: una etiqueta luminosa sobre cada encabezado, tarjetas dentro de tarjetas, bordes izquierdos de color de 4 píxeles e indicadores inventados de «+128 % de eficiencia» en una esquina. Eliminar ese aspecto genérico de IA no consiste en añadir más sombreadores, sino en suprimir esos patrones predeterminados y basar el diseño en material real del sector.
Ideas clave
- Detecta pronto los patrones reveladores de la IA: etiquetas superiores en todas partes, barras de acento izquierdas de 4 píxeles, tarjetas con triple anidación, etiquetas en mayúsculas con mucho tracking y porcentajes KPI inventados.
- Sustituye las cajas por alineación y espaciado: si dos elementos ya se perciben como un grupo por su proximidad y escala tipográfica, elimina el envoltorio exterior.
- Basa cada cifra en la lógica real del producto (precios reales de los planes, tamaños de lote o latencias en milisegundos), no en estadísticas de marketing de relleno.
- Aplica las listas de simplificación y legibilidad de Oil UI a capturas de navegador al 100 % y al 200 % antes de publicar.
npx skills add oil-oil/oil-uiProporciona a tu agente de programación reglas integradas contra patrones genéricos y comprobaciones de revisión visual.
Seis hábitos que delatan de inmediato una interfaz de IA sin editar
Lo que se conoce como «AI slop» rara vez es un solo color inadecuado: es un conjunto de elementos de relleno que el modelo inserta cuando no sabe qué debe tener peso visual. Eliminar estos seis patrones cambia inmediatamente la sensación de una página:
| Hábito predeterminado de la IA | Por qué perjudica a la interfaz | Sustitución y simplificación de Oil UI |
|---|---|---|
| Una etiqueta redondeada sobre cada encabezado de sección | Doce etiquetas a lo largo de una página aplanan la jerarquía y hacen que nada parezca importante | Entra directamente en las secciones con un encabezado o número claro; reserva las etiquetas para estados reales en directo |
| Tarjetas dentro de tarjetas con bordes izquierdos de color de 4 píxeles | El relleno acumulado y los bordes paralelos desplazan el contenido real | Elimina los envoltorios exteriores de las tarjetas; agrupa el contenido con alineación de cuadrícula, espacio en blanco y líneas divisorias finas |
| Degradados de neón morado/índigo y cristal esmerilado por todas partes | Aplica la misma paleta de criptomonedas/SaaS a talleres de madera, clínicas y herramientas de desarrollo | Deriva los colores de superficie y acento del sector (roble natural y lino, bronce oscuro, papel y tinta) |
| Etiquetas de relleno inventadas como «+240 % de velocidad» o «99.98 % de precisión» | Los visitantes detectan las cifras falsas de inmediato y pierden la confianza en el producto real | Muestra solo cifras genuinas del producto (dimensiones de taburetes en cm, lote de 24 unidades, filas reales de facturas) |
| Tres tarjetas idénticas del mismo ancho con iconos lineales en círculos | La fila de tres tarjetas «Rápido / Inteligente / Seguro» es el tópico característico de los prompts de una sola pasada | Utiliza diseños asimétricos o coloca un control interactivo funcional directamente en el lienzo |
| Texto gris sobre gris con poco contraste y etiquetas diminutas en mayúsculas | Parece ordenado en miniatura, pero cansa la vista durante la lectura real | Garantiza un contraste legible, una medida cómoda de 55–75 caracteres y cuatro tamaños tipográficos claros |
Cómo eliminar ruido: primero los bordes, después la escala tipográfica y el aire
Abre Fieldwork Type, Atelier Volders · Grain & Tenon o TRACE (scent) en la galería. Observarás que rara vez envuelven el contenido en cajas redondeadas con sombra y, aun así, cada sección se distingue con claridad. Esa claridad procede de tres fundamentos:
- Utiliza menos tamaños de letra con un contraste más marcado entre ellos
- Cuatro tamaños diferenciados (titular principal, encabezado de sección, cuerpo de texto y pie/metadatos) pueden sostener toda una aplicación. Evita dispersar 11, 12, 13, 14 y 15 píxeles por la misma vista.
- Elimina la mitad de los bordes y comprueba si el diseño sigue funcionando
- Durante la revisión, quita los bordes de los contenedores y los fondos uno a uno. Si la alineación izquierda y el ritmo vertical ya separan los grupos, no vuelvas a poner la caja.
- Deja que los controles funcionales sustituyan a los iconos decorativos
- En lugar de dibujar un icono de escudo junto a un párrafo sobre licencias flexibles, muestra las casillas reales de licencia Desktop / Web / App y deja que el precio se actualice al hacer clic.
Un bloque de prompt contra patrones genéricos que puedes añadir a cualquier brief
Además de instalar Oil UI, puedes incluir estos límites explícitos al escribir prompts para tu agente de programación:
Aplica los estándares de Oil UI y haz cumplir estas reglas de simplificación:
1. No coloques etiquetas redondeadas sobre los encabezados de sección, no uses bordes de acento izquierdos de color de 4 píxeles y evita los degradados brillantes morados/azules predeterminados.
2. No inventes métricas de marketing de relleno (como «+128 %» o «99.9 % de tiempo de actividad») ni tarjetas genéricas de tres columnas con iconos y los textos «Rápido / Inteligente / Seguro».
3. Evita anidar tarjetas dentro de tarjetas; crea jerarquía con alineación de cuadrícula, contraste tipográfico, espacio en blanco generoso y divisores sutiles de 1 píxel.
4. Captura pantallas a 1440×900 y 390×844 y elimina cualquier borde o envoltorio cuya supresión no reduzca la claridad.Funciona mejor cuando Oil UI se instala mediante npx skills add oil-oil/oil-ui.
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.
Fieldwork Type
Fundición de tipos independiente
El sitio web de una fundición de tipos independiente (desde 1440×900, adaptable hasta 390 px de ancho). La primera pantalla presenta una tipografía insignia: los visitantes pueden escribir su propio texto y ajustar el tamaño, el peso y la anchura. Más abajo aparecen la tabla de pesos de la familia, el juego de caracteres, ejemplos de uso y licencias según la finalidad (escritorio, web y app), que pueden añadirse al carrito. El probador de tipos y el selector de licencias son el corazón de esta pieza: la composición cambia mientras escribes y el precio de la licencia se actualiza con cada opción. Diseña la primera pantalla, el panel del probador desplegado y la selección de licencias.
Ver obra y prompt →
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 →
Vesper
Consola de facturación por uso de API
Diseña una consola de facturación por uso de API y de facturas de clientes para equipos de IA y herramientas de desarrollo, con interfaz en inglés y una ventana de escritorio de 1440×900. Los usuarios pueden gestionar planes de suscripción y uso de API en vivo, revisar importes pendientes y excepciones de facturación del ciclo actual, filtrar clientes o facturas por estado y umbral de uso, y abrir un registro para inspeccionar partidas, cronologías de pagos y Webhook y cargas de eventos. Incluye reintentos de pago, ajustes de cuota y exportación de facturas. Implementa tres estados clave: el espacio de trabajo cotidiano con tendencias de ingresos y uso, listas de clientes o facturas y filtrado en vivo; una vista de detalle de factura con excepción que muestre el desglose de uso, la cronología de estado y acciones de recuperación; y una paleta rápida de comandos. Entrega un `index.html` que funcione sin conexión y captura `shots/desktop.png`, `shots/state-1.png` y `shots/state-2.png` a 1440×900, DPR=2.
Ver obra y prompt →
TRACE
Tienda de marca de perfumes
Una tienda en línea para una marca de perfumes de nicho. Construye la página de inicio de la tienda y la página de detalle de un perfume.
Ver obra y prompt →Oil UI Pro: listas completas contra patrones genéricos y simplificación con aumento del 200 %
Oil UI Pro incluye la lista completa para eliminar hábitos predeterminados de IA, comprobaciones de legibilidad con aumento del 100 %/200 % y pasadas de simplificación línea por línea supervisadas por un subagente revisor sin contexto.
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿Por qué decir a una IA «no hagas que parezca hecho con IA» rara vez funciona por sí solo?
Porque el modelo no relaciona la frase «parece hecho con IA» con decisiones concretas de DOM y CSS. Lo que cambia el resultado es nombrar los causantes exactos —etiquetas superiores, relleno de tarjetas anidadas, indicadores KPI inventados, tríos de iconos del mismo ancho— y ofrecer alternativas estructurales concretas.
Si dejo de envolverlo todo en tarjetas, ¿cómo separo las secciones?
Utiliza cuatro herramientas más limpias: 1) una jerarquía clara de espaciado vertical (por ejemplo, 96 píxeles entre secciones frente a 20 dentro de un grupo); 2) cambios sutiles de tono de superficie a todo lo ancho; 3) un único borde superior de 1 píxel junto a una etiqueta de sección a la izquierda; o 4) divisiones asimétricas en dos columnas.
¿Cuándo es realmente apropiada una etiqueta redondeada?
Cuando comunica un estado variable y en directo que el usuario necesita detectar, como «Pago fallido» en una tabla de facturación o «Quedan 3 taburetes en el lote de abril». Si una etiqueta solo repite el tema de la sección sobre un H2, elimínala.
¿Cuál es la forma más rápida de detectar restos de plantillas de IA en una página?
Aleja la vista al 50 % o desenfoca el texto. Si la página parece una pila uniforme de rectángulos redondeados y bloques simétricos de tres columnas, los patrones de plantilla todavía dominan el diseño.