Style-Aware Sketch-to-Code Conversion for the Web
Published in EICS '22 Companion: Companion of the 2022 ACM SIGCHI Symposium on Engineering Interactive Computing Systems, 2022
Recommended citation: Tommaso Calò and Luigi De Russis. 2022. Style-Aware Sketch-to-Code Conversion for the Web. In Companion of the 2022 ACM SIGCHI Symposium on Engineering Interactive Computing Systems (EICS 22 Companion). Association for Computing Machinery, New York, NY, USA, 44–47. https://doi.org/10.1145/3531706.3536462 https://dl.acm.org/doi/10.1145/3531706.3536462
In this research, we address the challenge of converting GUI sketches into styled, coded interfaces by introducing a novel method that takes both the sketch and a chosen reference style into account. By automatically incorporating the selected style into the sketch components and employing an automatic code generation technique, the method streamlines the design process and allows designers to explore various styles more effectively. Initial experiments with the navigation bar component indicate the potential of this approach for rapid, style-aware web development.
Recommended citation: Tony Beltramelli. 2018. Pix2code: Generating Code from a Graphical User Interface Screenshot. In Proceedings of the ACM SIGCHI Symposium on Engineering Interactive Computing Systems (Paris, France) (EICS ’18). Association for Computing Machinery, New York, NY, USA, Article 3, 6 pages. https://doi.org/10.1145/3220134.3220135. Tuan Anh Nguyen and Christoph Csallner. 2015. Reverse Engineering Mobile Application User Interfaces with REMAUI. In Proceedings of the 30th IEEE/ACM International Conference on Automated Software Engineering(Lincoln, Nebraska) (ASE ’15). IEEE Press, 248–259. https://doi.org/10.1109/ASE.2015.32Google ScholarDigital Library