Cómo los modelos de IA aprenden el diseño, la composición y la jerarquía visual

Los sistemas de IA pueden reconocer texto, conjuntos de datos de imágenes, logotipos, formas y otros elementos visuales con creciente sofisticación. La comprensión del diseño gráfico requiere una segunda capa de razonamiento: el sistema también debe tener en cuenta dónde aparecen los elementos, cómo se relacionan, cuáles son visualmente prominentes, qué funciones cumplen y cómo cambia la composición cuando cambia el lienzo.

Un cartel con un titular sobre la imagen de un producto es estructuralmente distinto de uno con los mismos elementos dispuestos uno al lado del otro. Un CTA grande rodeado de espacio en blanco puede atraer más atención que un enlace secundario pequeño, mientras que una etiqueta pequeña aún puede desempeñar un papel funcional importante. Estas distinciones forman parte de la comprensión de la maquetación.

Los modelos de IA aprenden aspectos de la maquetación a través de representaciones visuales, anotaciones, objetivos de entrenamiento, señales multimodales y grandes colecciones de ejemplos. Lo que un modelo puede aprender depende en gran medida de qué propiedades exponen los datos. Una imagen aplanada contiene evidencia visual, pero los datos de diseño estructurados pueden dejar explícitas la geometría, las relaciones, la jerarquía y la estructura reutilizable de conjuntos de datos de plantillas.

Para la IA para el diseño gráfico, la cuestión práctica, por tanto, no es simplemente cuántos diseños existen en un conjunto de datos. Es qué información sobre esos diseños necesita adquirir el modelo y si el conjunto de datos de IA proporciona esa información en una forma que el proceso de entrenamiento pueda utilizar.

Estos términos describen propiedades relacionadas pero diferentes de un diseño.

Los conceptos se solapan, pero no son intercambiables. Un modelo puede estimar las posiciones de los elementos sin entender la jerarquía. Puede reproducir una composición familiar sin inferir correctamente la función de cada componente. Un conjunto de datos sólido sobre la distribución hace explícitas esas distinciones cuando la tarea objetivo así lo requiere.

La saliencia visual es una señal de atención. La jerarquía visual es un concepto de diseño más amplio que puede incluir prominencia, significado y función. No deben colapsarse ambos en una única etiqueta genérica de "importancia" a menos que la metodología de anotación defina claramente qué se está midiendo.

Una imagen decorativa puede ser visualmente dominante y, al mismo tiempo, seguir siendo semánticamente secundaria. A la inversa, un control pequeño puede tener poca prominencia visual pero alta importancia funcional. Para los datos de entrenamiento, el tamaño o el contraste pueden ser características observables útiles, pero no deben considerarse automáticamente como verdad de referencia ni para la intención del diseñador ni para los conjuntos de datos de reconocimiento de actividad humana.

Las arquitecturas de visión modernas representan la entrada visual de distintas formas. Los Vision Transformers suelen trabajar con parches o tokens visuales, mientras que otros sistemas pueden operar sobre mapas de características, regiones o embeddings multimodales. Estas representaciones aprendidas pueden codificar información espacial, pero no exponen automáticamente conceptos como headline, CTA, visual group o section.

Los píxeles proporcionan color, textura, bordes, formas y otras evidencias de bajo nivel. La estructura de nivel superior se infiere a partir de esas señales mediante el modelo y sus objetivos de entrenamiento. Una imagen renderizada no indica explícitamente que una región particular sea un titular ni que dos elementos pertenezcan al mismo grupo.

Los parches o tokens visuales permiten que un modelo conecte regiones locales con el contexto circundante. La información posicional puede ayudar a distinguir elementos que están arriba, abajo, al lado o dentro de otros elementos. La segmentación puede describir la región visible de un componente con mayor precisión que una caja simple, especialmente cuando los componentes tienen formas irregulares o se solapan.

Información posicional y espacial

La información espacial puede representarse de varias formas, incluyendo codificación posicional, coordenadas bidimensionales, posición relativa, cajas delimitadoras, orden de componentes y relaciones espaciales aprendidas. El conjunto de datos puede proporcionar geometría explícita incluso cuando la arquitectura del modelo no expone un campo dedicado llamado spatial embedding.

Las cajas delimitadoras son valiosas porque proporcionan una descripción compacta de la ubicación y la extensión. Se vuelven mucho más informativas cuando se combinan con etiquetas, relaciones y jerarquía.

Las cajas delimitadoras codifican la geometría, no la lógica del diseño

Una caja delimitadora le indica a un modelo dónde está un elemento y cuánto espacio ocupa. No explica, por sí sola, por qué un elemento está asociado con otro componente, qué elemento debe leerse primero, si un objeto es hijo de otro, o cuál elemento tiene intencionalmente una mayor prioridad visual.

Dos diseños pueden contener elementos con coordenadas casi idénticas aunque se les asignen diferentes roles semánticos o funcionales. Del mismo modo, el mismo conjunto de cajas puede describir distintos agrupamientos, órdenes de lectura o sistemas de diseño. Para la comprensión del diseño, la geometría es, por tanto, una base más que una representación completa.

De elementos a relaciones

Una representación relacional describe un diseño como un sistema de elementos y conexiones en lugar de un conjunto de rectángulos independientes.

• Nodos: texto, imagen, logo, CTA, forma, fondo y otros componentes de diseño.
• Atributos: coordenadas, dimensiones, tipografía, color y rol semántico.
• Relaciones: encima, debajo, dentro, alineado con, agrupado con, solapado y asociado con.
• Jerarquía: relaciones de padre, hijo, grupo y sección.

Esta representación es especialmente útil cuando un modelo debe generar, editar, recuperar o evaluar diseños. La investigación actual en diseño gráfico, como PKU PosterLayout, ofrece un ejemplo concreto de generación de maquetaciones conscientes del contenido, en las que se consideran conjuntamente las relaciones entre elementos y el lienzo visual. LICA demuestra asimismo el valor de la estructura jerárquica de componentes, la geometría, la tipografía y las relaciones entre plantillas.

La composición describe cómo se disponen los elementos para crear estructura, equilibrio, énfasis y coherencia. Los modelos pueden aprender patrones recurrentes a partir de un gran número de ejemplos, pero la señal aprendida depende de lo que contengan esos ejemplos y de lo que se le pide al modelo que prediga durante el entrenamiento.

• • Escala
• • Alineación
• • Proximidad
• • Contraste
• • Repetición
• • Simetría o asimetría
• • Espacio en blanco
• • Densidad visual
• • Agrupamiento
• • Puntos focales

Un mismo ejemplo visual puede proporcionar diferentes señales de aprendizaje según cómo se anote y se utilice. Una captura de pantalla con una sola etiqueta de categoría ofrece información estructural menos explícita que una que incluya límites de los componentes, roles semánticos y relaciones. Sin embargo, más anotación no es necesariamente mejor. La anotación añade coste y puede introducir inconsistencias, por lo que el nivel apropiado depende de la capacidad objetivo.

• Identidad del elemento: encabezado, imagen, logotipo, CTA, párrafo, icono y otros tipos de componentes.
• Geometría: coordenadas, dimensiones, regiones, alineación y límites.
• Relaciones espaciales: encima de, debajo de, al lado de, dentro de, alineado con y agrupado con.
• Jerarquía estructural: relaciones padre-hijo, de grupo y de sección.
• Roles semánticos y funcionales: titular, información complementaria, acción primaria, acción secundaria o navegación.
• Relaciones diseño-sistema: componentes reutilizables, familias de plantillas y otras estructuras recurrentes cuando la tarea lo requiera.

Estos tipos de anotación son complementarios entre sí más que etapas obligatorias. Un conjunto de datos de generación de maquetación puede necesitar geometría precisa sin etiquetas del sistema de diseño, mientras que una tarea de recuperación de componentes puede necesitar roles semánticos pero no jerarquía explícita.

Un conjunto de datos de diseño para IA es una categoría orientada a un propósito más que a un formato de conjunto de datos estandarizado. Puede combinar imágenes, capturas de pantalla, texto, estructuras de diseño, anotaciones, metadatos de diseño, relaciones entre componentes, información de estilo y otras señales según la aplicación.

En la IA de diseño gráfico, los conjuntos de datos de plantillas estructuradas pueden preservar la información de maquetación junto con componentes editables, tipografía, metadatos y relaciones entre elementos de diseño. Esta distinción importa porque una representación aplanada revela la apariencia, mientras que los datos fuente editables pueden mostrar las relaciones y la estructura de los componentes de forma más directa.

Los diseños creados por humanos pueden poner de manifiesto convenciones reales de producción, concentración estilística, artefactos históricos y variación natural. También pueden contener duplicaciones, cobertura desigual y etiquetado inconsistente.

Los diseños generados programáticamente pueden aislar variables geométricas o relacionales y proporcionar etiquetas estructurales exactas cuando esas variables están controladas por el generador. Su valor depende de si la distribución generada se asemeja a las condiciones que el modelo necesita manejar.

La comparación relevante, por tanto, no es simplemente humano frente a sintético; es qué cobertura adicional o señal de entrenamiento aporta cada fuente a la tarea objetivo. Una estrategia mixta puede ser útil cuando los diseños reales ofrecen realismo y los datos sintéticos controlados llenan lagunas de cobertura específicas.

Defina la distribución objetivo antes de decidir cuánto recopilar de cada tipo de diseño. Un modelo de diseño gráfico puede necesitar variación en las relaciones de aspecto, los idiomas, la densidad de contenido, las industrias, la tipografía, los estilos visuales, las familias de plantillas y los tipos de contenido.

Los casos raros pueden ser importantes sin ser igualmente frecuentes. Los datos de entrenamiento pueden sobremuestrear ejemplos difíciles o estratégicamente importantes, mientras que un conjunto de evaluación destinado a representar el despliegue debería diseñarse por separado de la distribución de entrenamiento.

La cobertura debería responder a una pregunta práctica: ¿están realmente presentes en los datos las condiciones de diseño que el modelo debe manejar? Esto es más informativo que tratar la diversidad como una lista de verificación de categorías.

La maquetación del diseño gráfico está fuertemente influenciada por la tipografía, los espacios en blanco y el énfasis. El tamaño de la fuente, el peso, la longitud de línea y la agrupación pueden afectar cómo un espectador recorre un diseño. El espacio en blanco puede separar grupos, reforzar la jerarquía y crear un ritmo visual, aunque no contenga ningún objeto explícito.

Estas propiedades son en parte observables y en parte contextuales. Un modelo puede medir el tamaño del texto o el contraste, pero la jerarquía prevista puede depender del contenido, de las convenciones de la marca y de las decisiones del diseñador. Por esa razón, métricas como el elemento de texto más grande o el contraste más fuerte deben tratarse como proxies medibles, a menos que las etiquetas semánticas o los juicios humanos las establezcan como la verdad de referencia de la jerarquía.

El manejo de casi duplicados requiere más criterio que la simple deduplicación de archivos. Una plantilla redimensionada o localizada puede contener información sobre la composición adaptativa que se perdería si se tratara como un duplicado ordinario.

No elimines el linaje de diseño en nombre de la deduplicación. Las versiones relacionadas pueden estar entre los ejemplos más ilustrativos para aprender composición responsiva y adaptación de plantillas.

El diseño responsive no es simplemente la misma composición renderizada a otra resolución. Cambiar el lienzo puede alterar las relaciones entre los elementos.

Ejemplos emparejados, como una publicación cuadrada en redes sociales, una historia vertical y un banner horizontal, permiten que un modelo observe transformaciones que incluyen:

• Movimiento de elementos
• Reflujo de texto
• Cambios en el recorte de imágenes
• Escalado de elementos
• Preservación de la jerarquía
• Cambios en los espacios en blanco

Un conjunto de datos de diseños emparejados puede, por tanto, responder a preguntas que una colección de capturas de pantalla no relacionadas no puede: ¿qué propiedades permanecen estables entre formatos, qué elementos se mueven, qué relaciones se conservan y qué reglas cambian cuando varía el lienzo disponible?

Para una plataforma de diseño, esta es una forma particularmente relevante de evidencia de primera mano porque el redimensionamiento y la edición a nivel de plantilla exponen ejemplos reales de cómo la composición cambia entre formatos.

Una captura de pantalla no vista no implica necesariamente que el diseño sea desconocido. Si miembros relacionados de la misma familia de plantillas aparecen tanto en el conjunto de entrenamiento como en el de evaluación, un modelo puede beneficiarse de la exposición a la misma estructura subyacente incluso cuando el archivo exacto nunca se ha visto.

Por lo tanto, las particiones de evaluación deberían comprobar posibles fugas entre:

Agrupar ejemplos relacionados antes de crear los conjuntos de entrenamiento, validación y prueba produce una estimación de la generalización más fiable. En la investigación sobre layout, la independencia a nivel de familia puede ser tan importante como la unicidad a nivel de archivo.

No existe un único conjunto de datos que defina toda la comprensión de la maquetación en el diseño gráfico. Diferentes recursos enfatizan distintas formas de estructura.

PKU PosterLayout es un ejemplo de investigación sobre la maquetación de carteles consciente del contenido, en la que los elementos de diseño predefinidos se modelan en relación con el lienzo. LICA ofrece otro ejemplo de una representación de diseño por capas que combina la jerarquía de componentes, la geometría, la tipografía y las relaciones entre plantillas.

GraphicDesignBench, publicado en 2026, evalúa la IA profesional aplicada al diseño gráfico en tareas que abarcan maquetación, tipografía, infografías, plantillas, semántica del diseño y animación. Sus dimensiones de evaluación incluyen medidas espaciales, perceptuales, textuales, semánticas y estructurales. La lección más general es que la maquetación, la tipografía y la generación estructural siguen siendo desafíos técnicos distintos y no deberían reducirse a una única puntuación.

1. Defina la capacidad objetivo. Especifique si el modelo debe detectar elementos, generar diseños, adaptar plantillas, evaluar la calidad del diseño, recuperar la estructura o comparar composiciones.

2. Defina la ontología de la anotación. Establezca el vocabulario para componentes, roles y relaciones antes de que comience la anotación a gran escala.

3. Elija la profundidad de la anotación. Decida qué combinación de identidad, geometría, relaciones, jerarquía, roles semánticos e información del sistema de diseño está justificada por la tarea.

4. Defina la cobertura del dominio objetivo. Mapee los formatos de dispositivo, relaciones de aspecto, idiomas, familias de diseño, tipos de contenido y otras condiciones que el sistema debe manejar.

5. Identifique duplicados y variantes relacionadas. Separe los duplicados reales de las variantes adaptativas (responsive), localizadas, redimensionadas y de la familia de plantillas.

6. Verifique la procedencia y los derechos de uso. Confirme de dónde provienen los datos y qué derechos se aplican a la recopilación, el aprendizaje automático, la modificación y la redistribución.

7. Mida la consistencia de la anotación. Use pautas claras y procedimientos de control de calidad para que ejemplos equivalentes reciban etiquetas comparables.

8. Cree grupos de evaluación desde el principio. Reserve ejemplos representativos y agrupe familias de plantillas relacionadas antes de asignar las particiones de entrenamiento (train), validación (validation) y prueba (test).

9. Documente el linaje del conjunto de datos. Conserve identificadores que permitan rastrear variantes relacionadas, activos fuente y familias de plantillas cuando sea apropiado.

10. Revise el desajuste de distribución a lo largo del tiempo. Una versión del conjunto de datos no deriva por sí misma; el entorno que representa puede cambiar.

Una versión del conjunto de datos permanece fija, pero el dominio objetivo puede cambiar debido a nuevos formatos de dispositivo, idiomas, convenciones de diseño o requisitos del producto. La pregunta práctica, por tanto, es si el conjunto de datos actual sigue representando las condiciones en las que se espera que opere el modelo.

Cobertura y sesgo están relacionados, pero no son idénticos. Un conjunto de datos puede tener una cobertura deficiente sin generar un sesgo sistemático medible, y un desequilibrio de clases o plantillas no es automáticamente evidencia de sesgo en el conjunto de datos. Defina la población objetivo y los criterios de fallo antes de sacar esa conclusión.

La evaluación del modelo debe coincidir con la capacidad que se pretende medir. Para la detección de componentes, las métricas de detección pueden ser apropiadas. Para la segmentación, las medidas basadas en la superposición pueden cuantificar la precisión de los límites. Las tareas orientadas a relaciones pueden poner a prueba si el modelo predice correctamente conexiones espaciales, como arriba, abajo, dentro de, adyacente a, alineado con o agrupado con.

Los sistemas generativos de diseño gráfico pueden necesitar una combinación de evaluación estructural y perceptual, que incluya:

• Precisión espacial
• Superposición y alineación
• Fidelidad del texto
• Validez estructural
• Alineación semántica
• Calidad tipográfica
• Preferencias humanas
• Restricciones específicas de la tarea
• Calidad de la animación cuando sea relevante

No existe una única métrica universal para la comprensión del diseño. Un resultado visualmente atractivo aún puede violar los requisitos estructurales, mientras que un resultado estructuralmente preciso puede ser estéticamente débil. La evaluación debe reflejar la capacidad que se espera que el modelo adquiera.

Una gran colección de plantillas estrechamente relacionadas puede contener menos variación estructural independiente que un conjunto de datos más pequeño que abarque una gama más amplia de familias y relaciones de diseño. Por lo tanto, el tamaño del conjunto de datos, el recuento de diseños independientes, la profundidad estructural y la cobertura del dominio objetivo deben informarse por separado.

El volumen bruto también puede ocultar duplicaciones y fugas de datos. Si la misma familia de plantillas aparece repetida en varias variantes, el recuento puede parecer impresionante, mientras que la cantidad de información independiente sobre el diseño sigue siendo limitada.

Estos modos de fallo son categorías diagnósticas útiles, porque un fallo del modelo no siempre es un problema de su arquitectura. El conjunto de datos puede carecer de una relación requerida, sobre-representar una familia de plantillas o usar una etiqueta que no corresponda claramente con la capacidad que se está midiendo.