As AI tools become more embedded in our workflows, a big question is emerging in design circles:

What does our role look like when machines can generate UI faster than we can sketch wireframes?

The answer, in part, lies in how we build design systems.

Systematic design isn’t just about building components or managing a design system doc. At its core, it’s about codifying design decisions, structure, hierarchy, interaction rules, voice, and tone in a way that’s repeatable, scalable, and interpretable by both humans and machines.

When AI enters the picture, it doesn’t magically “get” our intent. It needs structure. It needs building blocks. That’s where systematic design will become essential in making generative design work.

Without a solid design system in place, AI outputs feel generic and inconsistent

My Experience with AI and Design Systems

I was recently part of a project where we used Subframe as our design tool of choice, a platform that blends AI with systematic design.

• We set up the foundation: colour tokens, fonts, spacings, and icons. Subframe then provides a base set of components, with the ability to build custom components.
• With that groundwork, the AI-generated screens + flows. Thanks to one of Subframe’s features, the AI was able to generate multiple iterations of the same screen option. Still, unlike other GenAI tools I’ve had experience with, these were on-brand, using the components, tokens and fonts we’d established.
• We were able to quickly iterate based on feedback, swapping out specific components and fine-tuning flows fast.

The key takeaway? The speed wasn’t just a result of the generative AI; it stemmed from having a solid, systematic design foundation that the AI could understand and build upon.

Experimenting with Figma’s MCP Server + Figma Make

I’ve recently started experimenting with Figma’s MCP server alongside Cursor.

I connected it to my Figma design system, complete with production-ready components, and let the AI attempt to construct screens using natural language prompts. Once connected, you can prompt your MCP client to access a specific design node.

With the MCP server enabled, you can:

• Generate code from selected frames
  Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features.
• Extract design context
  Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows.
• Code smarter with Code Connect
  Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.

It wasn’t flawless, I still had to course-correct, reframe prompts, and finesse details, but the experience showed this clearly:

When your design system is structured well, AI becomes a powerful design collaborator, not just a content generator.

Lately, I’ve also been testing Figma Make — their new AI-powered tool. It’s still early days, but what’s immediately promising is how it bridges the gap between structured design systems and creative screen output.

In Figma Make, you can upload components directly from your design system, alongside a written prompt. This means you can hand-pick the exact buttons, forms, navs, or cards you want the AI to use. Once uploaded, you can prompt the system with natural language (e.g. “design a checkout flow”) and it generates screens and interaction states that are tailored to your system, not someone else’s.

I’ve been experimenting with a couple of different flows, and it’s already saved me hours of scaffolding, providing solid starting points that stay aligned and consistent with my design system.

What’s most exciting is how this tool starts to feel like co-creation rather than generation. You’re not giving up control, you’re giving the AI smarter guardrails and getting more focused ideas in return.

Instead of crafting every screen by hand, we’re building design logic and teaching the AI to execute within that framework.