Automaticly Generating Web Page From A Mockup

Abstract

Abstract-UI is an important part of software product. Considering the complexity of web UI, generating the web page from a mockup proposes requirements for rich experience of developer. Extracting visible elements and their relationship, selecting proper tags, generating source code are time-consuming and error-prone task. In this paper, we propose a method to automate the transforming of the mockup to the web page. Our approach starts from the mockup designed by the art designers, and extracts the elements based on the color features of the edges. Then a bottom-up tag generating method based on the Random Forest is proposed to select the tags for elements. Finally the web page is generated by the definition of the elements. The generating tags can achieve an average accuracy of more than 84%, which can meet the basic requirements of the developers.