PSD2Code: Automated Front-End Code Generation from Design Files via Multimodal Large Language Models

Abstract: Design-to-code generation has emerged as a promising approach to bridge the gap between design prototypes and deployable frontend code. However, exist?ing methods often suffer from structural inconsistencies, asset misalignment, and limited production readiness. This paper presents PSD2Code, a novel multi?modal approach that leverages PSD file parsing and asset alignment to generate production-ready React+SCSS code. Our method introduces a ParseAlignGener?ate pipeline that extracts hierarchical structures, layer properties, and metadata from PSD files, providing LLMs with precise spatial relation?ships and semantic groupings for frontend code generation. The system employs a constraint-based alignment strategy that ensures consistency between generated elements and design resources, while a structured prompt construction enhances controllability and code quality. Comprehensive evaluation demonstrates sig?nificant improvements over existing methods across multiple metrics including code similarity, visual fidelity, and production readiness. The method exhibits strong model independence across different LLMs, validating the effectiveness of integrating structured design information with multimodal LLMs for industrial-grade code generation, marking an important step toward design-driven automated frontend development.