Image to Code Generator

Inspiration

Developers waste hours converting UI designs into code. We wanted to use AI to instantly transform any design—sketch, wireframe, or screenshot—into production-ready HTML, making web development faster and more accessible.

What it does

Upload any UI design image, and our tool uses Google Gemini AI to generate clean, responsive HTML with Tailwind CSS in seconds. Features a split-screen view showing the code and live preview side-by-side.

How we built it

-React + Vite for the frontend -Google Gemini 2.5 Flash API for AI-powered image analysis -Tailwind CSS for styling -react-split for the split-pane interface -Careful prompt engineering to generate production-quality code

Challenges we ran into

-Windows PowerShell script execution restrictions -Tailwind CSS PostCSS configuration conflicts (solved by using CDN) -React library compatibility issues with react-split-pane -Fine-tuning prompts to generate consistent, clean code -Time pressure to deliver a working demo quickly

Accomplishments that we're proud of

-Built a working MVP in under 2 hours despite technical obstacles -Successfully integrated Gemini's vision AI -Created an intuitive split-screen interface -Generated actual production-ready code, not just demo output -Overcame multiple environmental and dependency issues

What we learned

-Prompt engineering is critical for quality AI output -Sometimes, simple solutions (like CDN) beat complex configurations in hackathons -Debugging skills for Windows dev environments and npm conflicts -How to use Google Gemini's vision API -Balancing perfection vs. shipping under time constraints

What's next for Image to Code Generator

Short-term: -Support multiple frameworks (React, Vue, Bootstrap) -Download code as files -Component detection and naming

Long-term: -Multi-page design support -Figma/Sketch integration -Real-time team collaboration -GitHub integration -Accessibility auditing -Mobile app version