A group of designers may have a brainstorming session and sketches out many design ideas. Then the designers spend hours to finish the layout design. Then they may use tools to convert the design into a prototype or have engineers to code it from the layout mockup. From creating layouts to making prototypes for phones, it can take hours or even days. However, with these tools, the whole process can be automated. So here are some tools that will allow users to create working HTML websites from mockups, creating a solution for a process that normally takes weeks.

pix2code

It takes a hand drawing UI mockup from a designer, and then feed it to the deep network to produce the XCode project with the UI design. pix2code can also produce code for Android or Web applications using different HTML/CSS/JS frameworks.

Screenshot To-code

A neural network that transforms a design mock-up into a static website.

Sketch Code

Keras model to generate HTML code from hand-drawn website mockups. Implements an image captioning architecture to drawn source images. It is a deep learning model that takes hand-drawn web mockups and converts them into working HTML code. It uses an image captioning architecture to generate its HTML markup from hand-drawn website wireframes.

Sketch 2 Code

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

Sketch2React

This is a sketch plugin, a framework and a React web app that converts Sketch design files into prototype React code. That spits out real HTML.

React Sketchapp

This is an open-source library that allows you to write React components that render to Sketch documents.

Design to Code

It is the easiest way to extract information from your PSD and Sketch designs. Just upload the design to Avocode and pick whatever you need from the design.

Pagedraw

Pagedraw is a UI builder for React web apps. It works like a Sketch or Figma style design tool, but emits good quality JSX code

UIConstructor

UI Constructor empowers designers with the full power of code without any coding expertise. Design is instantly converted into HTML and CSS clean, semantic code. You also have the option of editing and adding Your own code.

Napkee

This is a useful tool for those who use Balsamiq mockups. Napkee allows you to create clickable prototypes almost immediately from the original Balsamiq file. With Napkee, you can export a mockup created with Balsamiq to either HTML, CSS or JavaScript, or to Adobe Flex.