Resumen:La generación de diseño gráfico exige un delicado equilibrio entre alta fidelidad visual y editabilidad estructural detallada. Sin embargo, los enfoques existentes normalmente se bifurcan en síntesis de imágenes rasterizadas no editables o generación de diseños abstractos sin contenido visual. Combinaciones recientes de estos dos enfoques intentan cerrar esta brecha, pero a menudo sufren de esquemas de composición rígidos y disonancias visuales irresolubles (por ejemplo, conflictos entre texto y fondo) debido a su representación inexpresiva y su naturaleza de bucle abierto. Para abordar estos desafíos, proponemos DesignAsCode, un marco novedoso que reinventa el diseño gráfico como una tarea de síntesis programática utilizando HTML/CSS. Específicamente, presentamos una canalización Planificar-Implementar-Reflejar, que incorpora un Planificador Semántico para construir jerarquías de elementos dinámicas y de profundidad variable y un mecanismo de Reflexión Visual-Aware que optimiza iterativamente el código para rectificar los artefactos de representación. Amplios experimentos demuestran que DesignAsCode supera significativamente las líneas de base más modernas tanto en validez estructural como en calidad estética. Además, nuestra representación de código nativo desbloquea capacidades avanzadas, incluida la reorientación automática del diseño, la generación de documentos complejos (por ejemplo, currículums) y la animación basada en CSS.
Publicado originalmente en export.arxiv.org el 22 de febrero de 2026.
Ver fuente original
