"Low Code" before low/no code existed

About Project
Objective
Demonstrate a proof-of-concept system for automated frontend development — allowing users to upload mockups or screenshots and have AI generate, test, and refine the live web interface autonomously.
Tools & Technologies
HTML, CSS, JavaScript, Node.js, Puppeteer, Chrome Headless, Monaco Editor, Express.js
Overview
This early-stage AI frontend builder was coded entirely in raw HTML, CSS, and JavaScript with a Node.js backend — long before the rise of modern no-code editors.
Users could drag and drop a screenshot or mockup of the website they wanted, and the AI would generate the required HTML and CSS layout, creating a live visual prototype instantly.
Puppeteer and Chrome Headless were used to automatically render the generated site and capture desktop and mobile snapshots. These visual previews were shown to users inside the UI.
The AI analyzed the snapshots to detect visual or layout issues and automatically updated the source code to correct them — a self-improving UI/UX feedback loop users could watch live.
The code was displayed in a Monaco editor at the bottom of the screen, allowing users to inspect or tweak the live code while watching the interface evolve in real time.