Design Systems for AI Collaboration 1/2 : From Style Guide to Structured Components

Figma Site (Live Demo): https://fun-ladle-88096236.figma.site

Figma Make Prototype (Desktop Only): View prompt and interact

1. When Design Meets AI — Why Structure Matters More Than Ever?

Design has always cared about format, but for a long time, smaller teams could rely on style-based systems and loosely defined layouts — as long as everything looked right in the end.

That balance is shifting. As tools like Figma Make, Cursor, or Relume grow more capable of reading and generating design data, format and structure now matter more than ever. Clear hierarchy, logical relationships, and consistent naming determine how well machines can interpret and build upon our work.

This experiment started with a simple idea:

What’s the fastest (and laziest) way to build a style guide that both humans and AI can understand? 🤔 

I wanted to see whether a modular structure could make AI-generated outputs easier to manage, update, and reuse.

2. From Design to Delivery — Understanding the Requirements

With automation tools multiplying, every part of the design process now comes with shortcuts. This experiment focused on building a design system that both humans and AI can interpret, using the simplest and most efficient setup possible.

Since most of my design work already lives in Figma, everything was kept within its environment to test whether it could function as a single source of truth. Before starting, I mapped out all potential tools from variable managers to automation plug-ins, and organized them into one workflow diagram.

The red path in that map shows the configuration used for this test:

Relume → Figma Make → Figma Component Library → Figma Make

Functions still in beta or limited to enterprise accounts were excluded.

Relume — Building a Quick Variable-Based Style Guide

The process began with Relume, which quickly generated a variable-based style guide.While simple and somewhat limited, it provided a good foundation for testing how variables could connect to AI-readable structures.

Figma Make — Generating Layouts with Natural Language

Next came Figma Make, where natural-language prompts were used to generate layouts and separate them into reusable components.

This step handled most of the structural interpretation and offered an early sense of how AI might assemble interface logic.

Figma Component Library — Refining with Design Tokens

These generated components were then refined inside Figma and connected to design tokens, forming a lightweight modular component library.

At this stage, the library served mainly as a visual discussion tool and a place to manage design updates, rather than a full source of code truth.

Figma Make → Github → Cursor — Version Control and link to other coding agent.

Once refined, the design file was passed into the development workflow through GitHub and Cursor.

For this experiment, I plan to create a small backend to manage API calls and rate-limit external data, allowing Cursor to handle both the frontend assembly and the integration logic.

Other tools such as Variable Visualizer, Token Studio, and Storybook remain valuable parts of the broader ecosystem, but this setup focused on seeing how far a minimal, integrated workflow could go.

3. Establishing Variables through Relume and Visualizers

Using Relume was the fastest way to start. It instantly generated a base style guide with color, typography, and layout variables — no manual setup required.

The system is intentionally minimal: five accent colors, an eight-step grayscale, and basic layout settings like container width and padding. This simplicity suits smaller or fast-paced projects, though scalable systems benefit from further refinement in Variable Visualizer or similar tools.

After importing, I cleaned up naming conventions to keep variable groups consistent.A free Relume account is required, and while their platform can build full landing pages, I only used it to generate the style guide.

By duplicating the community file in Figma and running the Relume plugin, the setup was ready within minutes. Once imported, I checked colors, layout variables, and base components like buttons and inputs before moving on to structured components.

Sign up on relume.io, set colors/fonts in Style Guide, copy Relume file from Figma, install plugin.

In copied file, log in via plugin, then run “Import Style Guide.”

Choose which style guide to import.

Import takes minutes; watch memory. Relume shows saved time when done.

Open Figma Variables to check collection names; adjust manually if needed.

Workflow of creating a variable-based style guide using Relume.

4. Constructing Components with Figma Make

With the variable system in place, I tested how AI-assisted tools could create reusable components.The plan was a small dashboard featuring line, bar, and pie charts, plus a gauge in pixel and ASCII art style. The logo came from an ASCII generator, and the outline was drafted with ChatGPT.

Using Figma Make, I iterated roughly 50 times until an interactive prototype emerged. Figma Site (Live Demo): https://fun-ladle-88096236.figma.site

Figma Make Prototype (Desktop Only): View prompt and interact

I copied the design back to Figma to convert the layouts into components.

Some effects like gradients, shadows, and SVG fill (color-blind-friendly patterns) didn’t transfer, so solid colors proved more reliable.

Tools like Suggested Auto Layout and Style & Variable Organizer helped rebuild structure and reconnect variables.

Import the Relume-generated team library into Figma Make.

Chat with AI to build designs—clear goals yield better results.

Switch to code mode to generate descriptions and snippets for linking.

Paste the Make design back into Figma to refine and create components.

Completed components ready for documentation or export.

The process of building layouts with Figma Make and refining them into reusable components..

At this stage, it became clear that rebuilding an entire Figma library wasn’t necessary, Make’s generated components already served as the single source of truth. Designers only need to recreate essential components in Figma for discussion and visual alignment.

In this workflow, Figma components serve two roles:

• Mockups for discussion, keeping all interactions within Make.

• Visual references connected to the Make code base.

Each design update still requires regenerating code and documentation in Make and syncing them back to Figma, but it’s far faster than building everything from scratch. And as these tools evolve, even this manual loop will likely disappear.

The finished Figma component library after refinement.

5. Reflections

Going through this process made me realize that automation really does save time—just not in the effortless way we imagine. Figma Make takes care of most of the structure, but there are still moments when adjusting things by hand simply feels faster and clearer. Knowing when to step in has become part of the craft.

To me, Figma Make works like a compiler, turning sketches, style guides, and plain language into structured code. But that translation mostly moves one way.

The logic stays in code, rarely finding its way back to Figma, where we discuss and refine ideas visually.

That gap is where I think Figma’s biggest opportunity lies. While most AI tools speak in text or screenshots, Figma already holds millions of real design systems built by real teams. If those can reconnect with AI workflows, the balance between human intuition and machine logic could finally feel seamless.

In this experiment, I built a variable-based style guide with Relume, generated prototypes in Figma Make, and turned them into Reusable Components.