Prototype2Code: End-to-end Front-end Code Generation from UI Design Prototypes
CoRR(2024)
摘要
UI-to-code technology has streamlined the front-end development process,
reducing repetitive tasks for engineers. prior research mainly use design
prototypes as inputs, with the effectiveness of the generated code heavily
dependent on these prototypes' quality, leading to compromised robustness.
Moreover, these approaches also exhibit shortcomings in code quality, including
issues such as disorganized UI structures and the inability to support
responsive layouts. To address these challenges, we introduce Prototype2Code,
which achieves end-to-end front-end code generation with business demands. For
Prototype2Code, we incorporate design linting into the workflow, addressing the
detection of fragmented elements and perceptual groups, enhancing the
robustness of the generated outcomes. By optimizing the hierarchical structure
and intelligently recognizing UI element types, Prototype2Code generates code
that is more readable and structurally clearer. To meet responsive design
requirements, Prototype2Code primarily supports flexbox layout model, ensuring
code compatibility across various device sizes. To validate the efficacy, we
compare Prototype2Code with the commercial code generation platform CodeFun and
Screenshot-to-code based on GPT-4 with vision. Employing structural similarity
index measure (SSIM), peak signal-to-noise ratio (PSNR), and mean squared error
(MSE) for visual similarity assessment, Prototype2Code's rendered UI effects
align most closely with the design prototypes, exhibiting the minimal errors.
We also conduct a user study with five experienced front-end engineers,
inviting them to review and revise code generated by the three methods. As a
result, Prototype2Code surpasses other methods in readability, usability, and
maintainability, better meeting the business needs of industrial development.
更多查看译文
AI 理解论文
溯源树
样例
![](https://originalfileserver.aminer.cn/sys/aminer/pubs/mrt_preview.jpeg)
生成溯源树,研究论文发展脉络
Chat Paper
正在生成论文摘要