# AI-powered prototyping with design systems By Steven Van · 2025-08-22 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. ![Vercel]() Vercel The platform for frontend developers — deploy, preview, and scale web apps and AI agents with zero config. [View Vercel →]() [Original source]() [Read AI-powered prototyping with design systems on Creators Toolbox]() --- Canonical source: https://creatorstoolbox.com/blog/vercel-ai-powered-prototyping-with-design-systems