De diseño genérico a guiado: cómo escapar del AI Slop en tus páginas web

Si has intentado generar una interfaz con un asistente de IA sin darle reglas concretas, seguro que reconoces el resultado por defecto:

• Encajonamiento recursivo (cajas dentro de cajas): Contenedores exteriores envolviendo a su vez tarjetas con bordes, fondos y paddings duplicados.
• Fuentes genéricas como Inter o Roboto.
• Botones morados o degradados con esquinas redondeadas estándar.
• Espaciados desproporcionados (paddings sin sentido) e infinidad de componentes clónicos.

Este fenómeno se conoce en la industria como AI SlopGlosarioAI SlopTérmino que define la morralla, bazofia o contenido basura generado en masa por modelos de inteligencia artificial sin supervisión ni valor editorial. Proviene del inglés slop (literalmente la comida de desperdicios o sobras que se echa a los cerdos). En la cultura digital representa el sucesor directo del spam: textos inflados, imágenes clónicas, código genérico y relleno algorítmico sin criterio ni alma que saturan internet y provocan el colapso de los propios modelos al retroalimentarse de su propia basura.Ver término completo → ("chatarra visual").

¿De dónde viene el término? Slop (que se traduce como "bazofia" o "comida basura") fue acuñado por la comunidad tecnológica y popularizado en 2024 por desarrolladores como Simon Willison, haciendo un paralelismo con el término spam de los años 90. En desarrollo web, hace referencia a esas interfaces genéricas y sin alma que la IA genera automáticamente por defecto.

El vicio del "Encajonamiento Recursivo": Por qué la IA llena la pantalla de cajas

Uno de los síntomas visuales que más delatan a una interfaz generada por IA es la acumulación compulsiva de contenedores anidados. El modelo tiende a envolver cada sección dentro de una gran tarjeta exterior con borde y fondo, y dentro de ella vuelve a encajonar cada ítem con su propio borde y relleno (padding).

Este encajonamiento recursivo (cajas sobre cajas) genera graves problemas de diseño:

1. Resta espacio útil: Acumular paddings externos en contenedores envolventes comprime el contenido real de la pantalla.
2. Genera ruido visual: Duplicar bordes y capas de fondo rompe la jerarquía natural del flujo web.
3. Crea "sopa de divs": Sobrecarga el árbol DOM y dificulta el mantenimiento del CSS.

Para lograr una interfaz limpia y profesional, debemos prohibir en nuestro contrato de diseño los paddings envolventes redundantes: los elementos de contenido (como los desplegables de un acordeón o las tarjetas de información) deben apoyarse directamente sobre el flujo de la página sin cajas exteriores innecesarias.

Para escapar de esta plantilla predeterminada no hace falta cambiar de framework ni aprender trucos complejos de programación. La solución consiste en aplicar un método de diseño guiado: crear un archivo centralizado llamado DESIGN.md que sirva como fuente de verdad estética para la IA y hacer que cada instrucción de tu proyecto gire estrictamente en torno a él.

Por qué la IA entrega respuestas genéricas: La Trampa de "Un Prompt, Tres Trabajos"

Para entender la solución, primero debemos comprender qué ocurre dentro del modelo cuando le pedimos una pantalla con una frase vaga como "hazme una interfaz moderna y bonita".

Piensa en la IA como en un diseñador que ha estudiado millones de páginas web de todo Internet. Cuando le haces una petición abstracta sin restricciones, le estás pidiendo que tome tres decisiones complejas al mismo tiempo:

1. La dirección de arte: Elegir colores, fuentes, contrastes y personalidad visual.
2. La experiencia de usuario (UX): Decidir la disposición de los elementos y la jerarquía de la pantalla.
3. La arquitectura de código: Escribir el HTML y las reglas CSS que construyen la interfaz.

Al obligar a la IA a asumir los tres roles de golpe en un solo mensaje, el asistente aplica la respuesta estándar por defecto (el "comodín" promedio de su entrenamiento). Elige las fuentes más comunes en la web y las combinaciones de color más habituales para no arriesgarse a darte algo que no te encaje o que falle al compilar.

Ejemplo Práctico: Qué NO Hacer (Prompt Vago) vs. Qué SÍ Hacer (Prompt Guiado)

Para visualizar con absoluta claridad la diferencia entre delegar a ciegas y guiar a la IA, analicemos el comportamiento del modelo ante dos peticiones.

El Caso Erróneo: El Prompt Vago que Genera AI Slop

Cuando un desarrollador escribe una instrucción ingenua sin restricciones estéticas ni contractuales, el asistente aplica la plantilla promedio estándar del mercado (el clásico AI Slop). Puedes hacer clic en Lanzar Prompt para simular la generación. Si vuelves a pulsar Re-lanzar Prompt, verás cómo la falta de contrato provoca que la IA se invente un diseño genérico distinto en cada intento (conmutando entre 3 variantes de AI Slop):

Análisis de los Errores de la Respuesta Generada:

• Tipografías genéricas: La IA recurre a Inter o Roboto (font-sans), desaprovechando la oportunidad de darle identidad visual al proyecto.
• Botón clónico en degradado: El botón utiliza el típico gradiente violeta/índigo (from-indigo-600 to-purple-600) con esquinas redondas infladas (rounded-full), un patrón trillado en miles de plantillas gratuitas.
• Espaciados inflados y desproporcionados: El contenedor usa un padding de 40px (p-10), generando vacíos artificiales que obligan al usuario a hacer scroll innecesario.
• Sombras excesivas: La sombra flotante de gran radio (shadow-2xl) le da un aspecto voluminoso y desalineado con la precisión técnica moderna.

El Caso Correcto: El Prompt Guiado por Tokens y Contrato

En su lugar, observemos qué ocurre cuando redactamos una instrucción atada a las especificaciones de nuestro DESIGN.md y protegida por la arquitectura de tres niveles de AGENTS.md (para un análisis detallado sobre la especificación técnica en 3 capas, consulta nuestra guía sobre Diseño UI guiado para agentes de IA). Pulsa Lanzar Prompt para comprobar cómo, al existir un contrato DESIGN.md, la IA genera de forma 100% determinista el único diseño exacto exigido:

Al comparar ambos enfoques queda al descubierto el principio fundamental: la IA no diseña mal por incapacidad técnica, sino por falta de fronteras de diseño explicitadas en el prompt.

El Método del Diseño Guiado: DESIGN.md como Centro de Gravedad

Para romper esta inercia y conseguir que la IA cree interfaces únicas, la clave está en separar la etapa creativa de la implementación: centralizar toda la identidad visual en un único documento (DESIGN.md) y hacer que todos los prompts de tu flujo de trabajo dependan de él.

Los 5 Pasos para Construir tu Proyecto alrededor de DESIGN.md

1. Desarrollar tu propio DESIGN.md (La Fuente de Verdad)

En lugar de improvisar los colores y las tipografías en cada mensaje del chat, creamos un archivo DESIGN.md en la raíz de nuestro proyecto.

Para que un DESIGN.md sea realmente efectivo, el primer paso indispensable es incluir un bloque de Guardrails de Sistema que restrinja las opciones por defecto mediante reglas de contraste:

Evitemos depender de fuentes genéricas sin personalizar (como Inter o Roboto por defecto)
La razón por la que muchas páginas web generadas por IA parecen idénticas es porque los modelos convergen siempre a este mismo grupo de fuentes estándar. Al definir reglas de tipografía específicas en nuestro contrato DESIGN.md, garantizamos que la IA aplique fuentes con identidad propia alineadas con el proyecto.

A continuación se muestra una especificación completa inspirada en un sistema de diseño profesional de fondo claro:

# DESIGN.md - Sistema de Diseño y Estándares Visuales
 
## 1. Paleta de Colores y Tokens CSS (Tema Lino & Coral / Light Mode)
- `--bg`: #FAF7F2 (Lino suave / Fondo principal claro)
- `--surface`: #FFFFFF (Blanco puro / Fondo de tarjetas y contenedores)
- `--surface-raised`: #F0EAE1 (Superficie elevada / Filas alternas)
- `--accent`: #C84B31 (Coral terracota / Acento principal y botones)
- `--accent-warm`: #2D4263 (Azul noche profundo / Acento secundario y hovers)
- `--text`: #191919 (Texto principal carbón de alto contraste sobre fondo claro)
- `--text-muted`: #686D76 (Texto secundario y etiquetas)
- `--border`: rgba(25, 25, 25, 0.12) (Borde sutil de división)
 
## 2. Sistema Tri-Font y Jerarquía de Contraste Tipográfico
- **Restricción de Fuentes por Defecto:** Prohibido utilizar fuentes genéricas no configuradas (`Inter`, `Roboto`, `Arial` o sustitutos estándar de plantilla).
- **Titulares principales (H1-H3):** `Clash Display` o `Cabinet Grotesk` (tipografía display para titulares destacados, mayúsculas, espaciado amplio).
- **Cuerpo de texto y párrafos:** `Albert Sans` o `Satoshi` (sans-serif de lectura limpia, `font-size: 16px`, `line-height: 1.6`).
- **Texto técnico, notas y Metadatos:** `Fira Code` o `Space Mono` (mayúsculas, `letter-spacing: 0.1em`, `font-size: 0.75rem` para botones, fechas, etiquetas y eyebrows).
- **Regla del Contraste de Pesos:** Exigir diferenciación clara entre el peso de los titulares (negritas peso `700`/`800`) frente al cuerpo de texto (`300`/`400`) y saltos de escala proporcional (ej. H1 de 48px frente a cuerpo de 16px).
 
## 3. Geometría de Fondos (Escapar del Cliché de la Cuadrícula Sutil)
- **Evitar la Trampa del Fondo por Defecto:** Prohibido el uso repetitivo de cuadrículas sutiles (*subtle grids*) o micro-degradados radiales de luz que la IA coloca en todas las pantallas.
- **Geometrías Alternativas:** Cuando se requiera textura de fondo, exigir patrones distintivos en CSS como tramas de **octágonos**, **patrones triangulares**, **líneas diagonales alternas** o **tramas isométricas**, manteniendo una opacidad ultra-baja (`0.03` - `0.05`).
 
## 4. Tarjetas y Contenedores (`Cards & Containers`)
- **Fondo y Bordes:** Fondo `var(--surface)` sobre `--bg` lino, con borde sutil `1px solid var(--border)` y esquinas redondeadas de 4px (`border-radius: 4px`).
- **Definición Estructural (Evitar Sombras Infladas):** Evita las sombras muy difuminadas (`shadow-lg` o `shadow-xl`), ya que le dan a la interfaz el aspecto de plantilla genérica por defecto. Para mantener una estética limpia y de alta precisión, se define la separación visual mediante un borde sutil `1px solid var(--border)` o sombras muy contenidas (`box-shadow: 0 2px 8px rgba(25, 25, 25, 0.04)`).
- **Efecto Hover en Tarjetas:** Elevación leve `transform: translateY(-2px)` con acento de borde `border-color: var(--accent)` o sombra `box-shadow: 0 6px 16px rgba(45, 66, 99, 0.08)`.
- **Padding Interno Compacto:** Usar paddings responsivos ajustados `p-4` (1rem / 16px en escritorio) y `p-3` (0.75rem / 12px en móvil). Prohibidos los paddings vacíos de 32px o 48px.
- **Integración de Iconos:** Ubicar los iconos directamente al lado del título (`flex items-center gap-2`), prohibido colocar iconos dentro de cajas o contenedores independientes con fondos tenues.
 
## 5. Elementos Interactivos, Botones y Geometría
- **Botones Profesionales (Border Radius 4px):** Fondo `var(--accent)`, texto claro `var(--surface)` en `Fira Code` mayúsculas, bordes sutiles de 1px y esquinas redondeadas ajustadas a 4px (`border-radius: 4px`). Prohibidos recortes poligonales agresivos y botones redondeados genéricos (`rounded-full`).
- **Efecto Hover en Botones:** Elevación sutil `transform: translateY(-2px)` con sombra `box-shadow: 0 4px 12px rgba(45, 66, 99, 0.15)`.
- **Acordeones y FAQs:** Uso exclusivo de bloques accesibles `<details>` y `<summary>` con bordes sutiles `var(--border)` e icono indicador animado.
 
## 6. Estructura de Tablas de Datos (Con Divs y Grid CSS)
- **Tablas Mínimas de Alta Densidad:** Maquetación compacta de filas en rejilla Grid.
- **Cero etiquetas `<table>` HTML:** Las tablas se maquetan mediante contenedores `<div>` con rejilla CSS (`display: grid`).
- **Cabecera de Tabla:** Fondo `var(--accent)`, texto claro en `Fira Code` mayúsculas (`text-white font-mono`).
- **Filas de Datos:** Alternancia de fondos claros entre `var(--bg)` y `var(--surface-raised)`, separadas por un borde superior `1px solid var(--border)`.
  - Celda izquierda (Etiqueta/Proyecto): `font-albert text-sm text-text font-medium`.
  - Celda derecha (Estado/Metadato): `font-mono text-xs text-text-muted`.
 
## 7. Densidad de Información y Layout Compacto
- **Espaciados Ajustados:** Padding interno máximo de `1rem` (16px) en contenedores principales. Prohibidos los márgenes y paddings inflados vacíos (32px o 48px en tarjetas).
- **Fuentes Utilitarias Pequeñas:** Metadatos y etiquetas reducidas a `0.75rem` (12px) para permitir listados densos sin necesidad de scroll excesivo.
 
## 8. Movimiento, Transiciones y Accesibilidad
- **Micro-interacciones:** Transiciones fluidas en CSS nativo (`transition: all 0.2s ease`).
- **Respeto a Accesibilidad:** Desactivar todas las animaciones con la regla `@media (prefers-reduced-motion: reduce)`.

Demostración Real: Un Diseño Sencillo y Fiel a DESIGN.md

Sin necesidad de recurrir a prompts complejos de miles de palabras ni a fuegos artificiales innecesarios, a continuación se muestra el resultado real de una web creada por la IA al exigirle cumplir de forma directa las directrices de nuestro DESIGN.md:

Análisis de Coherencia Visual con DESIGN.md:

1. Respeto a la Paleta de Colores Exigida:

   • Fondo principal en lino suave (#FAF7F2) que le otorga una calidez de imprenta.
   • Botones principales y destacados en coral terracota (#C84B31).
   • Bloque inferior (footer) en azul noche profundo (#2D4263) con texto claro en alta legibilidad.

2. Jerarquía Tipográfica Tri-Font:

   • Titulares (Clash Display): Los titulares ("DESIGNING VENTURES", "PROCESO DE DESARROLLO", "MODELOS DE INVERSIÓN") usan mayúsculas audaces y un tracking amplio con enorme presencia.
   • Cuerpo de texto (Albert Sans): Párrafos limpios y legibles para las descripciones.
   • Metadatos y UI Técnica (Fira Code): Utilizada estrictamente para las etiquetas utilitarias en mayúsculas (UBICACIÓN: Zaragoza/Madrid/Barcelona, SUPERFICIE, ESTADO, precios en €/min y menú del footer).

3. Estructura de Tarjetas y Botones:

   • Tarjetas: Sin sombras flotantes infladas ni efectos excesivos. Bordes limpios, paddings ajustados y rejilla interna compacta para los datos técnicos de cada proyecto.
   • Botones: Botones sobrios con border-radius: 4px en coral terracota (APLICAR AHORA, INICIAR PROYECTO) y variantes suaves para secundarios (VER DETALLES, CONTACTAR).

Este ejemplo demuestra el objetivo fundamental del método: no se trata de inventar una pantalla recargada por pura magia visual, sino de demostrar que la IA construye exactamente lo que le hemos exigido en el contrato visual, logrando una interfaz limpia, legible y 100% coherente con nuestro DESIGN.md.

2. Crear un contrato de desarrollo que blinde el archivo (AGENTS.md)

En conversaciones largas, la IA tiende a olvidar las instrucciones del inicio debido al desplazamiento de contexto. Para evitar que vuelva a las fuentes genéricas a mitad de proyecto, creamos un archivo AGENTS.md (o .cursorrules) que actúa como System PromptGlosarioSystem PromptInstrucción de nivel superior proporcionada a un modelo de inteligencia artificial antes de procesar las peticiones del usuario. Establece las reglas de comportamiento, restricciones de estilo, contexto arquitectónico y contratos de diseño (como archivos AGENTS.md o CLAUDE.md) que el agente debe respetar estrictamente durante toda la sesión de interacción.Ver término completo →. Su función principal es obligar a la IA a consultar DESIGN.md antes de generar código (para un desglose completo sobre la arquitectura de contratos en 3 capas, consulta nuestra guía en la sección de conocimiento sobre Diseño UI guiado para agentes de IA).

¿Por qué utilizamos etiquetas estilo XML en AGENTS.md?

1. Aislamiento de Contexto (Context Scoping): Los modelos de lenguaje modernos (como Claude o GPT) están entrenados para procesar etiquetas XML. Delimitar las instrucciones dentro de etiquetas de sistema (por ejemplo, <web_designer_rules>) le indica al asistente que ese contenido es un contrato rígido de comportamiento y no una simple sugerencia conversacional.
2. Anclas de Atención (Attention Anchoring): Las etiquetas de apertura y cierre evitan que las reglas clave (como consultar DESIGN.md o no usar márgenes inflados) se diluyan a medida que la conversación se alarga.
3. Referenciación Modular: Te permite invocar reglas concretas en el chat simplemente diciendo "Construye este componente respetando el contrato de AGENTS.md y los tokens de DESIGN.md".

<!-- Ejemplo de instrucción en el prompt para vincular el contrato: -->
"Revisa el archivo `AGENTS.md` antes de escribir cualquier componente. Recuerda la regla de oro: todo color, tipografía, geometría de fondos, estilo de tarjeta y estructura visual debe provenir estrictamente de las reglas declaradas en `DESIGN.md`."

3. Fijar el sistema de estilos consumiendo DESIGN.md

Una vez definido tu DESIGN.md, no dejes que la IA elija librerías al azar ni inyecte colores hardcodeados en el código. Exígele de forma explícita que construya los elementos consumiendo las reglas declaradas en tu documento (incluidas las tarjetas y las tablas con divs en grid).

<!-- Mal (Prompt vago): -->
"Hazme una tarjeta de producto para la portada."
 
<!-- Bien (Prompt atado a DESIGN.md): -->
"Construye una tarjeta de producto usando el estilo definido en la sección 4 de `DESIGN.md`: fondo `--surface`, borde sutil `var(--border)`, padding compacto de 1rem, esquinas `border-radius: 4px` y el icono alineado horizontalmente junto al título en fuente Clash Display sin contenedores tenues independientes."

4. Sustituir adjetivos por referencias exactas a DESIGN.md

Palabras como "elegante", "limpio" o "impactante" no significan nada para una máquina. Para obtener exactamente lo que quieres, sustituye los adjetivos ambiguos por referencias directas a las secciones de tu DESIGN.md.

<!-- Mal (Prompt basado en adjetivos): -->
"Hazme un botón moderno, elegante y limpio con una sombra suave."
 
<!-- Bien (Prompt referenciando DESIGN.md): -->
"Crea un botón principal utilizando la fuente Fira Code de `DESIGN.md`, fondo `--accent` (coral), texto claro `--surface`, esquinas redondeadas sutiles de 4px (border-radius: 4px) de la sección 5 y la elevación hover descrita en el documento."

5. Micro-interacciones y densidad compacta atadas a la base

No pidas "animaciones chulas" que carguen librerías pesadas en JavaScript. Pídele micro-interacciones en CSS nativo y diseños compactos que respeten los paddings ajustados declarados en tu DESIGN.md.

<!-- Mal (Prompt vago): -->
"Añade efectos visuales e interacciones a los bloques desplegables."
 
<!-- Bien (Prompt de movimiento y estructura atado a DESIGN.md): -->
"Construye la sección de preguntas frecuentes usando bloques accesibles details y summary con bordes sutiles `--border`, paddings compactos de 1rem y una transición suave en CSS según la sección 5 y 7 de `DESIGN.md`. Incluye la regla prefers-reduced-motion."

Ejemplo Práctico: El Contrato en AGENTS.md que protege DESIGN.md

A continuación se muestra un ejemplo de regla de sistema estructurada en bloques XML para tu archivo AGENTS.md o CLAUDE.md. Su objetivo es actuar como un "guardián" que impide que la IA se salga de las especificaciones de tu DESIGN.md:

<system_directives>
  <web_designer_rules>
    Eres un diseñador web y desarrollador frontend de élite enfocado en la artesanía visual, la densidad de información y el respeto estricto a las guías de estilo.
 
    REGLAS DE ORO DEL PROYECTO:
    1. PROHIBICIÓN DE CLASES UTILITARIAS GENÉRICAS (SISTEMA DE VARIABLES):
       - Antes de escribir cualquier componente HTML o CSS, DEBES leer y consultar el archivo `DESIGN.md`.
       - Queda estrictamente prohibido hardcodear colores hex, inventar tipografías (prohibido Inter, Roboto, Outfit, Plus Jakarta Sans, JetBrains Mono, Space Grotesk) o usar clases utilitarias genéricas fuera de las declaradas en `DESIGN.md`. Todo el estilizado debe realizarse mediante Vanilla CSS o SCSS nativo.
    2. DENSIDAD DE INFORMACIÓN Y ODIOSA PROHIBICIÓN DE PADDINGS EXCESIVOS:
       - Queda estrictamente prohibido el uso de paddings o márgenes inflados (ej. 32px, 48px o 64px dentro de tarjetas).
       - Los contenedores deben ser compactos e intensos: padding interno máximo de 1rem (16px) en escritorio y 0.75rem (12px) en móvil. El espacio visual debe aprovecharse al máximo, emulando la precisión utilitaria de un IDE técnico.
    3. GEOMETRÍA DE FONDOS (NO A LAS CUADRÍCULAS SUTILES GENÉRICAS):
       - Prohibido el uso del recurso trillado de cuadrículas sutiles o micro-degradados radiales de luz por defecto. Exigir geometrías alternativas como tramas de octágonos, patrones triangulares o líneas isométricas en CSS nativo con opacidad reducida.
    4. ESTÁNDAR DE TARJETAS Y CONTENEDORES (CARDS):
       - Fondo `--surface`, borde sutil `var(--border)` y esquinas redondeadas sutiles de 4px (`border-radius: 4px`).
       - Iconos alineados horizontalmente al título (`flex items-center gap-2`), prohibido envolver iconos en cajas cuadradas tenues independientes.
    5. BOTONES Y GEOMETRÍA PROFESIONAL (BORDER-RADIUS 4PX):
       - Prohibido el uso de recortes poligonales clip-path bruscos o esquinas infladas (rounded-full).
       - Botones e interactivos deben usar esquinas redondeadas sutiles de 4px (`border-radius: 4px`), fondo `--accent`, texto `Fira Code` y borde sutil de 1px.
    6. TABLAS DE DATOS EN DIVS GRID:
       - Queda prohibido usar <table> HTML o estilos inline. Las tablas se maquetan obligatoriamente con divs en grid, alternando filas `--bg` y `--surface-raised` con cabeceras `--accent`.
    7. ACCESIBILIDAD Y MOVIMIENTO:
       - Utiliza animaciones en CSS nativo respetando siempre la regla `@media (prefers-reduced-motion: reduce)`.
  </web_designer_rules>
</system_directives>

Profundiza en la Documentación Técnica

Si quieres ver una implementación completa con código de este sistema de diseño (variables HSL, patrones poligonales con clip-path y animaciones CSS), puedes consultar nuestra guía completa en la sección de conocimiento: Sistema de Diseño Guiado para Agentes de IA.