Generative AI and Design Systems: My thoughts

TL;DR: Key Takeaways

• Generative AI is transforming design systems, making them faster and more efficient

• AI isn't replacing designers and engineers - it's augmenting their capabilities

• Teams that don't adapt to AI-powered workflows risk falling behind

• Current AI tools excel at patterns but struggle with production-ready code

• The future of design systems involves a hybrid approach: AI automation + human expertise

The rise of generative AI in design systems is like introducing a high-speed espresso machine to a cafe known for its hand-crafted brews - fast and efficient, but raising questions about the future of traditional roles. While some worry about job displacement, the reality is more nuanced. We're witnessing the dawn of a transformative era, comparable to when responsive design revolutionized the web. This technology isn't replacing craftspeople - it's augmenting them. However, teams who aren't preparing for this shift will inevitably fall behind as AI reshapes how we build and maintain design systems.

The real conversation we should be having is how to harness AI to enhance our design systems while maintaining the human expertise that makes them valuable. The teams that figure this out first will have a significant competitive advantage.

Design Systems, Meet AI

Design systems exist to bring consistency, scalability, and efficiency to design teams. But let’s be honest, managing them is tedious. Every design token, component, and pattern requires upkeep. Enter generative AI, which thrives on pattern recognition and automation.

Imagine a world where:

• Instead of manually creating design variants for screens, AI suggests optimized layouts on the fly.

• Designers can test components and experiences directly in the browser, reducing the back-and-forth with engineers.

• Prototypes go from zero to functional in minutes, not days.

That’s not some far-off future. It’s already happening. Below are some exciting products around generative AI and code (no affiliation)

• UX Pilot: You can use your design system in Figma to generate designs

• Superflex 2.0: Figma to production code using your own UI components

• Dessn: Code based component iterations

• MCP servers: A protocol that allows agents to talk to various applications

• Replit: Create apps in second from prompts (does deployment for you too)

• Lovable: Create apps in second from prompts

• V0: Build and deploy web apps in seconds

If you don’t follow Edward already then you are missing out, he’s always posting content about gen-AI on LinkedIn.

The Elephant in the Room: AI-Generated Code

One of the biggest debates in AI-driven design is whether it can generate production-ready code. Right now, the reality is hit-or-miss. AI can create UI components to around 50–80% of their final form, but turning those into a truly scalable, maintainable system? That still requires a human touch—someone who understands accessibility, responsiveness, and enterprise-grade standards.

At the moment, tools like v0, Lovable, and Replit produce decent results, but they often feel... familiar. They lack soul. It reminds me of the Bootstrap 3 days when every site started to look the same—and recently, we’re seeing the same thing happen with Tailwind.

The core issue? AI is trained on existing designs. It replicates patterns it has seen before, which makes it great at churning out "safe" UIs—but it struggles with the new, the unexpected, the bold. Without human input, innovation stalls.

Sure, there’s been a noticeable bump in overall "perceived quality"—AI makes it easier than ever to plug in slick animations, smooth transitions, and polished effects. But I worry that in chasing polish, we’re losing originality. And worse, it might erode the hard-won progress we’ve made toward accessible and inclusive design.

Should Engineers Be Worried?

AI isn’t replacing engineers—yet. But engineering job numbers are now lower than during COVID, which signals something deeper: companies are pausing to rethink how teams build. And in that rethink, some core engineering tasks are being redistributed.

A designer can now get a prototype 80% of the way there with AI. A content designer sharpens the copy. Then an engineer steps in to refine, scale, and ship. In this new flow, it's not hard to imagine teams needing fewer engineers to get the same results.

That doesn’t make engineers obsolete—but it does mean the role is shifting. With AI handling more of the UI layer, engineers are moving up the stack, solving harder problems around architecture, performance, accessibility, and security.

Future-Proofing Your Design System

So, what can design and engineering teams do to stay ahead of the curve?

1. Document Everything: The more structured and well-documented your design system is, the better AI can work with it.

2. Adopt AI-Friendly Tools: Tools that generate production-ready code (like Code Connect) will be key. For engineers, Cursor AI will help.

3. Think Modular: AI works best with small, reusable components. If your system is too rigid, it'll struggle to keep up. Break it down into smaller parts.

4. Optimize for LLMs: Include Model Context Protocol (MCP) metadata and LLM.txt files in your documentation to help AI tools better understand and work with your design system.

Final Thoughts

Generative AI isn’t coming for your job—it’s coming for your inefficiencies. The smartest teams won’t fight it; they’ll find ways to integrate it into their workflow. And who knows? Maybe AI will finally free us from the never-ending debate over button as hyperlink and link as button (IYKYK).

Or at least, we can dream.

Questions answered

In every newsletter, I answer a question from one of our subscribers. This one comes from Kris:

Great question. Brad Frost’s work played a big role in simplifying the concept of design systems and bringing them into organizations. But the approach has evolved since then.

One common piece of feedback was that people struggled to draw clear lines between what counted as a molecule versus an organism. As a result, the industry has largely moved away from those terms.

Today, I think about it more as a modern stack:

• Primitives – Values of the system like color palettes, spacing, and layout utilities

• Tokens - Decisions around colors, space, type

• Foundations - All tokenized and untokenized foundations (like icon)

• Components - All interactive and non-interactive UI like Button, Lozenge

• UI Recipes - UI patterns that are compositions but not configurable components

• UX Patterns - UX patterns that are composed flows but not configurable components

Let me know if this resonates with you.