International Journal of Science, Engineering and TechnologyAuthors: Vivek Sharma, Dr. Jasbir Kaur, Assistant Professor Sandhya Thakkar
Abstract: Front-end developers spend a significant portion of their time on repetitive UI markup, hindering productivity and innovation. This paper presents an AI-powered system that converts plain-English descriptions into styled HTML components using Google’s Gemini language model. The tool supports three styling paradigms: plain CSS, utility-first (Tailwind), and component-based (Bootstrap). It provides an interactive editing environment with a Monaco-based code editor and a live preview pane. In a user study with 50 front-end practitioners, the system reduced average component development time by 81.5% (from 12.4 to 2.3 minutes) and received a System Usability Scale score of 86/100. The paper details the architecture, prompt engineering strategy, implementation, and evaluation. Despite its benefits, the system exhibits limitations, including inconsistent accessibility support, sensitivity to prompt phrasing, and lack of conversational refinement. These findings underline the potential and the remaining challenges of applying generative AI to front-end development.
