In modern web development, the design-to-code process is a critical bottleneck, often characterized by inefficiencies and inconsistencies between initial design concepts and implemented user interfaces. Bridging this gap demands innovative solutions that streamline the translation of design artefacts, such as wireframes/mockups, into functional front-end components. Generation of user interface (UI) elements has also been in the spotlight of researchers all along. There are several solutions to support the transformation of different automation processes and elements, but the fact that common methods and tools for generating UIs are still not widely used shows that this problem has not been solved yet. In this paper, we propose model-driven approach to automate the generation of front-end source code from wireframe representations and, thereby facilitating rapid prototyping and enhancing collaboration between designers and developers. The paper offers the conceptual solution for front-end components generation from the mockups developed in the UI design tools, where it is possible to have formal definition of the UI elements source code. The offered solution is approbated on the abstract practical example, where mockups designed in the tool draw.io are used as a source for generation of front-end components of the web application deployed in AngularJS framework.