🤖 AI Summary
Modern frontend frameworks (e.g., React, Vue) employ declarative rendering, state synchronization, and component reuse—introducing substantial complexity in generating executable code from design mockups and limiting the performance of existing vision-language models (VLMs).
Method: We propose a reflective agent workflow and introduce three novel image-code paired data synthesis strategies: evolutionary (enhancing diversity), waterfall-model (ensuring logical consistency), and incremental development (progressively increasing complexity). We establish a “vision-first” VLM training paradigm—“observe image before generating code”—and integrate self-contained code extraction, multi-stage rendering, and descriptive caption generation. Our approach is instantiated and evaluated on the Flame VLM.
Contribution/Results: Experiments demonstrate significant improvements over baselines in React code generation. Pass@k evaluation confirms that vision-prior understanding substantially enhances both functional correctness and overall code quality.
📝 Abstract
Modern front-end (FE) development, especially when leveraging the unique features of frameworks like React and Vue, presents distinctive challenges. These include managing modular architectures, ensuring synchronization between data and visual outputs for declarative rendering, and adapting reusable components to various scenarios. Such complexities make it particularly difficult for state-of-the-art large vision-language models (VLMs) to generate accurate and functional code directly from design images. To address these challenges, we propose a reflective agentic workflow that synthesizes high-quality image-text data to capture the diverse characteristics of FE development. This workflow automates the extraction of self-containedfootnote{A extbf{self-contained} code snippet is one that encapsulates all necessary logic, styling, and dependencies, ensuring it functions independently without requiring external imports or context.} code snippets from real-world projects, renders the corresponding visual outputs, and generates detailed descriptions that link design elements to functional code. To further expand the scope and utility of the synthesis, we introduce three data synthesis strategies: Evolution-based synthesis, which enables scalable and diverse dataset expansion; Waterfall-Model-based synthesis, which generates logically coherent code derived from system requirements; and Additive Development synthesis, which iteratively increases the complexity of human-authored components. We build a large vision-language model, Flame, trained on the synthesized datasets and demonstrate its effectiveness in generating React code via the $ ext{pass}@k$ metric. Our results suggest that a code VLM trained to interpret images before code generation may achieve better performance.