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

TL;DR

PSD2Code is a multimodal large language model-based system that automates the conversion of PSD design files into production-ready React+SCSS code, improving accuracy and consistency.

Contribution

It introduces a ParseAlignGenerate pipeline and a constraint-based alignment strategy for accurate, structured, and production-ready front-end code generation from design files.

Findings

Significant improvements in code similarity and visual fidelity.

Enhanced production readiness of generated code.

Model independence across different 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, existing 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 ParseAlignGenerate pipeline that extracts hierarchical structures, layer properties, and metadata from PSD files, providing large language models with precise spatial relationships 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 significant improvements over existing methods across multiple metrics including code similarity, visual fidelity, and production readiness. The method exhibits strong model independence across different large language models, validating the effectiveness of integrating structured design information with multimodal large language models for industrial-grade code generation, marking an important step toward design-driven automated frontend development.