Optimizing Web Design Code Generation
Srinivas Rao Chavan · 2024
Website Creation is revolutionized by automated code generation, reducing the development effort, speeding the production process, and ensuring consistency in design. Automated web design code generation has emerged as a transformative tool bridging the gap between design and development. In this research, a website design tool is developed and used to create visual layouts, exporting them as JSON designs. These JSON outputs were then transformed into textual prompts, optimized using established HCI principles and UI/UX rules to ensure consistency, visual hierarchy, aesthetics and minimalistic design, accessibility, user-friendly navigation and flexibility. These generated prompts were fed into large language models for code generation. In this research, three methodologies are compared: pretrained large language models, retrieval augmented generation (RAG), and finetuning. While the pretrained models provided basic outputs with limited adaptability, RAG improved contextual relevance but was constrained by storage requirements and limited flexibility in adapting to diverse designs. Finetuning on a custom dataset of 450 diverse web design templates demonstrated superior performance, producing accurate, responsive, and aesthetically coherent designs that adhered to HCI principles and UI/UX rules. Each methodology is thoroughly evaluated, and its strengths and limitations are clearly outlined. This study highlights the efficacy of finetuning in automating and enhancing design to code generation. In this research, a user survey was conducted to evaluate the generated web designs based on various attributes of web design.