Automatic Conversion of Image Design into HTML and CSS

The article offers a method to automatically convert web design into HTML/CSS code, a task typically performed by web application developers. The research's purpose is to save programmers time to iterate the logic from the design. The used approach extracts and recognizes a list of graphic components—structures, types, sections, elements, and their styles, as well as information about their location in the graphic template. The presented solution automatically converts the pre-built web interface into HTML and CSS code using Adobe XD and existing scripts inside him. Several conversion graphics tools are reviewed and the advantages and capabilities of three of the tools are shown in a comparison table. This is how Adobe XD stood out from the other two and was chosen when prototyping the initial design. The proposed solution can help people who are just starting in graphic design and want to learn how to easily transform their ideas into HTML/CSS source code.