Which Prompting Technique is Better? Improving Vibe Coding Code Quality with Efficient Prompt Design for Web Front-End Development

This paper examines the impact of different prompting techniques or strategies on code quality in web front-end development using large language models (LLMs) for vibe coding. While LLMs have shown strong capabilities in generating functional code, the effectiveness of different prompting paradigms remains underexplored in practical development workflows. We address this gap by comparing two widely discussed approaches: zero-shot prompting and prompt chaining. In the zero-shot paradigm, the entire specification, including layout, styling, and logic, is combined into a single comprehensive instruction, requiring the model to synthesize multiple constraints simultaneously. In contrast, prompt chaining divides the specification into sequential sub-tasks, with each intermediate output informing the next, simulating an iterative development process. Our experimental evaluation measures code correctness, maintainability, and adherence to design requirements for both techniques. Results show that prompt chaining consistently improves modularity and reduces error propagation, while zero-shot prompting offers faster generation but at the expense of computer code structural consistency. These findings highlight the trade-offs between efficiency and quality in LLM-assisted front-end development and provide actionable insights for optimizing prompting techniques in real-world coding environments. The codebase created for this research is available at: https://github.com/mhorvat/vibecoding_frontend