Authors : Thisaranie Kaluarachchi

Volume/Issue : Volume 10 - 2025, Issue 11 - November

Google Scholar : https://tinyurl.com/27sr6yz2

Scribd : https://tinyurl.com/yzd3727k

DOI : https://doi.org/10.38124/ijisrt/25nov339

Note : A published paper may take 4-5 working days from the publication date to appear in PlumX Metrics, Semantic Scholar, and ResearchGate.

Note : Google Scholar may take 30 to 40 days to display the article.

Abstract : The emergence of artificial intelligence (AI) and machine learning has transformed many dimensions of software engineering, including the way websites are designed and developed. Traditionally, website creation has been a labour- intensive process involving manual translation of high-fidelity design artifacts such as sketches, wireframes, and mock-ups into functional code. Despite the availability of visual editors and content management systems, the gap between design intent and implementation accuracy remains a persistent challenge. This research presents a comprehensive synthesis of research in AI-driven automatic website generation, with particular attention to the evolution of methods, their underlying computational models, and their integration with modern web design practices. The discussion begins by tracing the development of website generation approaches from heuristic and template-based systems to machine learning–assisted and deep learning–based frameworks. It categorizes existing methods into three major paradigms, mock-up-driven, example-based, and AI-driven website generation, and examines their methodological foundations, advantages, and limitations. The synthesis integrates insights from computer vision, natural language processing, and code generation research to identify common principles underlying automated design translation. Building on this literature, the research introduces a conceptual framework that unifies the processes of visual input interpretation, graphical user interface (GUI) element detection, semantic classification, hierarchical structuring, and code synthesis. The proposed framework serves as both an analytical model and a design roadmap for future research in automatic website generation. The research concludes by outlining emerging directions such as multimodal generative AI, human-in-the-loop design collaboration, and the integration of explainable AI principles in web automation. Overall, this synthesis advances the theoretical understanding of design automation and provides a foundation for future innovations that bridge the creative and computational aspects of web engineering.

Keywords : Automatic Website Generation, Artificial Intelligence, Computer Vision, Machine Learning, GUI Automation, Web Design Automation, Code Generation, Design Science.

References :

1. Nguyen, T. A., & Csallner, C. (2015, November). Reverse engineering mobile application user interfaces with remaui (t). In 2015 30th IEEE/ACM international conference on automated software engineering (ASE) (pp. 248-259). IEEE.
2. Huang, F., Canny, J. F., & Nichols, J. (2019, May). Swire: Sketch-based user interface retrieval. In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems (pp. 1-10).
3. Rivero, J. M., Rossi, G., Grigera, J., Burella, J., Luna, E. R., & Gordillo, S. (2010, July). From mockups to user interface models: an extensible model driven approach. In International Conference on Web Engineering (pp. 13-24). Berlin, Heidelberg: Springer Berlin Heidelberg.
4. Beltramelli, T. (2018, June). pix2code: Generating code from a graphical user interface screenshot. In Proceedings of the ACM SIGCHI symposium on engineering interactive computing systems (pp. 1-6).
5. Han, L., Xu, Y., & Zhang, C. (2020). SketchCode: Generating HTML code from hand-drawn web wireframes using gated recurrent units. Computers & Graphics, 92, 72–83.
6. Kaluarachchi, T., & Wickramasinghe, M. (2023). A systematic literature review on automatic website generation. Journal of Computer Languages, 75, 101202. https://doi.org/10.1016/j.cola.2023.101202
7. Moran, K., Bernal-Cárdenas, C., Curcio, M., Bonett, R., & Poshyvanyk, D. (2018). Machine learning-based prototyping of graphical user interfaces for mobile apps. IEEE transactions on software engineering, 46(2), 196-221.
8. de Souza Baulé, D., von Wangenheim, C. G., von Wangenheim, A., & Hauck, J. C. (2020). Recent Progress in Automated Code Generation from GUI Images Using Machine Learning Techniques. J. Univers. Comput. Sci., 26(9), 1095-1127.
9. Gui, Y., Wan, Y., Li, Z., Zhang, Z., Chen, D., Zhang, H., ... & Zhang, X. (2025, April). UICoPilot: Automating UI synthesis via hierarchical code generation from webpage designs. In Proceedings of the ACM on Web Conference 2025 (pp. 1846-1855).
10. Abdelhamid, A. A., Alotaibi, S. R., & Mousa, A. (2020). Deep learning‐based prototyping of android GUI from hand‐drawn mockups. IET Software, 14(7), 816-824.
11. Chen, Y., Ding, S., Zhang, Y., Chen, W., Du, J., Sun, L., & Chen, L. (2025). DesignCoder: Hierarchy-Aware and Self-Correcting UI Code Generation with Large Language Models. arXiv preprint arXiv:2506.13663.
12. Saravanan, V., SS, M. A., Fatima, N. S., & Mahalakshmi, P. (2021). Automated web design and code generation using deep learning. Turkish Journal of Computer and Mathematics Education, 12(6), 364-373.
13. Myers, B. A., Hudson, S. E., & Pausch, R. (2015). WebCrystal: Example-based design exploration for web development. ACM Transactions on Computer-Human Interaction, 22(6), 1–29.
14. Behrang, F., Ali, A., & Karim, A. (2021). GUIFetch: Retrieving graphical user interface source code from repositories using visual similarity. Information and Software Technology, 135, 106560.
15. Tocchini, D. (2017). The Grid: AI-based web design for everyone. The Grid Press Release.
16. Kosmayer, D. (2019). Bookmark: An AI-driven website builder platform. Bookmark Inc. White Paper.
17. Kaluarachchi, T. T., Dissanayake, D. M. S., & Wickramasinghe, M. I. E. (2025). Unsupervised Discovery of Salient Design Features of Websites. The International Journal on Advances in ICT for Emerging Regions, 18(2). https://doi.org/10.4038/icter.v18i2.7301
18. Zhu, Z., Xue, Z., & Yuan, Z. (2018, December). Automatic graphics program generation using attention-based hierarchical decoder. In Asian Conference on Computer Vision (pp. 181-196). Cham: Springer International Publishing.
19. Han, Y., He, J., & Dong, Q. (2018, October). CSSSketch2Code: An automatic method to generate web pages with CSS style. In Proceedings of the 2nd International Conference on Advances in Artificial Intelligence (pp. 29-35).
20. Liu, Y., Hu, Q., & Shu, K. (2018, November). Improving pix2code based Bi-directional LSTM. In 2018 IEEE International Conference on Automation, Electronics and Electrical Engineering (AUTEEE) (pp. 220-223). IEEE.
21. Kim, B., Park, S., Won, T., Heo, J., & Kim, B. (2018, October). Deep-learning based web UI automatic programming. In Proceedings of the 2018 Conference on Research in Adaptive and Convergent Systems (pp. 64-65).
22. Suleri, S., Sermuga Pandian, V. P., Shishkovets, S., & Jarke, M. (2019, May). Eve: A sketch-based software prototyping workbench. In Extended abstracts of the 2019 CHI conference on human factors in computing systems (pp. 1-6).
23. Hassan, S., Arya, M., Bhardwaj, U., & Kole, S. (2018). Extraction and classification of user interface components from an image. International Journal of Pure and Applied Mathematics, 118(24), 1-16.
24. Avdić, A. (2024). Generative AI Tools in Web Design. In Sinteza 2024-International Scientific Conference on Information Technology, Computer Science, and Data Science (pp. 392-397). Singidunum University.
25. Dosovitskiy, A. (2020). An image is worth 16x16 words: Transformers for image recognition at scale. arXiv preprint arXiv:2010.11929.
26. Radford, A., Kim, J. W., Hallacy, C., Ramesh, A., Goh, G., Agarwal, S., ... & Sutskever, I. (2021, July). Learning transferable visual models from natural language supervision. In International conference on machine learning (pp. 8748-8763). PmLR.
27. Borah, A. R., Rani, K. P., Ziara, S., Lakhanpal, S., & Vidyadhari, C. (2025, February). AI-Assisted Data Modelling and High-Resolution Image Synthesis: An Interactive Framework with Latent Diffusion Model Visualization. In 2025 International Conference on Intelligent Control, Computing and Communications (IC3) (pp. 770-776). IEEE.
28. Sinha, N., & Karim, R. (2013, August). Compiling mockups to flexible uis. In Proceedings of the 2013 9th Joint Meeting on Foundations of Software Engineering (pp. 312-322).
29. Hashimoto, Y., & Igarashi, T. (2005). Retrieving Web Page Layouts using Sketches to Support Example-based Web Design. In SBM (pp. 155-164).
30. Watson, I., & Marir, F. (1994). Case-based reasoning: A review. The knowledge engineering review, 9(4), 327-354.
31. Kadenhe, N., Al Musleh, M., & Lompot, A. (2025, August). Human-AI Co-Design and Co-Creation: A Review of Emerging Approaches, Challenges, and Future Directions. In Proceedings of the AAAI Symposium Series (Vol. 6, No. 1, pp. 265-270).
32. Achiam, J., Adler, S., Agarwal, S., Ahmad, L., Akkaya, I., Aleman, F. L., ... & McGrew, B. (2023). Gpt-4 technical report. arXiv preprint arXiv:2303.08774.
33. Yun, S., Thushara, R., Bhat, M., Wang, Y., Deng, M., Wang, J., ... & Shen, Z. (2024). Web2code: A large-scale webpage-to-code dataset and evaluation framework for multimodal llms. Advances in neural information processing systems, 37, 112134-112157.
34. Shneiderman, B. (2022). Human-centered AI. Oxford University Press.
35. Kaluarachchi, T., & Wickramasinghe, M. (2024). WebDraw: A machine learning-driven tool for automatic website prototyping. Science of Computer Programming, 233, 103056. https://doi.org/10.1016/j.scico.2023.103056