v0 Design Systems 2.0

I announced Design Systems 2.0 for v0, which lets v0 build with your real production components. You connect GitHub, Storybook, Figma, npm packages, documentation or a private registry, and the agent uses those components when it makes your app. It isn't recreating your design system or making a second source of truth in some other repo you have to manage (2:11). It brings in the real components, the usage guidelines, colors, type and icons, and learns how to use them.

For the demo I pretended I was a designer at Microsoft (0:21). I brought in Fluent, their design system, and gave v0 a screenshot of Outlook, and that's all I gave it. It didn't just make something that looks like Outlook, it made Outlook.

The selected state is what blew my mind the first time I saw it (0:37): the bar grows out from the middle, and deselecting it has a different easing. The icons change color separately from the text, the buttons without text get tooltips and the ones with text don't, and dark mode uses Fluent's dark blues (1:02). It would take me months of working in Fluent to understand that level of detail, and I got it in one prompt.

The night before, I'd been testing it with Shopify's Polaris to reimagine GitHub, and IBM's Carbon to reimagine Slack and Airbnb (1:27). Importing one is a GitHub link, a Figma file or whatever else you have (1:44), and once a design system is in, anyone on the team can add it to a new chat and get to work. I'm on the team that makes v0 at Vercel.