This thesis investigates the application of Artificial Intelligence (AI) in front-end design and coding, specifically examining how AI enhances the efficiency of front-end development and the potential for front-end. The emergence of AI tools such as ChatGPT and GitHub Copilot presents opportunities to streamline front-end processes, reduce manual coding workload, and boost overall design and development efficiency. By comparing AI-assisted workflows with traditional front-end workflows, this study analyzes the practical applications of AI in front-end development sub-tasks, including code layout design and CSS styling. The process of restoring the designer's design draft into code is one of the main tasks of the front-end. The study addresses the questions: “How do AI tools affect the efficiency and accuracy of layout design and CSS styling in front-end development?” and “What are the perceptions of front-end developers and designers regarding the effectiveness of AI tools in improving workflow efficiency in design and development tasks?” It also examines the impact of AI tools on the automatic generation of code from design drafts and the work efficiency of front-end developers. Utilizing a mixed methods research approach, the study includes questionnaires and semi-structured expert interviews to gather data, followed by controlled experiments to validate findings. The combined data analysis leads to comprehensive conclusions about the effect of AI tools in front-end development.

The research results show that although AI tools are slightly improved efficient in automated code generation and prototyping, they are less efficient in layout design and CSS style generation, and there is an inability to understand the prompts accurately and leakage of confidential information.