Improving reliability of LLM generated frontend applications through workflow-driven input design
Hu, Xinyi (2026)
2026
Master's Programme in Computing Sciences and Electrical Engineering
Informaatioteknologian ja viestinnän tiedekunta - Faculty of Information Technology and Communication Sciences
This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Hyväksymispäivämäärä
2026-05-29
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tuni-202605286508
https://urn.fi/URN:NBN:fi:tuni-202605286508
Tiivistelmä
Large language models can generate source code from natural-language input. Compared with the work on function-level benchmarks, experimental evidence on generating complete frontend applications is still more limited. The materials a developer actually has on hand are not free-form prompts but workflow artefacts such as requirements, wireframes, and technical specifications. How these artefacts differ as inputs to a code-generating LLM, and how their effect changes with task complexity, is not yet clear.
This thesis examines how workflow-driven input design affects the quality and reliability of LLM-generated React applications. The study is an exploratory experiment with one model, GPT-5.1 Instant accessed through OpenAI's ChatGPT web interface. Across three complexity levels (static rendering, stateful interaction, and asynchronous multi-step workflow), five input conditions were compared, with three runs per cell. The conditions cover requirements only, requirements with a textual or visual wireframe, and two follow-up conditions at the complex level that add a technical specification. Each generated application was built, run, and scored on functional, UI, and code quality metrics, combined into a weighted overall score.
The input effect depended on task complexity. For small and medium tasks, the effect of these input differences was limited. For complex tasks, functional correctness was lower and the results varied more between runs. Failures mainly came from asynchronous logic, rather than visual layout. Adding a technical specification was associated with higher functional correctness, while combining a textual wireframe with it produced less stable results.
The study uses one model, one application domain, and three runs per cell. Within this scope, the results suggest that input artefacts should be selected based on what the task actually demands.
This thesis examines how workflow-driven input design affects the quality and reliability of LLM-generated React applications. The study is an exploratory experiment with one model, GPT-5.1 Instant accessed through OpenAI's ChatGPT web interface. Across three complexity levels (static rendering, stateful interaction, and asynchronous multi-step workflow), five input conditions were compared, with three runs per cell. The conditions cover requirements only, requirements with a textual or visual wireframe, and two follow-up conditions at the complex level that add a technical specification. Each generated application was built, run, and scored on functional, UI, and code quality metrics, combined into a weighted overall score.
The input effect depended on task complexity. For small and medium tasks, the effect of these input differences was limited. For complex tasks, functional correctness was lower and the results varied more between runs. Failures mainly came from asynchronous logic, rather than visual layout. Adding a technical specification was associated with higher functional correctness, while combining a textual wireframe with it produced less stable results.
The study uses one model, one application domain, and three runs per cell. Within this scope, the results suggest that input artefacts should be selected based on what the task actually demands.