Vibe Coding Studio

• 

  Website

Inspiration Google gemini inspired me to make this since it has saved a lot of time.

What it does It converts screenshots into websites.

How we built it Frontend: Built with Next.js and Tailwind CSS for a fast, responsive UI.

AI Engine: Powered by Google's Gemini 2.5 Flash to instantly translate UI screenshots into raw HTML/Tailwind code via a custom API route.

Live Preview: Engineered a secure, inline iframe sandbox to render the generated code instantly on the canvas.

Zero-Backend Export: Implemented a one-click local download using the browser's native Blob API for reliable, instant source code saving.

Challenges we ran into Time was the biggest issue here. It was very difficult to complete it in such short amount of time.

Accomplishments that we're proud of I did this entirely on mobile which I'm proud of

What we learned learnt how to integrate Google gemini into my websites

What's next for Vibe Coding Studio I'll refine it later when I'm not in a rush to submit it.

Built With

• and-responsive-ui-styling.-google-gemini-2.5-flash:-the-multimodal-ai-model-powering-the-vision-to-code-generation.lucide-react:-for-the-clean
• continuous-deployment-and-live-hosting.github:-for-source-code-management-and-version-control.native-web-apis:-utilizing-the-browser's-native-blob-object-for-the-zero-backend-local-download-feature.a-smartphone:-the-ultimate-flex?building
• debugging
• javascript
• modern
• react
• scalable-svg-icons-used-throughout-the-application.-vercel:-for-seamless