DesignCoder: Hierarchy-Aware and Self-Correcting UI Code Generation with Large Language Models

Context: Multimodal large language models (MLLMs) have advanced pixel-to-code generation, yet industrial development relies on metadata-rich mockups (e.g., Figma) rather than flat screenshots. Existing methods struggle to reconcile noisy design layers with logical DOM hierarchies.Objective: This study aims to bridge the gap between raw design metadata and production-ready code by introducing a hierarchy-aware framework that enforces strict pixel-perfect styling and structural coherence.Method: We propose DesignCoder, a mockup-centric framework integrating MLLM semantic reasoning with deterministic priors. The approach employs a three-stage pipeline: (1) a UI Grouping Chain to distill metadata into component trees; (2) Hierarchy-Guided Code Generation to synthesize modular structures; and (3) a Vision-Guided Self-Correction loop to iteratively repair defects.Results: Extensive evaluations on 300 high-fidelity mockups demonstrate that DesignCoder outperforms state-of-the-art baselines, achieving a 37.6% reduction in visual error (MSE) and a 30.2% improvement in structural similarity (TreeBLEU). A user study with professional engineers confirms significant gains in code readability and maintainability.Conclusion: DesignCoder effectively addresses the limitations of direct mockup-to-code generation, offering a robust solution for automating industrial-grade front-end development workflows.