Sketchify: An AI-Powered Visual Website Builder using Large Language Models and Canvas-based Wireframe Interpretation

Abstract

Building a functional website traditionally demands proficiency in HTML, CSS, and JavaScript, or costly subscriptions to no-code platforms. Sketchify addresses this barrier by providing a canvas-based wireframe drawing interface that converts hand-drawn sketches directly into production-ready HTML/CSS websites using Large Language Models (LLMs). A custom spatial layout interpreter processes drawn elements and classifies them into semantic web components such as navbars, hero sections, cards, and footers. The enriched layout descriptor is forwarded to the Groq API (Llama 4 Scout) to generate single-file HTML output styled in one of six design paradigms: Glassmorphism, Skeuomorphism, Neo Brutalism, Claymorphism, Minimalism, and Liquid Glass. The system further supports multi-page generation, a natural-language post-generation chat editor, a Supabase-backed project dashboard, voice-command input, and a template gallery. Acceptance testing confirmed successful website generation within five minutes of onboarding. Generation latency is under fifteen seconds at near-zero infrastructure cost. Benchmarking against Pix2Code and Sketch2Code confirms superior output quality and design flexibility without task-specific model training.