🥉 0v, turn sketches into UI in seconds with v0

Special thanks to @Wei Herr for being my teammate for this hackathon! Wouldn't have done it without you. If anyone is reading, he is massively hiring software engineers for MalaysianPAYGAP :) Amazing guy to work with, and you should definitely apply :>

Of course, thanks to the organizers for making this happen!

App Demo!! Feel free to visit 0v to try out the app (may or may not work due to TLDraw licensing), you can also checkout our devpost and github submission here.

🤓 Another year another win!

If you check out my project page, I have been consistently winning hackathons since 2022 and I promised myself to win one every single year just for tradition. I'm glad I won one more time before I turn unc at the ripe age of 25 next year which is really really scary to me still because you're kinda just existing can do whatever you want.

Thoughts on this whole thing being vibecoded

Anyways, I'm not sure how to feel about this win yet because this whole app was vibe-coded. I iterate on the architecture and claude code implements everything for me. This app is riddled with bugs within the first 5 hours and is honestly so duck-tapey that it would make me cringe whenever I think of it, but hey, we got it to work within 15 hours! As long as you don't dig too deep.

What I can say though, vibecoding is not the future, and it is not for me. Your apjp will only be as good as the person prompting it and honestly hasn't that always been the case for software engineers? There are no industry best practices, and they are only as good as the person enforcing them. I think using ai to accelerate your own learning is a much more efficient way of using it, and the ROI here is always MOONINGGGG~ 🚀

Thanks Cursor (I use neovim btw) and Anthropic for all the free credits tho!

Anyways... Here's how 0v works 😬

Got sidetracked above haha, but 0v was inspired by a tweet that caught my attention, and could be an industrial game-changer if they actually had the tech behind it. Me and Wei Herr spent like the first 4 hours trying to come up with ways that the smooth autocomplete could happen, but after more digging, turns out it was just gemini lmao. I was kinda disappointed about it :(

We actually really wanted to win the Vercel track once we saw the flight tickets, so we thought an app that utilizes everything Vercel is something that we need to build, so hey! Let's combine Reed's post with v0! The concept is simple though, quickly generate many many sketches with Gemini with a TLDraw handdrawn style (we limit to 3 so it's easy to showcase), accept the ones you want and generate the real components in v0 through their API!

The challenge here was controlling the generated sketches such that they don't get too wild, but give enough variation for designers to draw inspiration from, and in between we figured it was pretty useful too for vibecoders, so I'd say this app is mostly built for the following.

1. Vibecoders who are not familiar with UX patterns
2. Designers who want to iterate fast and have something working to hand of to engineers

And with that, we have our target audience to roleplay in!

Sequential Chain for initial sketches

aisdk calls this simple iteration a sequential chain, which sounds very cool so I will keep calling it that. But 0v backend runs a very simple two step call that generates sketches for you.

Step 1. Context Generation

I ask Claude to generate three sentences for me based on the initial seed drawing. These sentences each describe how the sketches would look like, which includes detailed placements of buttons or layout for different variations.

The goal here is to generate detailed prompts that don't deviate too far from realistic design that gemini can work with. This step also describes in detail what it thinks the user has drawn, which is why you don't see sketches misinterpreting drawings!

Step 2. Sketch Generation

Claude will pass the sentences above to Gemini, along with the initial seed drawing for context, and generate three images, which are then saved to Vercel's blob storage, to be rendered on the frontend via a CDN public url.

Step 3. v0 Integration

Since there's an intermediate step of accept/decline, the public CDN url helps to ensure image data is properly stored, since Gemini responds with base64 output instead. We can pass this public CDN url to v0-sdk, which calls v0 endpoints to generate actual UI components.

Once v0 completes its generation, a public embed link is returned and presented in the iframe modal within the app!

This completes the E2E experience for the app where we make you stay as long as possible, and results are shown without going to another tab.

Boring right? That's fine...

Well yeah, we're not that happy with the solution too, but that is fine, we got $500 cursor credits which roughly translate to a weeks worth of usage haha. Congrats to all the other participants and winners, I'm happy to see so many non-technical people joining too! Love the energy of the room.

Alright, that's all the yapping. If you're interested in going to hackathons with me, feel free to DM me :) Patlytics is also massively hiring, shoot your shot if you wanna work with me and a bunch of other very insane engineers!