Abstract: A method and system of creating an application User Interface (UI) within an Integrated Development Environment (IDE) is disclosed. The system processes wireframes that outline the intended UI structure, identifies relevant functional components, and associates them with predefined elements in a functional repository. A coordinate-based tracing mechanism ensures precise placement of UI elements, facilitating seamless mapping to standard UI functionalities. The system subsequently generates corresponding UI code tailored to various frameworks, such as Angular, React, or Flutter. This approach enhances development efficiency by leveraging reusable UI components while accommodating customization needs, reducing manual effort, and maintaining consistency across applications.

Abstract: A method of creating an application User Interface (UI) within an Integrated Development Environment (IDE) is disclosed. The method may include receiving a wireframe in the IDE for a current requirement of creating the application UI. The wireframe may include a plurality of functional components. The method may further include identifying a functionality corresponding to the wireframe from a plurality of functionalities within a functional repository. The functionality may include a plurality of sub-functions. The method may further include tracing, through a co-ordinate system, the plurality of functional components of the wireframe to identify locations of the plurality of functional components in the wireframe. The method may further include mapping the plurality of functional components to the plurality of pre-defined sub-functions of the functionality. The method may further include automatically generating a code for creating the application UI based on the mapping.