Welcome to deBUG.to Community where you can ask questions and receive answers from Microsoft MVPs and other experts in our community.
1 like 0 dislike
2.1k views
in Tools by 54 119 241
reopened by

Sketch 2 Code is an AI online tool introduced by Microsoft that helps you to transform your wireframe or your hands-draw sketch to a  Responsive HTML code.

convert image to html code


How does Sketch 2 Code work?

sketch to code workflowSketch 2 Code built on a 4-steps AI workflow to do the following:

  1. Recognizing design elements through a Trained Vision Model.
  2. Detecting the text elements through a Text Recognition Service.
  3. Running Sketch 2 Code Algorithm that analyzes the output of the previous two steps and generates the main structure.
  4. Generating HTML code.

Sketch 2 Code Demo

  • Prepare your hands-drawn sketch.
  • Open Sketch 2 Code web site.
  • Click on "Upload Design", to upload your hands-drawn sketch or wireframe image.
  • Wait a moment until the Sketch 2 Code generates your HTML code.
  • Check the generated preview, if it's OK, download it.

sketch 2 code result 

  • You can also click on the "Predicted Objects Details" button to compare the sketch, predicted and HTML version, as well as to get more details for each element in your sketch.

 Sketch 2 code prediction

Important, to get an accurate result, it's recommended to add sufficient space per each element as shown below:

Good Sketch

sketch2code best practice

Bad Sketch

sketch2code bad practice


Does the use of Sketch2Code make us dispense with developers? 

Does the use of Sketch2Code make us dispense with developers?Sketch2Code is an awesome idea that built on Artificial intelligence and has been implemented in a good manner!

But in my humble opinion, it's NOT considered a frank replacement for the Front-End developer! and it still needs more improvements to get accurate and desired results!

However, it's a great tool for non-technical users, and it can be used for preparing simple and quick prototypes as well as for teaching kids in school.

How Sketch2Code can be improved?

  1. In case, the tool is not able to identify the element type accurately and to avoid inaccuracy results, It would be great to have an intelligent way to redefine and specify the design element type manually.
    • Ex: If you draw a textbox and the tool detects it as a paragraph, so in this case, we should have an option to school the tool and specify the correct element type manually. Therefore, we will get perfect results without needing to redraw the sketch again.
  2. deBUG Community cloudIt would be also great to have a "User Membership" with an option to save our uploaded sketch and the generated HTML code to the current login user profile. In this case, we will be able to check our history log for all uploaded sketches as well as we will be able to retrieve our saved work at any time that we prefer without needing to upload the sketch again.
  3. I think we also need a "Rating" option for the generated design that would be a good indicator for tool developer, this indicator will help them to improve the tool more and more.
  4. After generating the HTML code, I think it would be awesome if we have an option to send the generated result by email.

In your opinion, how Sketch2Code can be improved! (Please, add your suggestions in the comments.)


Sketch 2 Code on GitHub

If you have an issue or you would like to contribute to the Sketch 2 Code project, please check the Sketch 2 Code on GitHub.

Conclusion

In conclusion, we have discussed

  • What's Sketch 2 Code?
  • How to use Sketch 2 Code?
  • Does the use of Sketch2Code make us dispense with developers? 
  • How Sketch2Code can be improved?

If you don’t ask, the answer is always NO!
...