The Vibe Coding Stack for Design Systems + 15 Resources
Design system teams are shipping components and features faster with AI. Here's the stack they're using. The same tools and workflows that teams at Spotify, Miro, Meta and other top companies use daily.
I've learned from and spoken to design system teams at Spotify, Miro, Meta and others. The pattern is clear: AI isn't replacing design systems work, it's accelerating it. Teams that master these tools now will have a significant advantage in 2026 and beyond.
The 2026 Vibe Coding Stack
1. Cursor and Claude
Most teams use Cursor as their AI-powered IDE. Some combine it with Claude for reasoning through complex component logic. Cursor transforms how design system teams write code, making component development faster and more consistent.
What it's good for:
- Generating component variants from a single example
- Writing unit tests for existing components
- Refactoring legacy code to match new patterns
- Creating accessible components with proper ARIA attributes
- Documenting components automatically
2. Figma MCP
The bridge between design and code. MCP (Model Context Protocol) lets AI read your Figma files directly, eliminating the manual handoff process. This is revolutionary for design system teams who need to keep code and design in perfect sync.
What it's good for:
- Extracting design tokens automatically
- Generating components that match your Figma specs pixel-perfect
- Keeping code and design in sync without manual translation
- Reading component variants and states from Figma
- Understanding design system structure from design files
3. v0 and shadcn/ui
v0 is Vercel's AI tool for generating UI components. It's great for prototyping. What makes it special is that it outputs shadcn/ui components, which are copy-paste React components built on Radix and Tailwind. These components are production-ready and follow design system best practices.
Why this matters for design systems:
- Components are accessible out of the box (Radix handles ARIA)
- You own the code, no dependency lock-in
- Tailwind means easy token customization
- Generated components actually match production patterns
The workflow is simple. Describe what you want in v0 and get a working prototype. Then refine in Cursor with Claude. Use v0 for speed and Cursor for precision.
Resources to Get Started
Here's what I'd bookmark:
Learning Cursor
- Cursor Learn: 1 hour free training from the Cursor team
- Beginner's Guide to Cursor: Video walkthrough for getting started
Claude and AI Coding
- Skip the Terminal (Claude Code Tricks): 8 tips for non-technical users
- Be a 10x Vibe Coder: Claude Code with Cursor and MCP deep dive
- Claude Cookbook: Official examples and patterns
- Prompting for Frontend Aesthetics: Get better visual output from Claude
Design System Specific
- Figma MCP and Cursor Tutorial: Build a component in under 5 minutes
- AI-powered Linting for Figma: Automated design system checks
- design/prompts: Prompts specifically for design work
- /rams: Design engineer for Claude Code and Cursor, reviews accessibility and UI polish
Building with AI
- AI Workflows: Step-by-step workflows with prompts and code
- Building Tinker Token: Case study of building a design token tool with AI
UI Generation
- v0: Vercel's AI for generating React components
- shadcn/ui: The component library v0 outputs, accessible and customizable
MCP (Model Context Protocol)
- MCP Quickstart: Official guide to connecting AI to your tools
What Teams Get Wrong
The biggest mistake is trying to generate entire design systems from scratch.
AI works best when you have existing patterns to extend. Start with one component that needs variants, one piece of documentation that needs examples, or one test file that needs more coverage. Focus on small and specific tasks rather than trying to build an entire design system at once.
The Skill Gap is Real
Job postings for design system roles increasingly mention AI workflows, not as a nice-to-have but as a requirement. Companies are looking for designers and engineers who can leverage AI tools to build better design systems faster.
The teams that figure this out now will move faster than everyone else, while the ones that wait will spend 2027 catching up.
This isn't speculation, it's already happening at companies like Atlassian, Microsoft and Miro.
I'm running a 2-day deep dive on this in March with practitioners from Atlassian, Miro, GitHub, Adobe and other teams who've shipped AI-powered design systems. If you want to learn the workflows firsthand I'd love to see you at my AI conference.
What Attendees Said (2025)
"Best professional upskilling investment I have done in ages." — Sam Sabour, Senior Product Designer
"I've learned a lot from every single talk. The curation and quality are amazing." — Mario Urbina, Design System Community Evangelist, BMW Group
"If I had to pick a single conference, I would pick this one every time." — Amalya Henderson, Lead UX Designer, Astro Space UX Design System
