Tool: v0

I used to joke with a product manager colleague that developers were never allowed to be creative or make design decisions about the front end of the products we built. As a team, we'd find ourselves waiting on designs for what seemed like fairly trivial implementations - things like a profile card in a directory listing or a CTA that led to our monetization funnel. The design team was spread thin across multiple dev teams, so naturally they were always backed up.

When chances came up to have a little freedom designing components, I’d get excited to let my creative juices flow fiddling with borders, shadows, transitions, and the like. Ah, I was so young then…

The Problem

Fast forward to now. I’m building full CRUD for multiple entities, authentication flows, shopping carts, pagination, filtering - and the sheer number of decisions to make from a technical perspective alone is draining. For someone like me, who struggles with a fear of making mistakes and chasing perfection, decision fatigue sets in fast. By the time I’m done wrestling with the backend, I’ve got little gas left for tweaking, fiddling, or iterating on designs.

Enter v0

v0 is an Ai tool with a similar interface to ChatGPT, but it's output is much different. Give it a prompt for a page or component, and it spits out - at the very least - a clean, modern design with familiar, intuitive UI patterns. Give it your brand colors or assets, and it nails the look and feel almost every time. It generates a working (though opinionated) file system and has a browser preview so you can view the result. I happened to stumble upon some of Lee Robinson’s tutorials (VP of Developer Experience at Vercel) and when I saw what he was getting out of the tool, I was sold. I wanted to achieve the same results.

I’ve been a fanboy of React, Next.js, and Tailwind for a while. But wanting to use v0 to its fullest pushed me to adopt a few other tools that naturally fit the code it generates:

Shadcn for a component library

Really a thin wrapper over Radix - but pretty cool that you don’t need a full component library installed just to get styled buttons and inputs. You can also easily customize the styles if you want.

lucide-react for an icon library

Who really cares about iconography, amirite? (Still, it’s had everything I’ve needed so far.)

Strict use of Tailwind utility classes

I don’t write CSS anymore. Usually, I’ll tweak a couple of classes to give proper padding to a v0-generated page when fitting it into my Next app’s layout. But if I’m fighting with styles at all, I’ve probably done something wrong or I didn’t give v0 enough context for where in my app I’m working.

I had been using headless-ui for React functionality and writing CSS modules myself (old habits die hard). But lately, I’ve been questioning the real value of that time and effort. I’ve found that v0 consistently does a better job creating clean, beautiful designs, and adopting its toolset has made my workflow smoother. So far, I’m enjoying the switch.

A few tips that have made working with v0 easier for me:

• As with any AI tool, give it as much context as possible and don’t be afraid to iterate from a small starting point.

Example:

I’m building an admin page that manages relations between users, creators, and organizations. In our code, we call the relationships between these things “memberships.” I need a way to intuitively display the different memberships for a given user.

And to iterate:

I need to expand on what happens when a user clicks “Manage membership” in the creator membership tab. I’m currently showing a modal with the content:
<>..placeholder jsx with relevant data points.</>

• Give v0 your desired component props, API contract, or schema shape so it knows exactly what data points are available and what they’re called.

This saves a ton of time. You won’t have to comb through the generated code, change variable names, or rewrite things with your IDE’s AI assistant just to get v0’s output working in your app. Anything you can do to make the generated code as copy/pasteable as possible saves energy.

I did this when building this blog, and v0 even suggested a fix for my schema validation (I literally copied and pasted my schema type):

I also want to make an author profile page. My authorType schema in Sanity looks like this:
import { defineField, defineType } from 'sanity'; export const authorType = ...

At the end of the day, AI tools are radically shifting where we add value as developers, designers, and anyone else working on the web. v0 has saved me countless hours thinking through UI interactions and writing code.

If I find myself messing with styling or layout for too long, I have to stop and ask: am I really adding value?

It’s also come up with cleaner designs than I would have - and it regularly introduces me to Radix components I might never have found by digging through React UI libraries on my own.

Maybe this is old news and everyone’s already using v0. But if you haven’t - or you aren’t using it like a staple yet - I’d give it a whirl. 10/10, would recommend it to a friend.

And yes… it designed this site.

Cheers,

Jack