Directly convert your hand-drawn page sketch to HTML code with Sketch2Code

Published by Apoorve Kumar Verma on

What is Sketch2Code?

Sketch2Code is a software that uses AI to transform a handwritten user interface design from a picture to a valid HTML markup code.

How to use Sketch2Code

Step 01:

Firstly think about any page design and draw it into the page.

Example: Here I have created a Sign-Up form page.

Sketch2Code Sign-Up form page

Step 02:

Open Sketch2Code website https://sketch2code.azurewebsites.net/.

Step 03:

You can upload the handmade design by clicking on the Upload Design button. 

Waiting…

Here Sketch is ready to use, you can download the HTML by clicking on ‘Download your HTML Code.

Sketch2Code Workflow:

01: Detect Design Patterns

A Custom Vision Model trained to perform object recognition against HTML hand-drawn patterns are used to detect meaningful design elements into an image. 

02: Understand handwritten text

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

03: Understand Structure

The information of the detected objects and their position inside the image is feed into an algorithm that generates underlying structure.

04: Build HTML

A valid HTML is generated accordingly to the detected layout containing the detected design elements.

Sketch2Code architecture:

Thank You πŸ™‚


6 Comments

Vatsala · December 31, 2019 at 5:50 pm

Such a stunning and unbelievable thing..which can help a lot..great job.!!

Ankit · January 1, 2020 at 3:53 am

Wow! Its a great help for those are not able to code.
But I don’t think so, it can create complex html design πŸ˜ƒ
Anyway, Thanks for this great post.

    Apoorve Kumar Verma · January 1, 2020 at 6:25 am

    Thank you sir! In future sketch2code will also create Complex html design 😁#Ai

Arun · January 1, 2020 at 9:29 am

Bhai amazing handy trick. Appreciate it keep going….very usefulπŸ€˜πŸ‘Œ

    Apoorve Kumar Verma · January 1, 2020 at 6:26 am

    Thank you so much Arn7πŸ˜„

Leave a Reply

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

%d bloggers like this: