Ever wondered how cool would it be to just draw something on a paper and let it come to life in the real world? Well, that’s just something Microsoft has achieved with the AI powered Skletch2Code web app which can convert hand-written drawings from a whiteboard to HTML websites in a click of a button.
Sketch2Code can convert any hand-drawn layout of a website into HTML in mere seconds. The tool uses Microsoft’s Computer Vision AI service to detect HTML objects in a drawing, and then uses text recognition to extract the handwritten text in the drawing to combine and build HTML snippets of all the design elements in the image.
This makes it insanely fast for web designers and developers to build HTML prototypes of a website in many different styles in a matter of seconds. If you’re interested in knowing how this works in the backend, be sure to read the technical details about Sketch2Code on Microsoft’s website.
Below is a quick tutorial to show you how simple it’s to use Sketch2Code to convert website layout drawings into real HTML pages.
First off, draw a layout of your website on a whiteboard or a white sheet. Then, take a picture of it and save it to your computer. After that, click on the button below to open the Sketch2Code web app in your browser.
Once you have the website open, click on the Upload Design button and select the picture of the website layout that you drew on a whiteboard or white sheet.
After uploading the hand-drawn website design, sit back and watch Sketch2Code use AI automagically generate a HTML page based on the layout in the image you uploaded.
Once the process is finished, you’ll be shown a preview off the freshly generated HTML page along with the option to download the full code. Click on the Download your HTML Code button to get the .html file of your hand-drawn website layout so you can test and preview it locally in your web browser.
That’s it. We hope Sketch2Code saves you time in prototyping a webpage layout.
Member discussion