This article covers a free web app to convert hand-drawn design into HTML Code for free. Creating a web design is not easy. First, you have to create or draw the prototype design and then have to code it to make working HTML wireframes. The coding part takes lots of time and might need multiple revisions. But what if you can skip the coding part and directly convert the hand-drawn designs into HTML code? Technologies are available to automate the design coding and Microsoft just did that with their experimental AI project.
Sketch2Code is a web app where you can upload an image of hand-draw design convert into HTML code. This app uses custom Computer Vision models that recognize the objects and patterns, make the predictions to detect meaningful design elements, and generate HTML snippets. The tool is completely free to use and allows you to convert one design image at once.
Also read: Turn Figma Design into Android, iOS App without Coding
Convert Hand-Drawn Design into HTML Code Free
Sketch2Code is backed by Microsoft’s Azure Cloud Platform and Azure Cloud AI Webservices. It uses custom Vision APIs and Computer Vision APIs for object detection, OCR, and handwriting detection. To use this app, simply visit the landing page and upload your design image there. If you are accessing the app on a device with a camera, you can also take a picture of your design directly. This “Take a Picture” feature is handy to quickly covert whiteboard designs into HTML code.
When you upload an image by any method, it takes a few seconds to process the identify the hand-drawn design and make predictions. Then, it shows you a preview of the HTML snippet of your design side by side with the original image.
From this preview screen, you can download the generated HTML code of your design. You get an HTML file containing the snippet for your design. You can open the file within the web-browser to see the results.
Along with the download button, you also get another button that shows you the predicted object details. This button takes you to a new page where you get a glimpse into how this app works. It shows you a transformation overview of the hand-drawn design into HTML code by highlighting AI-based object detection and predictions.
Wrap Up
Sketch2Code is a nice app that has great potential to revolutionize the way we create web designs. The results are surprisingly great although it depends on the design as well. The use case of this app is pretty limited at the moment, you can use it with basic designs and page elements. Anyway, drawing on a whiteboard and then seeing the resulting code to test their new web page ideas immediately is pretty great.
