To solve the problems of ambiguous requirement expression, difficulty in balancing visual reproduction and interactive correctness, and lack of verifiable feedback in the generation of web front-end components by generative artificial intelligence, this paper proposes a multimodal requirement parsing and rendering feedback closed-loop method that integrates natural language, interface screenshots, and engineering context. First, map user intent, visual elements and component library constraints into structured requirement vectors; then, build a component hierarchy graph and generate code according to joint semantic, visual, functional and accessibility goals. Next, the generated components are run in an isolated browser, and then iteratively improved by altering the DOM structure, screenshot similarity, interaction tests, and engineering quality gatekeeping. The engineering realisation is a multi-tier architecture that includes a model orchestration layer, component planning layer, code synthesis layer, sandbox rendering layer and quality governance layer. According to the review statistics based on publicly available data from Design2Code and WebCode2M, while mainstream models have a good foundation for overall visual similarity, the gap between models widens significantly with an increase in page code length and structural complexity, and element recall, layout relationships, and interactive behaviour remain the main bottlenecks. Based on the research results, automated generation systems for real-world engineering projects should move beyond a one-time prompt generation model and transition to a closed-loop system of "structured planning - constrained synthesis - executable verification - difference-driven repair".

Shengping Liu. Automatic Generation Method and Implementation of Web Front-End Components Based on Generative AI. International Journal of Big Data Intelligent Technology (2026), Vol. 7, Issue 2: 116-127. https://doi.org/10.38007/IJBDIT.2026.070212.

[1] Si C, Zhang Y, Li R, Yang Z, Liu R, Yang D. Design2Code: Benchmarking Multimodal Code Generation for Automated Front-End Engineering. Proceedings of NAACL-HLT 2025, 2025: 3956-3974. DOI: 10.18653/v1/2025.naacl-long.199.

[2] Laurençon H, Tronchon L, Sanh V. Unlocking the Conversion of Web Screenshots into HTML Code with the WebSight Dataset. arXiv preprint arXiv:2403.09029, 2024.

[3] Gui Y, Li Z, Wan Y, Shi Y, Zhang H, Su Y, Chen B, Chen D, Wu S, Zhou X, Jiang W, Jin H, Zhang

[4] Wan Y, Wang C, Dong Y, Wang W, Li S, Huo Y, Lyu M R. Automatically Generating UI Code from Screenshot: A Divide-and-Conquer-Based Approach. arXiv preprint arXiv:2406.16386, 2024.

[5] Lin Z, Zhou Z, Zhao Z, Wan T, Ma Y, Gao J, Li X. WebUIBench: A Comprehensive Benchmark for Evaluating Multimodal Large Language Models in WebUI-to-Code. arXiv preprint arXiv:2506.07818, 2025.

[6] Wang, B. (2025). Methods of Load Optimization for Computer Systems Based on Physical Principles.

[7] Guo, X. (2025, March). Research on Blockchain-Based Financial AI Algorithm Integration Methods and Systems. In 2025 IEEE International Conference on Electronics, Energy Systems and Power Engineering (EESPE) pp.816-821. IEEE.

[8] Guo, X. (2025, April). Research on Financial Trading Algorithms Based on Deep Reinforcement Learning. In 2025 IEEE 3rd International Conference on Control, Electronics and Computer Technology (ICCECT) pp.1711-1715. IEEE.

[9] Yu, X. (2026). Exploration of Multi-Channel Conversion Path Optimization Methods Based on A/B Testing.

[10] Jing, X. (2025, November). In-Depth Analysis of the Optimization Decision Model of Financial Investment Portfolio Based on Machine Learning Algorithms in Python Scikit-Learn Library. In International Conference on Computational Technologies for Research in Data Analytics pp.130-140. Cham: Springer Nature Switzerland.

[11] Liu, X. (2026). Research on the Application of Artificial Intelligence in Consumer Privacy Data Protection. Procedia Computer Science, 279, 956-965.

[12] Liu, X. (2026). Construction of Consumer Data Privacy Protection System Based On Blockchain Technology. Procedia Computer Science, 282, 2082-2091.

[13] Huijie Pan. Discussion on Low-Latency Computing Strategies in Real-Time Hardware Generation. International Journal of Neural Network (2025), Vol. 4, Issue 1: 57-64.

[14] Yuan, Y. (2026). Research on Memory Management and Dynamic Reasoning Methods for Intelligent Agents Based on Large Language Models.

[15] Yang, Y. (2026). Causal Inference-based Identification of Incremental Effects in Digital Advertising and Optimization Pathways for Resource Allocation. Advances in Computer and Communication, 7(2).

[16] Sun, L. (2026). Consistency Optimization Strategies for Distributed Advertising Systems Under Cross-regional Deployment. Advances in Computer and Communication, 7(2).

[17] Han, W. (2025, November). An Empirical Study on Building a High-precision Forecasting System for Financial Market Trends Based on the PyTorch Deep Learning Framework. In International Conference on Computational Technologies for Research in Data Analytics (pp. 518-528). Cham: Springer Nature Switzerland.