Cursor Isn’t the Problem. Your Design Tokens Are

Sachin Patel

3 min read

·

Jan 6, 2026

--

Listen

Share

Press enter or click to view image in full size

We introduced Figma MCP with Cursor into our workflow to generate frontend code directly from Figma design nodes. While the setup worked functionally, the generated UI code was inconsistent — particularly around CSS variable usage.

The root cause wasn’t the AI tooling.

It was inconsistent design token and CSS variable naming.

To get started with Figma MCP, follow the official Figma MCP Server guide provided by Figma.

The Core Issue: Token Drift

Over time, our system evolved like this:

In Figma

color.primary.500
color.brand.main
color.blue.600

In Frontend CSS

--color-primary
--brand-blue
--blue-600

Many of these variables represented the same raw color value but were exposed through different semantic token names across design and frontend. Humans could reason about this ambiguity; Figma MCP could not.

When Figma MCP attempted to generate code from a design node, inconsistent or overlapping token references prevented deterministic name resolution, resulting in unpredictable CSS variable output or fallback to raw values.

Why This Breaks Figma MCP

• Figma MCP relies on explicit design token references, not inferred intent or value matching.
• It resolves CSS variables through name-based mapping between design tokens and frontend variables.
• When multiple semantic tokens reference the same value, MCP cannot deterministically choose one.
• Misalignment between token names and CSS variables breaks reliable mapping.

In such cases, MCP emits inconsistent variables or falls back to raw values — an issue that must be fixed at the design system level, not through prompts.

The Fix: Make Tokens Deterministic

Step 1: Separate Raw Tokens From Semantic Tokens

We restructured our tokens to follow a strict hierarchy.

Raw tokens (single source of truth):

color.raw.blue.600 = #2563EB

Semantic tokens (reference raw tokens):

color.action.primary = {color.raw.blue.600}
color.link.default   = {color.raw.blue.600}

Rules we enforced:

• One raw value per token
• Semantic tokens must reference raw tokens
• No duplicate semantics for the same intent

This eliminated ambiguity at the design layer.

Step 2: Align Frontend CSS Variables With Tokens

Next, frontend variables were aligned one-to-one with Figma tokens.

:root {
  --color-raw-blue-600: #2563eb;

  --color-action-primary: var(--color-raw-blue-600);
  --color-link-default: var(--color-raw-blue-600);
}

Key principles:

• CSS variable names mirror Figma token names — Figma design tokens are the source of truth
• No frontend-only aliases
• Semantic intent is preserved in naming

We used a Figma plugin — Token Sniff to extract tokens directly into CSS to avoid manual drift.

Step 3: Use Figma MCP After Alignment

Once design tokens and frontend CSS variables are fully aligned, you can start using Figma MCP with Cursor for code generation.

• MCP could reliably identify the correct token
• Cursor generated predictable variable usage
• No more random or legacy CSS variable names

The AI output became stable because the system became deterministic.

What This Enables

• Deterministic CSS variable resolution during Figma MCP–based UI code generation.
• Consistent AI-generated UI output across components and files.
• Lower post-generation cleanup cost due to predictable token usage.
• Stronger contract between design and frontend via shared token naming.
• Scalable AI-assisted workflows without relying on prompt heuristics.

Key Takeaways

• Figma MCP resolves variables by token name, not by value or intent.
• Design token ambiguity directly results in unstable AI output.
• Frontend CSS variables must align one-to-one with design tokens.
• Token structure is system infrastructure, not a styling concern.
• Reliable AI code generation depends more on system design than prompts.

Conclusion

Figma MCP and Cursor didn’t require better prompts. They required a cleaner design system.

By enforcing strict token hierarchies and aligning frontend variables with Figma design tokens, we turned AI-generated UI code from “sometimes useful” into something we can reliably trust in production.