Multi-agent approach improves code generation across front-end frameworks
MulFCoder: Framework-conditioned Multi-agent for MLLM-based Multi-framework Front-end Code Generation
Software EngineeringArtificial Intelligence
Summary
Generating front-end code from screenshots is hard, especially for different frameworks like React, Vue, and Angular. The authors found that simply changing instructions confuses current AI models, causing many errors. They created MulFCoder, which uses multiple cooperating agents that understand rules unique to each framework, improving code accuracy and reducing errors. This system works especially well for generating Angular code.
What this means in practice
- •For front-end software developers: Automatically produce accurate code for React, Vue, and Angular from UI screenshots with fewer framework-specific errors.
- •For ui/ux design teams: Generate working front-end code based on design screenshots to speed up prototyping across multiple frameworks.
Authors
Jie Wu, Haoran Ma, Shisong Tang, Yulin Xu, Xiaoyu Kang, Jiechao Gao
Abstract
Generating runnable front-end code from UI screenshots is a long-standing goal in automated software engineering. Existing MLLM-based methods predominantly focused on HTML/CSS, leaving multi-framework generation for React/Vue/Angular underexplored. Naively modifying prompts leads to substantial performance gaps across multi-framework and highly framework-specific error modes. To address this, we propose MulFCoder, a framework-conditioned multi-agent method that explicitly encodes framework constraints to bring multi-framework differences into a decidable rule space. MulFCoder orchestrates four agents: Grounder constructs an ElementTable, ContentTable, and macro-layout regions from detected UI elements; Planner builds a DOM-like hierarchical layout tree, produces a task schedule, and derives a framework-specific file Contract; Writer generates structured file writes or patches within a restricted edit window; Judger enforces lightweight, framework-conditioned constraints to accept or reject updates and trigger bounded repairs, preventing drift and deadlocks without expensive builds. Experiments demonstrate that MulFCoder substantially improves compilation success rate and reduces framework-specific errors, with particularly pronounced gains on Angular.