From Mock-ups to Code: A Conceptual Synthesis of AI-Driven Automatic Website Generation

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.