WebSketch

Landing Page
Dashboard
Canvas (Shapes Sketch)
Output (Shapes Sketch with post-generation modifications)
Canvas (Mouse Sketch)
Output (Mouse Sketch)

Inspiration

We can all agree that starting a website sucks. It can take hours creating and moving HTML elements around for even a basic dashboard. And, unfortunately, the latest technologies are to no avail. The process of continuously prompting the LLMs to understand your vision and debug errors is still far too tedious for what should be a relatively simple task.

What it does

Transform your hand-drawn sketches into functional websites instantly, giving you starter code that you can edit live. You can also save your sketches to a dashboard and access them at any time. Our program’s goal is to suit your needs and optimize the process in your website development endeavors.

How we built it

For the frontend, we used React, Tailwind, and ShadCN components. We used TLDraw to provide a sketch interface for users that send image data to the backend. For the backend, we used Python and Flask and utilized Claude and Google Gemini to process the image data into code, and to provide the ability for the user to prompt the LLM for edits. We used Supabase to handle user data storage and authentication.

Challenges we ran into

Most of our challenges came from all the different components that we had to integrate together into a seamless UI. It was pretty difficult to get TLDraw to work smoothly with our frontend, and we had some issues displaying the output code without causing visual issues. Another challenge we had was getting the LLMs to produce the best possible website designs given the images, something that took a lot of prompt engineering to achieve.

Accomplishments that we're proud of

We are really proud of the UI that we were able to put together within the day-long time period, and all the moving components that we were able to fit nicely on one screen. We were able to add a lot of useful features like authentication and having multiple sketches stored. In addition, the code that is generated from the user input is pretty accurate and is something that we would definitely use in the future.

What we learned

We learned about numerous technical and non-technical skills. Being able to learn and implement technologies like Gemini API, Monaco Editor, and Supabase in such a short time frame was a very rewarding process and a great stride in developing project experience. Furthermore, this project refined our skills in leadership, collaboration, and time management.

What's next for WebSketch!!!

We’d like our program to generate React code in addition to HTML code from a user’s sketch, allowing the user flexibility to suit their style. We would also like to incorporate an option for the user to choose their LLM.