SketchCode is a deep learning model that converts hand-drawn website mockups into HTML code using an image captioning architecture.
The tool addresses the problem of automating front-end development from wireframes by treating HTML generation as an image captioning task. It employs a CNN encoder paired with an LSTM decoder, the standard image captioning approach of its time, to learn the mapping from visual mockup features to HTML markup. The model is trained on a synthetically generated dataset and can process both single images and batches of wireframes.
This is a proof-of-concept best understood as a historical artifact rather than a production tool. The model performs reliably only on wireframes that closely resemble its training dataset of roughly 1,700 synthetic images and does not generalize well to the variability found in real-world sketches. It builds on prior work from pix2code and the Design Mockups project. Anyone considering it should recognize that general-purpose vision-language models now solve this problem zero-shot, making this approach obsolete for practical use. The project is preserved as-is from 2018 and targets TensorFlow 1.x and Keras of that era.
The project is no longer maintained and stands as a record of the deep learning techniques applied to this problem before the emergence of modern foundation models. The codebase remains available for reference and educational purposes, documenting how this specific architectural approach performed on constrained datasets before the field shifted toward more general solutions.
