0v-og-image

0v — Sketch to Ship

Every great product starts as a rough sketch on paper or a whiteboard. But the gap between that initial vision and a polished UI is huge — you need design skills, coding knowledge, and hours of iteration. We wanted to collapse that gap to seconds.

0v is an AI-powered design canvas that transforms your rough wireframes into more rough wireframes into production-ready React components fully end-to-end integrated with v0.app

Sketch — Draw your UI idea on the canvas (boxes, text, whatever)
Generate — Hit the sparkle button to get AI-generated low-fidelity design variants to ensure you cover all your UX cases
Ship — Accept a variant and instantly get production React code with v0
Iterate — We bring you back to v0.app where you can continue iterating on your design

We want to empower product designers/UI designers to quickly iterate over product decisions especially in high velocity environments by allowing a quick way to sketch and ship components or layouts

Just like Claude Code, we let the users accept/decline the variants that they want so they can regenerate better ones!

We built everything with Vercel

Here's a list of what we used Vercel for

AI Gateway -> gives us access to Claude and Gemini models
AISDK -> Unified API to integrate all LLM providers with a bunch of extremely helpful interfaces
Vercel Domains -> https://0v.studio was bought on Namecheap for $10 but with CNAMEs to Vercel Nameservers!
Vercel Blob Storage -> for storing ai generated sketches within the canvas and public link access
Vercel/og + satori -> for generating beautiful open graph images for https://0v.studio
Sonner -> for generating beautiful and amazing toasts
Last but not least, v0-sdk -> for allowing end-to-end integration with TLDraw + Sketches and into generating beautiful UI components

Everything else!

Claude Opus/Sonnet + Gemini models for sketch generation within TLDraw
TLDraw for making such a nice open source infinite canvas (HUH? they changed their license recently and i just found out about it lol, don't worry im on the 60d free trial w/o credit card plan so definitely need to migrate into excalidraw)

How it works

You might wonder how we manage to generate low-fi mockups that look like they've been drawn in TLDraw. It's actually just a two step chain.

Claude takes in the initial seed as an PNG and describes in detail what it thinks it is and output three instructions on how to construct the new variants. So Claude would say - "This is a lofi mockup of a Music Player, to generate more variants for a different UX, we can consider moving the play button to the bottom... " .etc
Using this detailed construction of the new variant, we pass into gemini's flagship IMAGE gen model to generate the new sketch. Honestly i am confident that it would be hard to discern what is drawn in TLDraw vs generated by gemini, it is scarily good [1].
This variant that you accept is then passed into v0 with the initial context from claude in step 1. v0 generates the final output for you! Our preview link lets you see the generated component and brings you back to v0.app to iterate.
Images are all stored and reused from Vercel's Blob storage's public url. CDNs make the world go fast baby

That's it! Till next time!

Team v0.

[1] I demo'ed it to a few friends and they were surprised those aren't vectorized outputs but rather raster images lol