Sketch2Code: Transform handmade drawings into HTML pages using Artificial Intelligence

Microsoft has introduced a new Artificial Intelligence project called Sketch2Code that will convert a hand-drawn drawing into HTML code.

With Sketch2Code, You can transform any hand-drawn design into HTML code with Artificial Intelligence. All you need to do is upload the image to the site and your HTML is ready..


The procedure is simple, just take a photo or scan your document with the drawing (we recommend that it be a defined drawing) and upload the file to the website so that Artificial Intelligence.

The designs created must correspond to those used at the time of making a website, for example:

  • Buttons
  • Text boxes
  • Tags
  • Hyperlinks
  • Titles
  • Picture boxes
  • Radio button

How does it work?

1. Detect design patterns
Detect design patterns

A trained custom vision model is used to perform object recognition against HTML hand-drawn patterns to detect significant design elements in an image.

2. Understand handwritten text
Understand handwritten text

Each detected item is passed through a Text Recognition Service to extract handwritten content.


3. Understand the structure
Understand the structure

The information of the detected objects and their position within the image is fed to an algorithm that generates an underlying structure..

4. Build HTML
Understand handwritten text

Valid HTML is generated according to the detected layout containing the detected layout elements.

Does it cost?

At the moment this service is provided by Microsoft for free and you can do it as many times as you want, but yes, mention that the data generated will be used to improve the algorithm, so that's a form of payment.

We invite you to visit the website for you to carry out your experiments.

Source: sketch2code

2 thoughts on “Sketch2Code: Transform handmade drawings into HTML pages using Artificial Intelligence”

Leave a Reply

Your email address will not be published. Required fields are marked *

5 × three =