Ship UI faster
with AI + tokens.

What's in this kit

The pipeline

Quick setup

Step 1: Structure your Figma file

Organize your Figma pages with number prefixes so AI knows what it's looking at: 01 Foundations - Color, 02 Components - Actions, 03 Patterns - Forms, 04 Pages - Dashboard. Split foundations across separate pages, one for color, one for typography, one for spacing.

Step 2: Set up Figma Variables

Create two collections in Figma Variables: Primitives (raw values) and Semantics (aliases that reference primitives). Use the structure in tokens.json as your naming guide. Publish the library when done.

Step 3: Connect Figma MCP to Claude

Install Claude Desktop, get your Figma API token from Account Settings, then add this to Claude Desktop's config file (Settings → Developer → Edit Config):

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_TOKEN_HERE"]
    }
  }
}

Restart Claude Desktop. Test by asking: "What Figma skills do you have access to?"

Step 4: Load the system prompt

Create a new Claude Project. Paste the contents of system-prompt.txt into Project Instructions. Every conversation in this project now knows your design rules automatically.

Step 5: Generate tokens.css

tokens.json defines your tokens. tokens.css is what your components actually use. It contains CSS custom properties like --color-text-primary and --spacing-component-md that map to your token values. Generate it from tokens.json using a script or Style Dictionary. Place it in your /tokens folder.

Step 6: Set up Cursor

Install Cursor. Rename cursor-rules.txt to .cursorrules and place it at your project root. Put tokens.json and tokens.css in a /tokens folder. Set the model to Claude Sonnet. Cursor is where all final production code is written and refined.

Step 7: Generate your first component

Use Claude with Figma MCP to draft component structure:

Read the design system library [YOUR LIBRARY NAME] from file [YOUR FIGMA FILE URL].
Draft the structure for a login screen using real library components.

Then bring it into Cursor to finalize:

Generate a primary Button component referencing tokens.css for all values.
Include sm, md, lg sizes and hover, focus, disabled states.

Customizing the token system

tokens.json is a starter, not a final file. Replace the values with your own brand.

Change these first:

• primitives.color.brand.* — your primary brand color ramp
• primitives.color.accent.* — your secondary/action color
• primitives.font-family.sans — your UI font
• semantics.radius.* — how round or square your UI feels

Don't touch these:

• The token structure and naming conventions
• The primitive to semantic reference pattern
• The $description fields (AI reads these)

Common mistakes to avoid

In Figma:

• Using Styles instead of Variables — AI cannot read Styles via MCP
• Skipping the semantic layer — primitives alone don't tell AI where to use a value
• Publishing the library to a different workspace than your working file

In Claude:

• Not testing the MCP connection before prompting for UI
• Leaving out the library name in your prompt
• Vague prompts — always specify file URL, what to build, and library name

In Cursor:

• Not accepting changes after each working component — that's your undo history
• Letting Cursor patch the output instead of fixing the source code
• Installing packages without checking if a native solution exists

Why this works

AI doesn't browse your Figma file and fill in the gaps with good judgement. It needs structure that is explicit and metadata it can reason about. Every assumption you leave undocumented is a liability.

When AI generates UI without a token system, it guesses. Components look reasonable but feel off-brand. When it works from a structured token system, it uses your actual button radius, your brand color, your heading font. On-brand from line one.