Code Based Design Systems
Rupa Chaturvedi
AI Design Leader | x-Uber/Google/Amazon
Build and Maintain Code-Based Design Systems with Claude Code and Storybook
Your design system lives in Figma. Your product lives in code. The gap between them is where consistency breaks down: designers hand off components engineers rebuild from scratch, tokens drift, and documentation goes stale the week after you ship it. Keeping the two in sync has become a job nobody actually owns or wants.
In this hands-on workshop you will build a design system the way your product is built, in code.
You will prototype real screens with Claude Code, generate reusable components, and wire them into Storybook as living, interactive design system and component library.
Then you will learn how to build workflows to maintain the system and library using Claude Code.
You will leave with a running code-based design system in Storybook, one you can keep building on.
What you’ll learn
You leave able to build, document, and maintain a code-based design system with Claude Code and Storybook, ready to run on your own work
Scaffold tokens, naming conventions, and starter components using a dedicated Claude skill.
Prototype real screens and states in code, then derive component structure from them.
Decide what belongs in the design system versus the product as you build, shaping a lean, scalable system.
Extract reusable primitives and components from real UI instead of designing them in the abstract.
Configure Storybook with variants, states, and controls for each component.
Keep documentation in sync with code so designers and engineers share one source.
Write CLAUDE.md conventions and prompts that keep Claude's output consistent.
Capture design decisions to engineer context and build a harness.
Use Claude Code to catch drift and the system in sync.
Workshop agenda
Generate the Design System and Build a Prototype
Use a dedicated Claude skill to generate a code-based design system from zero (tokens, naming, starter components), then prototype real screens and their states with Claude Code.
Break
Integrate Storybook and Build the Component Library
Extract reusable components from your prototype and wire them into Storybook with variants, states, and controls, so you leave with a living, documented component library.
Break
Show & Tell
Present your design system and prototype to the group, see what your peers built, and get feedback from the instructor.
Learn directly from Rupa
Rupa Chaturvedi
AI Design Leader | AI enablement for UX orgs | ex-Uber, Google, Amazon, Stanford
Who this workshop is for
Senior & Staff Designers. Your Figma system doesn’t match production, so every launch turns into rework, audits, and “why is it different?”
Design System Leads. You’re the bottleneck: token drift, endless requests, stale docs, and no sustainable way to keep the system healthy.
Designers Who Code. You can prototype, but want a production-ready system: components, tokens, and workflows your team can ship with.
What's included
Live sessions
Learn directly from Rupa Chaturvedi in a real-time, interactive format.
The design-system generator skill
The dedicated Claude skill used in the workshop to scaffold a code-based design system, yours to keep and reuse on any project.
Prompt and CLAUDE.md templates
The conventions, prompts, and CLAUDE.md templates from the session, packaged to drop straight into your own projects.
A peer group building design systems in code
Spend the session with other senior designers and design-system owners making the same shift, and compare how the workflow maps to different stacks.
Certificate of completion from the Human Centered AI Institute
A verified credential you can add to your LinkedIn profile or share with your organization.
Lifetime access to recordings and materials
Go back to the workshop content and recordings whenever you need to. Revisit specific sections as you build new systems on your own.
Maven Guarantee
Your purchase is backed by the Maven Guarantee.
Frequently asked questions
Maven for Teams
Reimbursement
Get your company to pay
Everything L&D needs: email template, receipts, and certificate of completion.
Get reimbursedTeam discount
Learn with your teammates
Save 20%+ when 2 or more teammates enroll in the same cohort.
Save 20%+ with a teamPrivate cohort
Run a cohort for your org
A dedicated cohort with a custom schedule and curriculum, tailored to your team.
Book a private cohort$699
USD