Transmission // Insight

For the Designer Who Hates the Blank Canvas

How MCP lets LLMs work directly inside Figma with real components, design tokens, and auto layout — not static mockups

For years, AI design tools all had the same problem:

they generated things that looked impressive but were useless in real workflows.

Static mockups. Fake landing pages. Beautiful screenshots. UI concepts impossible to maintain.

A lot of “wow”. Very little real product work.

Then MCP arrived.

And for the first time, a designer could use an LLM directly inside Figma to create real, editable interfaces that actually follow the company’s design system.

Not images.

Actual components.

The Problem With the Blank Canvas

Anyone working in product design knows this feeling.

A huge portion of the work isn’t actually spent “thinking” about UX.

It’s spent:

  • assembling components
  • finding the correct variants
  • fixing spacing
  • applying tokens
  • building repetitive layouts
  • maintaining consistency

Especially at the beginning.

The infamous blank canvas.

The moment where you already know roughly what you want to build… but starting still requires a huge amount of mental energy.

And this is where AI starts becoming genuinely interesting.

The Difference Between “AI Generating UI” and “AI Working Inside Figma”

Most AI design tools until now worked like this:

prompt → image

The problem?

Designers don’t work with images.

They work with:

  • components
  • auto layout
  • design tokens
  • variables
  • systems

With MCP (Model Context Protocol), an LLM can actually read and write directly inside Figma.

That means a designer could prompt something like:

“Create a mobile fintech dashboard using our design system.”

And get:

  • real frames
  • real components
  • proper auto layout
  • consistent spacing
  • typography already configured

Directly inside the canvas.

How It Works Technically

The architecture is surprisingly simple.

  • Design: Figma
  • AI: Claude
  • Bridge: Figma MCP Server
  • IDE: Cursor / VSCode
  • Design System: Variables + Components

The key piece is the Figma MCP Server.

It exposes structured information from the Figma file to the LLM:

  • components
  • hierarchies
  • styles
  • variables
  • layouts
  • tokens

So Claude is not “looking at screenshots.”

It actually understands the structure of the design system.

And that’s the real breakthrough.

What Designers Could Actually Do With This

I don’t think the real question is:

“Will AI replace designers?”

The better question is:

“Which parts of design work are repetitive production tasks?”

And the answer is: far more than most people realize.

With this setup, a designer could:

Generate wireframes quickly

Using prompts like:

“Create a Gen Z banking onboarding flow.”

Explore multiple UX directions in minutes

For example:

  • 10 hero sections
  • 5 checkout layouts
  • 3 dashboard concepts

All consistent with the design system.

Reduce the friction of getting started

Instead of:

  • creating frames
  • configuring spacing
  • inserting base components

…the AI prepares the initial structure.

The designer refines it.

Use the design system as a creative constraint

This is the most interesting part:

the LLM doesn’t invent random UI patterns.

It uses:

  • existing components
  • available variants
  • company tokens
  • the visual grammar of the brand

Which makes the output dramatically more consistent than traditional AI generators.

The Most Interesting Use Case I Can Imagine

Imagine a fintech product team.

Every week they need to test new onboarding ideas.

Today, the workflow usually looks like this:

  1. PM writes requirements
  2. Designer creates wireframes
  3. UI designer refines everything
  4. Developers implement it

With MCP, the workflow could become:

Input

The PM writes:

“Create an onboarding flow for users under 25 focused on cashback and social budgeting.”

Claude generates

  • UX structure
  • screen hierarchy
  • CTAs
  • cards
  • progress flow

Using the company’s actual Figma components.

The designer refines

They no longer start from zero. They start with:

  • 70% of the UI already assembled
  • consistent structure
  • proper spacing
  • components already connected to the design system

The time is no longer spent “assembling.”

It’s spent improving.

And that’s a massive shift.

The Real Lesson

The quality of the AI depends entirely on the quality of the design system.

If the system is:

  • messy
  • inconsistent
  • duplicated

…the AI output will also be mediocre.

But with:

  • structured components
  • clean naming
  • clear tokens
  • well-organized variants

the LLM becomes surprisingly useful.

Almost like having an extremely fast junior designer who already knows the entire design system.

Where This Technology Is Actually Strong

Right now, I think this works incredibly well for:

  • rapid prototyping
  • UX exploration
  • generating variants
  • CRUD dashboards
  • enterprise apps
  • onboarding flows
  • landing pages
  • internal tools

Much less for:

  • UX strategy
  • emotional design
  • complex information architecture
  • deep product thinking

Humans still matter enormously.

But the way work gets distributed changes completely.

The Most Important Shift

For the first time, AI is no longer outside the workflow.

It’s inside the real design system.

And that changes everything.

Because it stops being:

  • an inspiration tool
  • a screenshot generator
  • a creative toy

And starts becoming product infrastructure.

Conclusion

I don’t think AI will replace designers.

But I do think we’ll see designers who:

  • explore faster
  • test more ideas
  • generate more variations
  • spend less time on manual assembly work

And ultimately, the real competitive advantage won’t be “using AI.”

It will be having:

  • a strong design system
  • well-structured components
  • a consistent visual grammar

Because the more structured the system is…

the more powerful the AI becomes.

stefano_perelli