The Inner Detail

The Inner Detail

Home » Technology » Artificial Intelligence » Microsoft’s Sketch2Code turns your Hand-drawn Designs into HTML code with AI

Microsoft’s Sketch2Code turns your Hand-drawn Designs into HTML code with AI

Microsoft, the personification of operating system in PCs/laptops, that had mastered 74% of people in the world with its Windows OS, is now on-stream in the works of AI through its ‘Microsoft AI’, one of the research arms of Microsoft. The American conglomerate’s AI lab holds number of tech & innovative projects, that would be anytime implemented to the reality world. Such a project, that was publicized for use, is this AI tool called ‘Sketch2Code’, that helps users to turn their hand-drawn designs into a HTML code. Doing so, people need not worry of writing codes to implement their idea.


Nominal way of enumerating a designer’s idea drawn on the whiteboard, is demanding a coder to bring life to that UI designs via codes. This further step of ‘demanding’ gets eliminated if one uses Sketch2Code.

“Creative design process begins with collaboration on a whiteboard where designers share ideas. Once a design is drawn, it is usually manually translated into a working HTML wireframe. This takes time and delays the design process,” says Microsoft.

Leveraging the AI & its Computer-Vision service, Microsoft has built an AI system, that is capable of generating HTML code directly from an image. Computer Vision is a discipline inside artificial intelligence that gives an application the capability to see and understand what it is seeing. Using Microsoft Cognitive Services, we can train Custom Computer Vision with millions of images and enable object detection for a wide range of types of objects.

For this, two tools – custom vision service that trains models to detect HTML objects and text recognition tool to extract handwritten text in the design are deployed to generate HTML snippets. And then by inferring the layout of the design from the position of the identified elements final HTML code could be generated.

“Designers can collaborate and draw on a whiteboard—then see the resulting code to test their new web page ideas immediately in matter of seconds”.

Sketch2Code Architecture

You can try out converting your design into a HTML code, in their website!

Microsoft besides this, is now concentrating on Metaverse, as the company foresees to have meetings in the virtual world. More of that, its cloud-computing wing aims to store Data in DNA – an innovative approach to compensate the rising storage-problem. Have a look here!

Scroll to Top