ScreenCoder: Развитие генерации визуального кода для автоматизации фронтенда с помощью модульных мультимодальных агентов

ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents

July 30, 2025

Авторы: Yilei Jiang, Yaozhi Zheng, Yuxuan Wan, Jiaming Han, Qunzhong Wang, Michael R. Lyu, Xiangyu Yue

cs.AI

Аннотация

Автоматизация преобразования дизайнов пользовательского интерфейса (UI) во фронтенд-код обладает значительным потенциалом для ускорения разработки программного обеспечения и демократизации процессов проектирования. Хотя современные крупные языковые модели (LLM) продемонстрировали прогресс в генерации кода из текста, многие существующие подходы полагаются исключительно на текстовые подсказки, что ограничивает их эффективность в захвате пространственного расположения и визуального замысла дизайна. В отличие от этого, разработка UI на практике по своей природе мультимодальна и часто начинается с визуальных набросков или макетов. Для устранения этого разрыва мы представляем модульную мультиагентную систему, которая выполняет генерацию кода из UI в три интерпретируемых этапа: заземление, планирование и генерация. Агент заземления использует модель, объединяющую зрение и язык, для обнаружения и маркировки компонентов UI, агент планирования строит иерархическую структуру макета на основе инженерных принципов фронтенда, а агент генерации создает HTML/CSS-код с помощью адаптивного синтеза на основе подсказок. Такой подход повышает устойчивость, интерпретируемость и точность по сравнению с методами "черного ящика", работающими от начала до конца. Кроме того, мы расширяем систему до масштабируемого механизма данных, который автоматически создает крупномасштабные пары "изображение-код". Используя эти синтетические примеры, мы дообучаем и усиливаем открытую модель, объединяющую зрение и язык, что приводит к значительному улучшению понимания UI и качества кода. Многочисленные эксперименты демонстрируют, что наш подход достигает передовых показателей в точности макета, структурной согласованности и корректности кода. Наш код доступен публично по адресу https://github.com/leigest519/ScreenCoder.

English

Automating the transformation of user interface (UI) designs into front-end code holds significant promise for accelerating software development and democratizing design workflows. While recent large language models (LLMs) have demonstrated progress in text-to-code generation, many existing approaches rely solely on natural language prompts, limiting their effectiveness in capturing spatial layout and visual design intent. In contrast, UI development in practice is inherently multimodal, often starting from visual sketches or mockups. To address this gap, we introduce a modular multi-agent framework that performs UI-to-code generation in three interpretable stages: grounding, planning, and generation. The grounding agent uses a vision-language model to detect and label UI components, the planning agent constructs a hierarchical layout using front-end engineering priors, and the generation agent produces HTML/CSS code via adaptive prompt-based synthesis. This design improves robustness, interpretability, and fidelity over end-to-end black-box methods. Furthermore, we extend the framework into a scalable data engine that automatically produces large-scale image-code pairs. Using these synthetic examples, we fine-tune and reinforce an open-source VLM, yielding notable gains in UI understanding and code quality. Extensive experiments demonstrate that our approach achieves state-of-the-art performance in layout accuracy, structural coherence, and code correctness. Our code is made publicly available at https://github.com/leigest519/ScreenCoder.