Sketch to Code

Inspiration

​Our project, Sketch-to-Code, solves the problem of friction between design and coding. We were inspired to use Gemini's multimodal AI to instantly convert a simple, hand-drawn design into clean HTML and CSS, eliminating the need for manual, tedious boilerplate coding. Our goal was to create a "lovable AI" assistant that makes prototyping effortless. ​## What it does ​Sketch-to-Code takes an image of a hand-drawn website sketch (wireframe) and, using the Gemini API, instantly generates the corresponding clean, functional HTML and CSS code. It’s a tool for rapid prototyping, turning a visual idea into a functional web component in seconds. ​## How we built it ​We used Streamlit for the frontend UI and the Gemini 2.5 Flash API for the core intelligence. The process involves: 1) Multimodal input (image analysis), 2) Prompt Engineering (to demand only runnable code), and 3) Secure output management using Python and GitHub for version control. ​## Challenges we ran into ​Setup: Significant difficulty getting the PowerShell environment to activate consistently due to path and security policy errors. ​Precision: Gemini initially returned conversational text and markdown fences. We solved this by creating a highly restrictive, precise prompt to force pure HTML output. ​Pathing: Debugging subtle path errors to ensure the app.py file was found and rendered correctly. ​## Accomplishments that we're proud of ​Core Functionality: Successfully transforming an unstructured image into structured, runnable code. ​Lovable UX: Implementing a friendly, accessible interface with empathetic error handling. ​Professional Setup: Mastering the use of Git for collaboration and .env for secure API key storage. ​## What we learned ​AI Guidance: The quality of the AI output depends entirely on the precision and constraints of the input prompt. ​Multimodality: We learned how powerful Gemini is at reasoning across image data and code generation. ​Terminal Mastery: We conquered advanced terminal issues in PowerShell, which is a vital skill for deployment.

Built With

• python
• streamlit