Prototype2Code: End-to-end Front-end Code Generation from UI Design Prototypes

UI-to-code技术简化了前端开发过程，减少了工程师的重复任务。先前的研究主要使用设计原型作为输入，生成的代码的有效性严重依赖于这些原型的质量，导致鲁棒性受损。此外，这些方法在代码质量方面也存在缺陷，包括UI结构混乱和无法支持响应式布局等问题。为了解决这些挑战，我们介绍了Prototype2Code，它实现了满足业务需求的端到端前端代码生成。对于Prototype2Code，我们将设计linting纳入工作流程，解决了碎片化元素和感知组的检测，增强了生成结果的鲁棒性。通过优化层次结构和智能识别UI元素类型，Prototype2Code生成的代码更易读，结构更清晰。为了满足响应式设计要求，Prototype2Code主要支持flexbox布局模型，确保代码在各种设备大小上的兼容性。为了验证其有效性，我们将Prototype2Code与商业代码生成平台CodeFun和基于GPT-4视觉的截图到代码进行了比较。通过采用结构相似度指数(SSIM)、峰值信噪比(PSNR)和均方差(MSE)进行视觉相似性评估，Prototype2Code的渲染UI效果与设计原型最接近，显示出最小的误差。我们还邀请了五名有经验的前端工程师进行用户研究，审查和修改三种方法生成的代码。结果，Prototype2Code在可读性、可用性和可维护性方面超越其他方法，更好地满足工业开发的业务需求。

Prototype2Code: 一种解决UI-to-code技术中代码质量和响应式布局支持问题的方法

Prototype2Code将设计linting纳入工作流程，通过优化层次结构和智能识别UI元素类型，生成更易读且结构更清晰的代码。同时支持flexbox布局模型以满足响应式设计要求。

Prototype2Code通过与商业代码生成平台CodeFun和基于GPT-4视觉的Screenshot-to-code进行比较，证明了其在视觉相似度、可读性、可用性和可维护性等方面的优越性。研究还开源了数据集和代码，为后续研究提供了便利。

与该研究相关的其他研究包括：1. Sketch2Code: A Deep Learning Based Web Designer; 2. LayoutGAN: Generating Graphic Layouts with Wireframe Discriminators; 3. Learning to Generate Web Designs by Learning from Web Designers.