IP Library Granted Patent US 12,379,906
Granted Patent B2
US 12,379,906 · App. 18/226,790 · Granted Aug 5, 2025

Method and system for creating application user interface within integrated development environment

Inventors: Jishnu Raghu (Bengaluru, IN); Hareesh (Bengaluru, IN)
Assignee: Mindtree Limited
G06F8/38G06F8/10
View Patent ↗
Loading inventors, assignments & file history…
Monitor This Case
Get email alerts when status or documents change.
Order Certified Copies
Most orders are placed with the USPTO same day — all within 24 business hours.
Order via The Patent Place →
Pre-filled with this patent's details
Quick Facts
Patent No.
US 12,379,906
App. No.
18/226,790
Granted
Aug 5, 2025
Kind
B2
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.

Claims (37)

1. A method for creating an application User Interface (UI) within an Integrated Development Environment (IDE), the method comprising:

receiving, by a processing device, a wireframe comprising a plurality of functional components, in the IDE, for a current requirement of creating the application UI;

identifying, by the processing device, a functionality corresponding to the wireframe from a plurality of functionalities within a functional repository, wherein the functionality comprises a plurality of predefined sub-functions;

tracing, by the processing device and 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;

mapping, by the processing device, the plurality of functional components to the plurality of predefined sub-functions of the functionality; and

creating a hierarchal semantic tree of a plurality of semantics corresponding to functional components of the wireframes and storing the plurality of semantics into the functional repository; and

automatically generating, by the processing device, a code for creating the application UI based on the mapping;

receiving the requirement to create the application UI; and

extracting the wireframe based on the requirement in the IDE.

2. The method of claim 1 , wherein the predefined sub-functions is customizable.

3. The method of claim 1 , further comprising generating one or more branding styles based on the identified locations of the plurality of functional components in the wireframe.

4. The method of claim 1 , wherein the plurality of pre-defined sub-functions comprises semantics corresponding to the plurality of functional components.

5. A system for creating an application User Interface (UI) within an Integrated Development Environment (IDE), the system comprising:

a processor; and

a memory communicatively coupled to the processor, wherein the memory stores processor instructions, which when executed by the processor, cause the processor to:

receiving, by a processing device, a wireframe comprising a plurality of functional components, in the IDE, for a current requirement of creating the application UI identifying, by the processing device, a functionality corresponding to the wireframe from a plurality of functionalities within a functional repository, wherein the functionality comprises a plurality of predefined sub-functions;

tracing, by the processing device and 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;

mapping, by the processing device, the plurality of functional components to the plurality of predefined sub-functions of the functionality; and

creating a hierarchal semantic tree of a plurality of semantics corresponding to functional components of the wireframes and storing the plurality of semantics into the functional repository; and

automatically generating, by the processing device, a code for creating the application UI based on the mapping;

receive the requirement to create the application UI; and

extract the wireframe based on the requirement in the IDE.

6. The system of claim 5 , wherein the predefined sub-functions is customizable.

7. The system of claim 5 , wherein the processing device instructions further cause the processing device to generate one or more branding styles based on the identified locations of the plurality of functional components in the wireframe.

8. The system of claim 5 , wherein the plurality of pre-defined sub-functions comprises semantics corresponding to the plurality of functional components.

9. A computer program product for creating an application User Interface (UI) within an Integrated Development Environment (IDE), the computer program product being embodied in a non-transitory computer readable storage medium of a processing device and comprising computer instructions for:

receiving a wireframe comprising a plurality of functional components, in the IDE, for a current requirement of creating the application UI;

identifying a functionality corresponding to the wireframe from a plurality of functionalities within a functional repository, wherein the functionality comprises a plurality of predefined sub-functions;

tracing the plurality of functional components of the wireframe to identify locations of the plurality of functional components in the wireframe;

mapping the plurality of functional components to the plurality of predefined sub-functions of the functionality; and

creating a hierarchal semantic tree of a plurality of semantics corresponding to functional components of the wireframes and storing the plurality of semantics into the functional repository; and

automatically generating a code for creating the application UI based on the mapping;

receiving the requirement to create the application UI; and

extracting the wireframe based on the requirement in the IDE.

10. The computer program product of claim 9 , wherein the predefined sub-functions is customizable.

11. The computer program product of claim 9 , wherein the computer instructions further configured for generating one or more branding styles based on the identified locations of the plurality of functional components in the wireframe.

12. The computer program product of claim 9 , wherein the plurality of pre-defined sub-functions comprises semantics corresponding to the plurality of functional components.

Assignments (1)
ASSIGNMENT OF ASSIGNOR'S INTEREST Recorded Jul 27, 2023
From: RAGHU, JISHNU; ., HAREESH
To: MINDTREE LIMITED
Reel/Frame 064397/0429 →
Priority Claims (1)
IN 202241046857 · Aug 17, 2022 · national
Continuity (1)
Related Publication 20240061658A1 · Feb 22, 2024
References Cited (23)
US 7404177B1 · Greenfield · 2008 [cited by examiner]
US 8381180B2 · Rostoker · 2013 [cited by applicant]
US 8413062B1 · Little · 2013 [cited by examiner]
US 8429203B2 · Perez et al. · 2013 [cited by applicant]
US 8438495B1 · Gilra · 2013 [cited by examiner]
US 8943468B2 · Balasubramanian · 2015 [cited by examiner]
US 9372683B2 · Szocs · 2016 [cited by examiner]
US 10296308B2 · Lance · 2019 [cited by examiner]
US 10331423B1 · Parsolano · 2019 [cited by applicant]
US 10489126B2 · Kumar · 2019 [cited by examiner]
US 10635413B1 · Krishnamoorthy · 2020 [cited by examiner]
US 10854180B2 · Silverstein · 2020 [cited by examiner]
US 11080025B2 · Williamson · 2021 [cited by examiner]
US 11221833B1 · Huang · 2022 [cited by examiner]
US 12147646B2 · Jacobson · 2024 [cited by examiner]
US 20120060141A1 · Demant · 2012 [cited by examiner]
US 20190095225A1 · Nandagopal · 2019 [cited by applicant]
WO 2008147616A1 · 2008 [cited by applicant]
Ramon et al., “The Guizmo Framework for Generating Final User Interfaces from Wireframes”, ACM, pp. 82-84 (Year: 2023). [cited by examiner]
Gajjar et al., “Akin: Generating UI Wireframes From UI Design Patterns Using Deep Learning”, ACM, pp. 40-42 (Year: 2021). [cited by examiner]
Chen et al, “Wireframe-based UI Design Search through Image Autoencoder”, ACM, 1-31 (Year: 2020). [cited by examiner]
Huang et al, “Leveraging the Crowd for Creating Wireframe-based Exploration of Mobile Design Pattern Gallery”, ACM, pp. 1-3 (Year: 2013). [cited by examiner]
Kolthoff et al, “GUI2WiRe: Rapid Wireframing with a Mined and Large-Scale GUI Repository using Natural Language Requirements”, ACM, pp. 1-5 (Year: 2020). [cited by examiner]