Abstract
This project presents an AI-driven Sketch-to-Code system that automatically converts hand-drawn user interface (UI) sketches into responsive HTML/CSS layouts using computer vision and deep learning techniques. Designers typically begin with rough paper sketches, but manually reproducing these designs in code is repetitive, time-consuming, and prone to error. The proposed system addresses this inefficiency by automating the translation from conceptual sketches to functional prototypes.
The processing pipeline first applies image preprocessing techniques such as binarization and edge enhancement to improve input clarity. A YOLOv8-based convolutional neural network (CNN) detects and classifies common UI components, buttons, text fields, labels, and images, while spatial layout relationships are inferred to preserve design hierarchy. A code generator then synthesizes clean, semantic, and responsive HTML/CSS code, which is rendered through a web-based interface providing a real-time visual preview.
From a computer engineering perspective, the project emphasizes dataset construction, noisy-input preprocessing, and model optimization for robust UI element detection. The results demonstrate how computer vision and deep learning can effectively bridge the gap between visual design and implementation, streamlining the front-end development workflow.