I had the opportunity to participate in a discussion with my pals at Storybook to show off the powerful formula of Design Systems + AI (we've been using the abbreviation "DS+AI" as "AI+DS" is 😬). The Storybook team demonstrated their brand-new Storybook MCP that helps teams generate UI by wielding their sturdy, well-considered design system component libraries.

"Mouth Coding" and Collaborative Workflows

In our work, we always love using coded prototypes to short-circuit the circular, unproductive back-and-forth of design review meetings. That's why I feel that combining the generative power of AI with the well-considered structure of your design system is such a powerful combination. I paint a picture of it's possible to use DS+AI to create more collaborative workflows:

This unlocks the opportunity for brand-new kinds of collaborations between disciplines and teams. Non-technical team members can "mouth code" a product feature during a collaboration session and collectively we can see things come to life using the production-grade foundations of the design system.

This is what distinguishes DS+AI from vibe coding; the AI is deliberately constrained to using the high-quality design system materials to ensure what's being generated adheres to the organization's established standards.

You can watch the whole video here:

And if you're interested in learning how to wield design systems and AI together, we'd love it if you checked out our new course, AI & Design Systems: