Turn Hand Drawings into HTML Code With Microsoft AI

Convert Hand Drawing to HTML Code

In this article I will share how to convert hand drawings into HTML Code with the help of Microsoft’s AI-powered web application to convert designs for free. Creating a web design is not easy. First, you have to create or draw a prototype design and then you have to code to create the HTML wireframe.

The coding part takes a lot of time and may need some revisions. But what if you could skip the coding part and directly convert the hand-drawn designs into HTML code? The technology to automate the coding of such designs now exists and Microsoft is just doing it with their experimental AI project.

Sketch2Code is a free web application where you can convert hand drawings into HTML Codes. The app uses a custom Computer Vision model that recognizes objects and patterns, makes predictions to detect meaningful design elements, and generates HTML snippets. This tool is completely free to use and allows you to convert one design image at a time.

Turn Hand Drawings into HTML Code With Microsoft AI

Sketch2Code is powered by Microsoft Azure Cloud Platform and Azure Cloud AI Web Services. It uses custom Vision APIs and Computer Vision APIs for object detection, OCR, and handwriting detection. To use this app, just visit the Sketch2Code page and upload your design image there.

If you access the app on the device with a camera, you can also take a picture of your design directly. Feature “Take a Picture” this is useful for quickly converting whiteboard designs into HTML code.

Convert Hand Drawing to HTML-1 Code

When you upload an image by any method, it takes a few seconds to process the hand-drawn design identification and make predictions. Then, it shows you a preview of the HTML snippet of your design side by side with the original image.

Convert Hand Drawing to HTML-2 Code

From this preview screen, you can download the generated HTML code of your design. You get an HTML file containing snippets for your design. You can open the file inside a web browser to see the result.

Convert Hand Drawing to HTML-3 Code

Along with the download button, you also get another button which shows you the details of the predicted object. This button takes you to a new page where you see how this app works. It shows you an overview of transforming hand-drawn designs into HTML code by highlighting AI-based object detection and prediction.


Red thread: Sketch2Code is a great app that has great potential to revolutionize the way we create web designs. The results are great although it depends on the design as well. The use case of this app is very limited at the moment, you can use it with basic design and page elements.

However, drawing on a whiteboard and then viewing the generated code to test on a web page is a pretty good new idea.