Sistema de Diseño Guiado para Agentes de IA: Guía Definitiva de Prompting Frontend

Cuando los desarrolladores encomiendan a un agente de inteligencia artificial la generación de una interfaz de usuario mediante prompts imprecisos ("crea un diseño moderno y atractivo"), el modelo recurre al promedio estadístico de sus datos de entrenamiento. El resultado suele ser lo que la industria denomina 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 →: maquetaciones con fuentes neutras por defecto, degradados morados sobre fondo blanco, paddings excesivos e inflados que vacían la pantalla, y utilidades atómicas clónicas.

Para transformar la generación de interfaces de un proceso aleatorio a uno guiado y determinista, es preciso establecer un contrato claro basado en tecnicas avanzadas de prompting estructural, la separación de responsabilidades y la centralización de las directrices en archivos de referencia.

Psicología del LLM Frontend: Por qué Fallan los Prompts Convencionales

Para redactar prompts efectivos dirigidos a agentes de código, primero debemos comprender qué ocurre internamente en un modelo de lenguaje (LLM) durante la generación de interfaces.

La Trampa de los Adjetivos Abstractos

Palabras como "elegante", "moderno", "limpio" o "profesional" carecen de representación geométrica o cromática exacta en el espacio vectorial del modelo. Al recibir estos adjetivos, la IA selecciona los nodos visuales con mayor frecuencia estadística en su conjunto de entrenamiento: fuentes como Inter o Roboto, esquinas redondeadas estándar (rounded-xl) y paletas de azul o morado.

Pérdida de Atención por Desplazamiento de Contexto (Context Drift)

En conversaciones extensas o sesiones de desarrollo largas, el modelo sufre una degradación paulatina de la atención. Si las reglas visuales no están ancladas en un contrato persistente o protegidas por delimitadores claros, la IA tiende a recaer progresivamente en sus valores por defecto a medida que avanza la sesión.

Arquitectura de la Especificación de Diseño en 3 Niveles

El error fundamental al interactuar con modelos generativos es solicitar que realicen simultáneamente la dirección creativa, la exploración de maquetación y la escritura del código fuente. Para aislar estas responsabilidades, se aplica una arquitectura de prompting en tres niveles de abstracción.

¿Por qué una Arquitectura de Cebolla?
En la arquitectura de cebolla (Onion Architecture), el Núcleo (en el centro) contiene el resultado final a producir: el código frontend guiado. Las capas exteriores actúan como escudos protectores y filtros que condicionan paulatinamente el comportamiento del agente:

1. Capa Exterior (Nivel 0 - AGENTS.md): Es el System Prompt persistente del repositorio. Actúa como la coraza exterior que bloquea el comportamiento genérico de la IA a nivel global.
2. Capa Intermedia (Nivel 1 - DESIGN.md): Filtro estético que restringe la paleta, la tipografía y la geometría mediante tokens CSS nativos.
3. Capa Interior (Nivel 2 - Prompts XML): Instrucciones ejecutivas de componente pegadas al núcleo.

Nivel 0: Directivas de Repositorio (AGENTS.md)

El archivo AGENTS.md o CLAUDE.md actúa como el 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 → persistente. Su función es condicionar el comportamiento general del agente, prohibiendo el uso de soluciones por defecto y obligando a la consulta previa de DESIGN.md.

Nivel 1: Tokens y Sistema Visual (DESIGN.md)

Un documento Markdown centralizado en la raíz del repositorio donde se formaliza la paleta semántica, la jerarquía tipográfica (sistema Tri-Font), las reglas de geometría (bordes, recortes) y los límites estricto de espaciado.

Nivel 2: Prompts de Componente y Vista

Instrucciones específicas enviadas al agente durante la sesión de codificación, las cuales nunca improvisan estilos sino que referencian de forma explícita las secciones de DESIGN.md.

Técnicas Avanzadas de Prompting Estructural para Interfaz de Usuario

Para garantizar que el agente respete la identidad visual y no genere código redundante, se deben aplicar tres patrones esenciales de prompting técnico.

1. Encapsulación por Etiquetas XML (Context Scoping)

Los modelos avanzados responden con extrema precisión a la delimitación de bloques mediante etiquetas XML. Encapsular las reglas dentro de <ui_contract> o <web_designer_rules> crea una ancla de atención rígida que impide que las prohibiciones clave se diluyan.

<ui_contract>
  <style_system>
    - Utilizar únicamente variables CSS nativas declaradas en :root (var(--bg), var(--surface), var(--accent)).
    - Prohibido utilizar clases utilitarias atómicas sueltas o hardcodear códigos hexadecimales.
  </style_system>
 
  <style_guardrails>
    - PROHIBICIÓN TIPOGRÁFICA ABSOLUTA: Prohibido usar Inter, Roboto, Outfit, Plus Jakarta Sans o JetBrains Mono.
    - PROHIBICIÓN DE PADDINGS INFLADOS: Ningún contenedor o tarjeta puede superar 1rem (16px) de padding interno.
  </style_guardrails>
</ui_contract>

2. Guardrails y Restricciones Visuales Explícitas (System Constraints)

En el desarrollo de software y maquetación frontend mediante vibe coding (utilizando herramientas como Cursor, v0, Lovable o Bolt.new), el término "Negative Prompting" es una imprecisión conceptual. A diferencia de los modelos generativos de imagen (como Stable Diffusion o Midjourney), donde existe un parámetro técnico exclusivo (negative_prompt) para restar píxeles no deseados durante el muestreo, los modelos de lenguaje (LLMs) basados en texto no procesan prompts negativos de forma efectiva. En procesamiento de lenguaje natural, los LLMs tienden a ignorar las negaciones sueltas ("no uses sombras" o "no uses Inter") si no están enmarcadas dentro de una regla de contraste estructurada.

Para evitar que la IA caiga en la inercia estadística del AI Slop, en el desarrollo frontend no se usan prompts negativos, sino dos mecanismos principales:

1. Guardrails de Sistema (AGENTS.md / .cursorrules): Instrucciones automáticas a nivel de repositorio que bloquean las malas prácticas de diseño antes de escribir cualquier prompt conversacional.
2. Instrucciones por Contraste (Ban & Substitute): En lugar de prohibiciones abiertas, se define en DESIGN.md la sustitución explícita del vicio por defecto por un token del sistema de diseño (ej. "Prohibido el uso de fuentes Inter/Roboto; sustituir obligatoriamente por el sistema Tri-Font").

Desglose de Restricciones por Contraste en Nuestro Ejemplo

A continuación se muestra cómo cancelamos en nuestro ejemplo cada decisión genérica por defecto mediante las reglas de contraste en DESIGN.md:

3. Prompting de Inyección de Tokens Nativos (Vanilla CSS vs. Tailwind)

Esta técnica consiste en obligar al agente de IA a consumir exclusivamente las decisiones de diseño abstraídas en variables CSS nativas (var(--token)), desterrando la improvisación de valores hardcodeados (códigos hexadecimales o píxeles sueltos) y clases utilitarias de frameworks externos.

Origen y Genealogía de los Términos

Para comprender la potencia de esta técnica en la ingeniería de prompts, conviene analizar sus tres cimientos conceptuales:

1. Design Tokens (Tokens de Diseño): Término formalizado en 2014-2015 por Jina Anne y el equipo de diseño de Salesforce al construir el Salesforce Lightning Design System. Un token es la unidad atómica mínima de decisión visual (un color, una fuente, una sombra) abstraída bajo un nombre semántico (ej. --accent-primary en lugar de #C84B31).
2. Variables CSS Nativas (CSS Custom Properties): Estándar aprobado por el W3C entre 2014 y 2017 (CSS Custom Properties for Cascading Variables Module Level 1). Permiten definir variables directamente en el motor del navegador (vía :root o [data-theme]) que son consumidas dinámicamente mediante var(), sin necesidad de preprocesadores (Sass/Less) ni utilidades compiladas.
3. Inyección de Contexto en Prompting: Estrategia donde el contrato de tokens del repositorio se inyecta explícitamente en la ventana de contexto del LLM para orientar la generación de código hacia una salida determinista.

Comparativa de Comportamiento del Agente

Sin Inyección de Tokens (El Agente hardcodea e improvisa):

<!-- Código no mantenible con valores improvisados por la IA: -->
<div style="background-color: #ffffff; padding: 24px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);">
  <h2 style="color: #1e1b4b; font-family: Inter, sans-serif;">Título de Tarjeta</h2>
  <button style="background-color: #6366f1; color: white; padding: 12px 24px; border-radius: 9999px;">
    Acción
  </button>
</div>

Con Inyección de Tokens Nativos (Diseño Guiado y Determinista):

<!-- INSTRUCCIÓN DE INYECCIÓN DE TOKENS: -->
"Construye el componente en Vanilla CSS. Mapea todos los colores y geometrías estrictamente a las variables nativas de `DESIGN.md`:
- Superficie: var(--surface)
- Borde: 1px solid var(--border)
- Acento visual: var(--accent)
- Texto principal: var(--text)
- Fuente de titular: var(--font-display)
Prohibido hardcodear valores hexadecimales o inventar clases genéricas."

<!-- Código limpio, determinista y preparado para temas dinámicos: -->
<div class="card-surface">
  <h2 class="card-title">Título de Tarjeta</h2>
  <button class="btn-primary">Acción</button>
</div>
 
<style>
.card-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
}
.card-title {
  color: var(--text);
  font-family: var(--font-display);
}
.btn-primary {
  background: var(--accent);
  color: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.75rem 1rem;
}
</style>

Ventajas Clave para el Desarrollo con Agentes IA:

• Tematización Dinámica Inmediata (Light/Dark Mode): Como todo el código generado por la IA consume var(--...), alternar entre modo claro y oscuro requiere únicamente cambiar los valores en :root o [data-theme], sin necesidad de refactorizar ni una sola línea del HTML/CSS de los componentes.
• Agnóstico de Frameworks (Vanilla Web Standards): El código generado es estándar W3C puro, totalmente compatible con HTML nativo, React, Next.js, Vue, Svelte o Astro sin atar el proyecto a librerías de utilidades externas.

4. Protocolo de Densidad Informativa (IDE-Density Protocol)

Frente a las plantillas web convencionales orientadas al consumo pasivo, las interfaces técnicas y de conocimiento requieren una alta densidad de información. El prompt debe instruir al modelo para emular la eficiencia utilitaria de un entorno de desarrollo (IDE).

/* Estándar exigido mediante el IDE-Density Protocol */
.compact-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem; /* Máximo 16px en escritorio */
}
 
.data-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.75rem; /* Metadato compacto */
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--border);
}

Protocolo de Prompting Paso a Paso: Workflow Completo de Generación

Para construir una pantalla o vista completa sin desviarse del diseño guiado, el desarrollo debe dividirse en un flujo secuencial de 5 prompts.

Paso 1: Prompt de Carga de Contexto y Contrato

Antes de pedir código, se inicializa el estado del agente asegurando la lectura de la documentación:

"Lee detenidamente el archivo `DESIGN.md` y las reglas `<web_designer_rules>` de `AGENTS.md`. Confirma que has procesado la paleta de colores, la lista negra de tipografías prohibidas y las reglas de densidad de espaciado antes de continuar."

Paso 2: Prompt de Estructura de Layout y Skeleton

Se exige la maquetación estructural sin estilos finales para validar la jerarquía de la pantalla:

"Genera el esqueleto HTML semántico para una vista de panel técnico con cabecera (header), barra lateral (sidebar) y rejilla principal de 3 columnas. Utiliza etiquetas HTML5 semánticas (<header>, <main>, <aside>, <section>). Cero estilos en línea."

Paso 3: Prompt de Estilizado de Componentes

Se solicitan los componentes individuales atando cada regla visual al sistema de tokens:

"Construye las tarjetas de la rejilla principal consumiendo la sección 4 y 5 de `DESIGN.md`. Aplica fondo `var(--surface)`, borde `var(--border)`, esquinas `border-radius: 4px`, titulares en fuente display mayúsculas y etiquetas secundarias en fuente monoespaciada `0.75rem`. Respeta el padding máximo de 1rem."

Paso 4: Prompt de Micro-interacciones y Accesibilidad

Se añade la capa de dinamismo y respuesta a las acciones del usuario:

"Añade estados hover a las tarjetas y botones utilizando transformaciones leves (`transform: translateY(-2px)`) y sombras contenidas. Incluye la regla obligatoria `@media (prefers-reduced-motion: reduce)` para anular animaciones cuando la accesibilidad del usuario lo requiera."

Paso 5: Prompt de Auditoría y Auto-corrección Visual

Un prompt final de control de calidad donde la IA revisa su propio trabajo en busca de desviaciones de AI Slop:

"Audita el código HTML y CSS generado en los pasos anteriores contra nuestro contrato visual. Revisa si has introducido por error fuentes prohibidas, paddings inflados (>16px) o sombras excesivas. Corrige cualquier desviación y entrega la versión definitiva limpia."

Skill Maestra de Diseñador Web (System Prompt para AGENTS.md)

Para integrar este patrón de forma persistente en cualquier proyecto, añade el siguiente bloque dentro de tu archivo AGENTS.md o CLAUDE.md:

<web_designer_master_skill>
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 SISTEMA DE DISEÑO:
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_master_skill>

Plantillas y Cheat Sheet de Prompts de UI Listos para Usar

A continuación se incluyen plantillas optimizadas para copiar y pegar directamente en tus conversaciones con agentes de IA.

Plantilla 1: Generación de Hero Section Guiada

Construye la sección Hero de la portada siguiendo estrictamente el sistema de `DESIGN.md`:
1. Titular H1 principal usando la fuente Clash Display en mayúsculas (`font-size: 3rem`, `font-weight: 800`).
2. Subtítulo en Albert Sans (`font-size: 1.125rem`, `color: var(--text-muted)`).
3. Botón principal en coral terracota (`var(--accent)`), texto en Fira Code mayúsculas y esquinas ajustadas a 4px (`border-radius: 4px`).
4. Fondo general en lino suave (`var(--bg)`). Prohibidos degradados radiales o fuentes genéricas Inter/Roboto.

Plantilla 2: Tabla de Datos Técnica en Grid con Divs

Crea una tabla de datos de 4 columnas (PROYECTO, CATEGORÍA, ESTADO, FECHA) respetando la sección 6 de `DESIGN.md`:
1. Cero etiquetas `<table>` HTML. Maqueta la estructura exclusivamente con `<div>` y CSS Grid (`display: grid; grid-template-columns: 2fr 1fr 1fr 1fr`).
2. Cabecera con fondo `var(--accent)`, texto claro en Fira Code mayúsculas.
3. Filas alternas entre `var(--bg)` y `var(--surface-raised)` separadas por borde sutil `1px solid var(--border)`.
4. Celdas técnicas en fuente Fira Code (`0.75rem`) y texto principal en Albert Sans.

Plantilla 3: Formulario Compacto de Alta Densidad

Diseña un formulario de configuración técnica de alta densidad:
1. Contenedor principal con fondo `var(--surface)`, borde `var(--border)` y padding de 1rem.
2. Campos de entrada (`<input>`, `<select>`) con fondo `var(--bg)`, borde sutil `1px solid var(--border)`, texto en Fira Code (`0.875rem`) y esquinas de 4px (`border-radius: 4px`).
3. Etiquetas (`<label>`) superiores en Fira Code mayúsculas (`0.75rem`, `color: var(--text-muted)`).
4. Botón de guardar en `var(--accent)` con efecto hover de elevación sutil (`translateY(-2px)`).

Plantilla 4: Prompt de Auditoría Visual contra AI Slop

Revisa el código frontend presentado a continuación y actúa como un auditor estricto de UI:
1. Detecta si hay fuentes pertenecientes a la lista negra (`Inter`, `Roboto`, `Outfit`, `Plus Jakarta Sans`, `JetBrains Mono`).
2. Identifica si hay paddings inflados superiores a 16px en tarjetas o contenedores.
3. Comprueba si se han usado esquinas redondeadas excesivas (`rounded-full` o `rounded-2xl`) o degradados morados.
4. Reescribe el código corregido sustituyendo cada desviación por tokens de nuestro `DESIGN.md`.

Para ver la aplicación práctica de estas reglas en un caso de estudio real con ejemplos comparativos de código erróneo frente a código guiado, consulta nuestro artículo de blog: De diseño genérico a guiado: cómo escapar del AI Slop.