UI design dataset

The EGFE dataset is a collection of high-quality UI design prototypes with fragmented layered data. It includes high-fidelity UI screenshots and JSON files containing metadata of the design prototypes. This dataset aims to assist in merging fragmented elemetns within design prototypes, thereby alleviating the burden on developers to understand the designer's intent and aiding automated code generation tools in producing high-quality frontend code. What sets this dataset apart from others is the methodology employed to obtain UI screenshots and the hierarchical structure of views, which involves parsing UI design prototypes created using design tools like Sketch and Figma. It's important to note that a significant portion of the UI design drafts used in this dataset was generously provided by Alibaba Group, and their usage requires consent from Alibaba Group. To facilitate model testing, we have released a partial dataset here, adhering to the terms of the MIT license. If you require access to the complete dataset, please contact the authors of the paper.

In this repo, we release a total of 300 samples and pre-trained model checkpoints. It includes the following:

• EGFE-dataset.zip
  • xxx-assets.png: image of stacked elements
  • xxx.json: properties of UI elements
  • xxx.png: screenshot of high-fidelity UI design prototypes
• pre-trained model.7z
  • model checkpoints
  • tensorboard logs for visualization
  • a log.txt file
• design-prototype.7z
  • two design prototypes for testing data processing