AI-powered prototyping with design systems
By Steven Van ·
Vercel explains how pairing shadcn/ui design systems with v0 produces AI prototypes that better match a team's brand and code.
Vercel published a guide on using AI-native design systems to get more on-brand output from v0, its AI prototyping tool. The core argument: v0 needs to understand a product's components, styling, and structure to generate prototypes that look production-ready, and most design systems aren't built with enough detail for a model to reason about.
v0 uses shadcn/ui by default, since it's open source, built on Tailwind and Radix, and structured with transparent, composable APIs that models can predict. Vercel outlines the workflow for building an AI-native design system:
- Apply existing design tokens (colour, radius, spacing, fonts) to a shadcn/ui theme as a starting baseline, then refine in v0's design mode without re-prompting.
- Build reusable "blocks" (buttons, inputs, layouts, navbars) on top of those tokens, following an atomic-design-style hierarchy.
- Publish a shadcn/ui Registry to distribute branded components and blocks across teams; registries support the Model Context Protocol, so the same design system can ground generations in v0, Cursor, and Windsurf.
Vercel also released a Registry Starter built with Next.js for teams that want to deploy their own registry by mapping tokens to a globals.css file.