v0 by Vercel

Why v0 for design system work

v0 is the AI UI generator that has the strongest opinion about which components it generates. It outputs shadcn/ui + Tailwind + Radix primitives by default, which means the code it ships already respects accessibility, keyboard interaction, and composition patterns that most other AI generators reinvent badly.

For design system teams, that opinion is the feature. You are not starting from “AI invented a Button” and reverse-engineering it back into your library. You are starting from a recognisable foundation that maps cleanly to most modern React design systems.

What it is good at

• Generating a section, page, or full layout from a prompt or a screenshot
• Iterating on a result by chatting at it (“make the cards taller”, “remove the gradient”)
• Forking a community generation and remixing it
• Pushing the output to a Vercel deploy in one click
• Producing code that does not embarrass you when a real engineer opens it

Where it gets shaky

• Brand-specific tokens: v0 ships with shadcn defaults. If your design system has its own tokens, you still need to map them in afterwards.
• Custom component libraries: it will not magically know about your internal <DataTable> unless you paste the source.
• Dense product UI: v0 is strongest at marketing pages, dashboards, and forms. Deeply interactive product surfaces (think a query builder) still want a human in the loop.

How to use it well

1. Treat the first generation as a starting block, not a deliverable. Iterate in v0 chat for 3-4 turns before pulling code.
2. Paste a screenshot of an existing screen if you want consistent layout instead of describing it in words.
3. Export to your codebase, then run a taste audit and an anti-pattern check before merging.
4. Map the shadcn tokens to your design system tokens once, and reuse that mapping across generations.

Where it sits in your stack

v0 is the front of the funnel: prompt to component. Once you have the output, hand it to Cursor or Claude Code with your design system rules in CLAUDE.md to bring it in line with your tokens, naming, and governance.