Introduction

In this article, we will learn how to convert your sketch to HTML code with Sketch2Code.
Sketch2CodeIs a brand-new AI project from Microsoft and the good news is that it is absolutely free of cost.
Using the Sketch2Code, we can transform any handmade drawing or wireframe design into an HTML code with AI.
Step 1
Create a handmade design or wireframes/Mockup.
Microsoft Sketch 2 Code
Here, I have created a sample Sign In page with 2 textboxes and one Button.
Step 2
Open the site here.
Step 3
Upload the handmade design or wireframes/Mockup, by clicking on Upload Design button.
Microsoft Sketch 2 Code
It will take hardly a minute to convert into HTML.
Microsoft Sketch 2 Code
That's it -- your HTML from your Sketch is ready to use, you can download the HTML by clicking on 'Download your HTML Code'
Microsoft Sketch 2 Code
Check your HTML and make the necessary changes if there are any.
Microsoft Sketch 2 Code
Also, you can directly take a picture and process images to HTML.
How it Works,
Microsoft Sketch 2 Code
Sketch2code detects design patterns which we have uploaded, then it understands the handwritten text and the structure, and the engine builds the HTML based on the best match as shown in the below screen.
Microsoft Sketch 2 Code
By using this technology we can build a system that understands what a UI/UX team or team members have drawn on a whiteboard and can translate that understanding to HTML code. This way we can generate HTML wireframes directly from a hand-drawn image.
Microsoft Sketch 2 Code
You can also predict object details.
Microsoft Sketch 2 Code
You can also check the video here: https://youtu.be/uwW2vSGDrlc
What a great way of thinking and using Artificial Intelligence a big thank you to AI Team @Microsoft.
Reference - https://channel9.msdn.com/Shows/AI-Show/Sketch2Code