Strategic Influence

AI/LLM Integration

Product Strategy

Design Systems

v0.dev + Design System: Making Compliance Automatic, Not Enforced

Built a v0.dev integration with Docker's design system that shifted the entire product org from PRD theater to high-bandwidth prototyping—enabling every PM to generate design-system-compliant prototypes in a day instead of a week.

Role

Staff Product Designer & Technical Lead

Timeline

2024

Company

Docker

v0.dev + Design System: Making Compliance Automatic, Not Enforced

The Problem: Fast Prototyping vs. Design System Compliance

Docker's product org discovered v0.dev through designers and a PM. VP of Product Mat Wilson bought intro accounts for AI tools for the ProdDev division to test. 15 designers and 9 PMs/VPs started experimenting—everyone hacking on it, making fun silly things. The energy was incredible.

But there was a problem: every prototype generated by v0 looked nothing like Docker. The generated code was random UI that required complete designer rework before we could show stakeholders. It was fast, then slow. The org had discovered a tool that could 10x prototyping velocity, but only if we threw design system compliance out the window.

The tension was real: blocking v0 would make us look slow and risk-averse. Allowing unconstrained use would fragment the UI and create design debt across every product. The opportunity was clear—what if v0.dev could automatically use Docker's design tokens? Make compliance automatic, not enforced.

"We were generating prototypes in v0 super fast, but they looked nothing like Docker. Every prototype required designer rework before we could show stakeholders. It was fast, then slow."

— Mat Wilson, VP of Product

My Approach: Connect the Pipeline, Show the Demo, Let Adoption Happen

I had a conversation with Zach, my friend who leads design at Zapier. His devs were using v0.dev as a type of Storybook instance. That's when it clicked: hook up the token pipeline with shadcn ui + Tailwind theme output from Style Dictionary.

In a few days, I generated a valid theme from DDS Figma Tokens & Variables and stood up a Docker v0.dev+DDS repository on Github. Created a shadcn ui theme with Docker fonts, SVG logos, and design tokens baked in. Then I gave a presentation showing designers and PMs how to fork the repo, hook up their Github accounts to v0.dev GUI, and start building with DDS tokens automatically applied.

Week 1

Built the Integration

Generated shadcn ui + Tailwind theme from Figma token pipeline (Style Dictionary). Created v0.dev+DDS Github repository with Docker fonts, SVG logos, and design tokens.

Week 2

Gave the Presentation

Showed designers and PMs how to fork the repo and connect to v0.dev GUI. Presentation: https://youtu.be/qeL7yGIfFUE

Week 3-4

Org-Wide Adoption

VP of Product posted in ProdDev channels. Everyone started using it: VP, CTO, all PMs, most designers.

Ongoing

Became the Default

Every PM at Docker now uses v0.dev+DDS for prototyping. Meetings shifted from PRD theater to high-bandwidth conversations.

The Work: Design System Tokens as Default

v0.dev + DDS Presentation

Complete presentation deck showing the integration architecture, setup instructions, and adoption strategy

Chad's presentation showing designers and PMs how to use v0.dev+DDS for design-system-compliant prototyping

v0.dev interface generating Docker-branded prototypes

v0.dev interface with Docker Design System tokens automatically applied—no manual styling required

Generated prototype using shadcn/ui components with Docker fonts, colors, and spacing tokens

Setup instructions for v0.dev+DDS repository

Github repository setup guide showing how PMs and designers fork the v0.dev+DDS repo

GitHub repository main view showing the v0.dev+DDS integration structure and files

Repository README with setup instructions and documentation for designers and PMs

tailwind.config.js

// tailwind.config.js - Generated from DDS Figma Tokens via Style Dictionary
// This makes Docker Design System the default for v0.dev

module.exports = {
  theme: {
    extend: {
      colors: {
        // Figma color tokens → Tailwind
        'docker-blue': '#0db7ed',
        'docker-navy': '#2c3e50',
        'docker-gray': '#6c757d',
        // ... all DDS color tokens
      },
      spacing: {
        // 4px grid system from DDS
        '1': '4px',
        '2': '8px',
        '3': '12px',
        '4': '16px',
        // ... DDS spacing tokens
      },
      fontFamily: {
        // Docker brand fonts
        'sans': ['Inter', 'system-ui', 'sans-serif'],
        'mono': ['Roboto Mono', 'monospace']
      },
      borderRadius: {
        // DDS border radius tokens
        'sm': '4px',
        'md': '8px',
        'lg': '12px'
      }
    }
  },
  plugins: []
};

// When PMs use v0.dev with this config, they get Docker Design System by default
// No CSS override, no manual token lookup, automatic compliance

shadcn/ui + Tailwind theme generated from DDS Figma tokens—makes design system compliance automatic in v0.dev

The Impact: Org-Wide Adoption, 7x Faster Prototyping

100%

Product Org Adoption

Every PM at Docker uses v0.dev+DDS for prototyping. Made it all the way to CTO and VP of Product, who posted it org-wide.

7x faster

Prototype Speed

1 day instead of 1 week to generate design-system-compliant prototypes. PMs prototype what would have taken a week in a single day.

CTO + VP

Executive Buy-In

Made it to CTO and VP of Product. VP had Chad post in ProdDev channels and hype it up to the entire org.

15+

Designers Using v0+DDS

Most designers at Docker building with design system tokens by default. 15 designers actively using v0+DDS for design-system-compliant work.

High-bandwidth

Meeting Outcomes

Meetings shifted from PRD theater (people faking they read the doc) to high-bandwidth conversations around functionality and workflows.

Key Outcomes & Strategic Lessons

Make compliance automatic, not enforced

Infrastructure beats process. When design system tokens are the default in prototyping tools, compliance happens without policing. You don't convince people to use the system—you make the system the path of least resistance.

Show working demos, adoption follows

Didn't convince anyone with decks. Built it, showed it working, and the org adopted it organically from bottom-up and top-down. VP-level influence came from showing a PM generate a Docker-branded dashboard in minutes, not from Powerpoint.

Prototyping tools change meeting dynamics

When everyone shows up with functional prototypes instead of static docs, conversations shift from rehashing to deciding. PRD theater dies when prototypes are fast and accurate. Meetings became high-bandwidth when v0.dev made prototypes cheaper than reading.

"Chad took an idea—connecting v0.dev to our design system—and turned it into how our entire product org prototypes now. Every PM uses it. We're making decisions faster because everyone shows up with working prototypes, not static mocks."

Mat Wilson

VP of Product at Docker

Continue Exploring

More Case Studies