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.
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.
A neural network that transforms a design mock-up into a static website.
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.
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.
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 is a UI builder for React web apps. It works like a Sketch or Figma style design tool, but emits good quality JSX code
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.