antislop-ui

¿Qué hace antislop-ui?

Anti Slop: Reglas para Agentes Codificadores de IA. Habilidad de UI y Visual

Parte del sistema antislop. Léase junto con antislop.md (el núcleo). Esta habilidad profundiza en el ámbito de UI/visual: color, diseño, componentes, decoración, flujo estructural y movimiento. Hace referencia a las reglas del núcleo por número y nunca las duplica ni renumera. Cárgala cuando la tarea construya o edite un sitio web, una aplicación web o cualquier interfaz.

Cómo usar esta habilidad

• Cargar junto con antislop.md cada vez que la tarea sea de UI o trabajo visual. El núcleo contiene el mecanismo (la prueba de propósito, los tres niveles, la Puerta de Entrega); esta habilidad tiene la profundidad específica de UI.
• Cada entrada tiene la misma forma: Patrón (el patrón), Por qué (por qué se lee como slop), Solución (qué hacer en su lugar), con la regla del núcleo que lo rige citada como R-XX.
• La Puerta de Entrega del núcleo sigue siendo la puerta. La "Lista de Verificación de Habilidad de UI" al final de este archivo es el suplemento específico de UI que debe ejecutarse junto con ella.

Visual y Color

Gradiente Azul-Púrpura Genérico

• Patrón: degradados de azul a púrpura, de azul a cian, o de púrpura a rosa usados como tratamiento de color principal, o un resplandor de página completa a color.
• Por qué: el tratamiento de color más sobrerrepresentado en los datos de entrenamiento. Señala "sin identidad de marca", no "nuestra paleta", y marca el diseño como generado por IA de un vistazo.
• Solución: extrae la paleta de DESIGN.md o de la identidad propia del producto. Mantén un gradiente solo como función de jerarquía con la razón documentada (R-01). Un gradiente que separa un nivel de otro es artesanía; el mismo gradiente en cada sección es un valor predeterminado.
• La misma familia predeterminada: gradientes estridentes o arcoíris, esquemas de color púrpura y negro, paletas neón o pastel, y orbes radiales borrosos detrás del héroe. Son el mismo patrón con diferentes apariencias: color del modelo predeterminado, no de la marca. Todos están PROHIBIDOS como predeterminados sin propósito (R-01).

Glassmorfismo Excesivo

• Patrón: desenfoque/backdrop-filter en la barra de navegación, tarjetas, modales y barra lateral al mismo tiempo.
• Por qué: el desenfoque elimina la textura y sitúa cada superficie en la misma capa helada, aplanando la jerarquía. Cuando cada superficie es vidrio, nada está en primer plano.
• Solución: trata el vidrio como un acento, no como un rasgo de carácter. Límite de dosis: máximo 1-2 elementos (R-10). La superficie que necesita atención recibe el vidrio; todo lo demás permanece sólido.

Radio de Borde Excesivo

• Patrón: cada elemento tiene forma de píldora: botones, campos de entrada, tarjetas, insignias, modales.
• Por qué: las formas uniformes de píldora borran el lenguaje visual de "esto es un campo de entrada, esto es una tarjeta". El radio se convierte en decoración en lugar de una herramienta de jerarquía.
• Solución: establece un conjunto pequeño de radios en el sistema de diseño y aplícalos deliberadamente (R-11). Un radio generoso en la CTA principal se lee como intencional; el mismo radio en cada elemento se lee como un valor predeterminado.

Sombras Demasiado Suaves

• Patrón: cada componente lleva una sombra grande, por lo que toda la página parece flotar.
• Por qué: cuando todo está elevado, la elevación no comunica nada. La página pierde su plano de tierra y se convierte en suavidad genérica.
• Solución: usa la sombra solo como marcador de elevación y documenta la razón de la elevación (R-12). La mayoría de los elementos deben estar planos; los uno o dos que necesitan elevarse sobre la página llevan la sombra.

Resplandor en Todas Partes

• Patrón: resplandor en tarjetas, botones, iconos, insignias, fondos y bordes simultáneamente.
• Por qué: el resplandor es un amplificador de atención. Aplicado en todas partes no amplifica nada, y es una de las formas más rápidas de parecer "hecho por IA".
• Solución: reserva el resplandor para un máximo de 1-2 elementos importantes como acento de enfoque (R-13). Todo lo demás permanece mate.

Cuadrícula de Fondo

• Patrón: cuadrados de cuadrícula, líneas de plano, papel cuadriculado, cuadrículas de puntos o líneas finas repetidas detrás del contenido.
• Por qué: es una forma predeterminada de hacer que una página plana parezca "técnica" sin hacer ningún trabajo real. Se lee como textura sin intención.
• Solución: usa textura o patrón solo cuando realmente apoye la identidad del producto, con la razón documentada (R-07). Un motivo de identidad real (Parte 3 del núcleo) supera a una cuadrícula estándar cada vez.

Modo Oscuro Predeterminado Sin Razón

• Patrón: toda la página está oscura simplemente porque parece "tecnológica", sin consideración de marca.
• Por qué: oscuro es una decisión, no un valor predeterminado. Forzarlo se lee como seguir una tendencia, no como servir al producto.
• Solución: elige el tema basado en la identidad de la marca, el tipo de producto y la audiencia (R-21). Las herramientas de desarrollo y creativas tienen razones legítimas para el modo oscuro; un producto centrado en contenido generalmente no. Si no hay una razón sólida para un tema fijo, construye un alternador claro/oscuro funcional.

Demasiados Colores en la Paleta

• Patrón: de 5 a 7 colores diferentes en una página sin un sistema de diseño claro.
• Por qué: una paleta dispersa no tiene jerarquía. Cuando cada elemento puede ser de cualquier color, nada se distingue.
• Solución: limita la paleta activa a 2-3 colores centrales + 1 acento (R-29), y deja que uno de los centrales sea la base neutral. La moderación es lo que hace que el acento llegue.

Acento Excesivo

• Patrón: un color de acento en botones, iconos, insignias, enlaces, líneas, fondos y resplandores a la vez.
• Por qué: el acento deja de ser un acento en el momento en que está en todas partes. Se convierte solo en otro color y el diseño pierde su punto focal.
• Solución: el acento pertenece solo al momento clave (un acento deliberado, Parte 3 del núcleo). Cero acentos es estéril; un acento en todas partes es slop. Elige los uno o dos lugares donde importa.

Valor Predeterminado Estéril

• Patrón: blanco plano o casi blanco, bordes grises finos, radio pequeño, sin textura, fuente genérica, sin identidad.
• Por qué: este es el resultado "seguro" de sobrefiltrar sin dirección. No es slop, pero tampoco es diseño: es un vacío donde debería haber un diseño.
• Solución: esto es un problema de dirección, no un problema de filtro. Agrega DESIGN.md o resuelve la Lectura de Diseño (Parte 3 del núcleo), luego sube los diales de vitalidad. La solución nunca es más prohibiciones; es declarar el propósito y agregar energía.

Diseño y Componentes

Diseño de Plantilla Monótono

• Patrón: héroe, subtítulo, 2 CTAs, captura de pantalla, cuadrícula de características, testimonios, preguntas frecuentes, CTA, pie de página, en ese orden, cada vez.
• Por qué: el orden es el valor predeterminado de los datos de entrenamiento, no la narrativa del producto. Las secciones aparecen porque la plantilla las tiene, no porque el contenido las necesite.
• Solución: construye la estructura en torno a las necesidades reales del contenido (R-05, C-3). Si el producto no tiene testimonios, no hay sección de testimonios. El orden de las secciones sigue la historia del producto. Coincide con el dial RHYTHM: si es 3, las secciones varían visiblemente.

Tarjetas de Características Copiadas y Pegadas

• Patrón: tamaño, altura, icono, diseño y relleno idénticos en todas las tarjetas de características.
• Por qué: las tarjetas uniformes aplanan el contenido. Cuando cada característica es una tarjeta con un icono, las características con peso real y las que no lo tienen se ven igual.
• Solución: crea variación que refleje la jerarquía del contenido, con la razón documentada (R-14). No todas las características necesitan ser una tarjeta. La característica principal puede merecer un tratamiento de ancho completo; las de apoyo, una lista.

Cuadrícula Bento

• Patrón: una sección hecha de un mosaico de tarjetas de diferentes tamaños, algunas que abarcan dos columnas o dos filas, llenando el espacio como un tablero embaldosado.
• Por qué: es el diseño de aterrizaje "tipo aplicación" predeterminado de los últimos años, por lo que no señala nada sobre el producto. Cuando cada sección podría ser un bento, el diseño es una plantilla, no una decisión.
• Solución: usa una cuadrícula bento solo cuando el contenido tenga genuinamente elementos de diferentes tamaños para mostrar (R-05). Si cada celda es aproximadamente igual, una cuadrícula simple o una lista es más honesta. El dial RHYTHM decide si las secciones varían en absoluto.

Espaciado Uniforme

• Patrón: el relleno, el margen y los espacios son idénticos en cada sección.
• Por qué: el ritmo es una herramienta, y un solo valor de espaciado lo elimina. Las secciones dejan de relacionarse entre sí; la página se lee como una tira plana.
• Solución: usa el espacio en blanco como estructura (Parte 3 del núcleo) y varíalo con el dial RHYTHM. Establece una escala de espaciado, luego usa diferentes niveles para separar y conectar. El ritmo uniforme es una elección deliberada solo cuando el dial lo dice (R-05).

"Cómo Funciona" Siempre 3 Pasos

• Patrón: icono redondo + número 1, 2, 3 + texto corto, siempre tres pasos, siempre la misma forma.
• Por qué: el proceso real del producto rara vez es una lista ordenada de tres pasos. La plantilla fuerza el proceso a su forma, no al revés.
• Solución: presenta el proceso tal como es realmente (R-05). Tres pasos con iconos redondos está bien si ese es genuinamente el proceso; de lo contrario, usa la forma que tenga el flujo de trabajo real, incluidos dos pasos o cinco.

Barra de Logos "Confían en Nosotros"

• Patrón: una fila de logotipos de empresas genéricos directamente debajo del héroe.
• Por qué: es una afirmación de confianza sin evidencia: logotipos genéricos, sin clientes reales nombrados, sin prueba de uso.
• Solución: solo muestra logotipos reales y verificables (R-18, R-36, C-5). Si el producto aún no tiene esos clientes, no fabriques una barra de logotipos. La prueba social real supera a una genérica cada vez.

Tarjeta de Precios "Más Popular"

• Patrón: el nivel de precio medio siempre resaltado con una insignia de cápsula.
• Por qué: es el patrón predeterminado, lo que significa que no es una decisión. Cuando cada sección de precios lo hace, el nivel resaltado deja de significar algo.
• Solución: resalta el nivel que realmente sirve a los objetivos del producto y escribe por qué (R-31). Si ningún nivel merece énfasis, no resaltes ninguno.
• Tres columnas son parte del patrón: precios mostrados en tres niveles sea cual sea la estructura real, el del medio resaltado. Esa forma es el valor predeterminado, por lo que no es una decisión (R-05). Usa tantos niveles como el producto realmente tenga y resalta el que le sirva.

Demo Sin Producto

• Patrón: la página vende un producto que nunca se muestra funcionando: sin demo real, sin Términos de Servicio, sin Política de Privacidad, solo promesas.
• Por qué: es una demo con la ropa de un producto. Cada afirmación es confianza sin nada detrás, y las páginas legales faltantes son la señal silenciosa de que nada real existe todavía.
• Solución: muestra el producto real funcionando, o di honestamente que aún no se ha lanzado (R-38, C-5). Si la página solicita registros o pagos, los Términos de Servicio y la Política de Privacidad deben existir. Un honesto "próximamente" supera a una demo convincente.

Pie de Página de Plantilla de 4 Columnas

• Patrón: columnas de Producto / Empresa / Recursos / Legal sin variación.
• Por qué: las columnas existen porque las plantillas las tienen, no porque el sitio tenga tantos grupos de enlaces.
• Solución: estructura el pie de página en torno a lo que el producto realmente enlaza (R-05). Una sola columna de enlaces puede ser más útil que cuatro medio vacías.

Ritmo de Sección Uniforme

• Patrón: cada sección es título centrado + subtítulo + cuadrícula de tarjetas idéntica, sin variación.
• Por qué: la composición idéntica hace que las secciones se mezclen y la página se sienta repetitiva y plana.
• Solución: varía la composición con el dial RHYTHM (R-05). Alterna secciones con mucho texto y visuales, diseños asimétricos y simétricos. Una página donde cada sección sigue la misma plantilla es una página diseñada por una plantilla.

Elementos Decorativos

Iconos Genéricos de IA

• Patrón: icono de chispa, estrella, magia, rayo, diamante, cubo, robot u orbe de IA como iconos de características.
• Por qué: estos glifos son el vocabulario genérico de "producto de IA". No comunican nada sobre la característica específica.
• Solución: usa iconos genuinamente relevantes para el contenido, con la relevancia documentada cuando el glifo sea genérico (R-04). Si no existe un icono apropiado, no uses ninguno. La etiqueta de la característica hace el trabajo.

Iconos de Lucide

• Patrón: cada icono proviene de la misma biblioteca de trazo fino y esquinas redondeadas (Lucide o un clon visual), por lo que todos los iconos comparten una apariencia reconocible.
• Por qué: una sola biblioteca de iconos predeterminada hace que los iconos de todos los sitios de IA sean idénticos, por lo que los iconos dejan de decirte algo sobre el producto. Los glifos pueden ser relevantes; el aspecto uniforme de la biblioteca es el patrón.
• Solución: el conjunto de iconos es una elección visual, no un valor predeterminado (R-04). Elige iconos primero por relevancia; luego decide si el peso y el trazo de la biblioteca se adaptan al carácter del producto. Dos iconos que se ven "similares" aún pueden leerse como tuyos si el conjunto es una decisión, no una importación.

Emoji como Decoración

• Patrón: emojis literales dispersos en el texto, encabezados, insignias y botones: 🚀 en un titular, ✅ junto a cada viñeta de característica, 🔥 en una CTA, 📈 encima de un título de gráfico.
• Por qué: el emoji es la abreviatura más ruidosa de "esto fue generado, no escrito". En una UI compite con el contenido por la atención y aplana la voz del producto en el mismo alegre valor predeterminado que cualquier otro sitio de IA.
• Solución: elimina los emojis del texto de la UI. Si un concepto necesita una marca, usa un icono real y relevante con la razón documentada (R-04), o ninguna marca. El texto lleva el significado; el emoji no agrega nada.

Flechas Pequeñas en Cada Botón

• Patrón: → o ↗ colocados en casi todos los botones como decoración pura.
• Por qué: la flecha se convierte en un patrón, no en una señal. Cuando cada CTA tiene una, ninguna apunta a ningún lugar específico.
• Solución: las flechas no son la identidad predeterminada de los botones (R-08). Resérvalas para la acción que genuinamente se beneficia de una señal de dirección, con el tamaño proporcionado y el propósito documentado.

Franja Izquierda de Color

• Patrón: una barra vertical delgada de color en el borde izquierdo de tarjetas, filas de lista o encabezados de sección, utilizada como decoración.
• Por qué: la franja agrega color sin agregar significado. Es la forma más barata de hacer que una tarjeta "parezca diseñada", por lo que aparece en todas partes y no dice nada.
• Solución: la franja es decoración; debe llevar información o irse (R-01, R-31). Un borde izquierdo que marca un estado real (activo, advertencia, nuevo) es una señal. Una franja que existe para parecer diseñada es un valor predeterminado.

Insignias de Cápsula de IA

• Patrón: forma de píldora, borde fino, resplandor, punto pequeño, mayúsculas, que contiene "AI Powered", "Beta", "New".
• Por qué: la combinación de cápsula más resplandor más punto es una insignia autorreferencial que dice "hecho por IA, sobre ser hecho por IA".

… [truncado para la traducción]