US 11,675,967 B2
Automated front-end code generating method and system for a website
Manish Sharma, Gurugram (IN); Saurabh Gupta, Gurgaon (IN); Alok Gupta, Meerut (IN); and Tarandeep Singh Chandhok, New Delhi (IN)
Assigned to Accenture Global Solutions Limited, Dublin (IE)
Filed by Accenture Global Solutions Limited, Dublin (IE)
Filed on Aug. 30, 2019, as Appl. No. 16/557,335.
Prior Publication US 2021/0064693 A1, Mar. 4, 2021
Int. Cl. G06F 40/14 (2020.01); G06F 16/958 (2019.01); G06F 8/35 (2018.01)
CPC G06F 40/14 (2020.01) [G06F 8/35 (2013.01); G06F 16/958 (2019.01); G06F 16/986 (2019.01)] 17 Claims
OG exemplary drawing
 
1. A method implemented by an automated front-end code generating system for generating automated front-end code for a website, the method comprising:
obtaining, from a client device separate from the automated front-end code generating system, a plurality of design files for a single design of a website, wherein each design file of the plurality of design files comprises a plurality of layers, including a shape layer, a type layer, and an image layer, and corresponds to a different breakpoint each configured for a different type of device and/or display, wherein each breakpoint corresponds with a layout of the website's content on a specific type of device and/or display;
in response to obtaining the plurality of design files as input to the automated front-end code generating system, using the image layer to automatically extract a plurality of extracted image files from the plurality of design files and to automatically clip the plurality of extracted image files into individual image files from the same plurality of design files, and saving the clipped individual image files;
in response to obtaining the plurality of design files as input to the automated front-end code generating system, automatically identifying font families, colors, and spaces between elements contained in each of the plurality of layers; and
in response to obtaining the plurality of design files as input to the automated front-end code generating system, automatically generating responsive code comprising a single package of front-end code for the website based on the obtained plurality of design files, the front-end code comprising hypertext markup language (HTML) code, a cascading style sheet (CSS) file, and the plurality of extracted image files, and wherein the HTML and CSS file combine each of the different breakpoints in the single package of front-end code, and wherein generating responsive code includes automatically converting the identified font families, colors, and spaces between elements into corresponding HTML tags in the generated HTML code, wherein the single package of front-end code causes the generation of icons and/or graphics on the website based on the shape layer, causes the generation of text on the website based on the type layer, and causes the clipped individual image files to be displayed on the website, wherein automatically generating responsive code further includes automatically generating responsive code without additional customization on top of the generated code.