Ship Faster Kit

This kit helps designers and engineers generate production-ready UI using AI while maintaining consistency through design tokens. It provides a starting point for a Figma to Claude to Cursor workflow, not a complete framework, just the pieces you need to get going.

When AI generates UI without a token system, it guesses. When it works from a structured token system, it uses your actual values: your button radius, your brand color, your heading font. On-brand from line one.

What's in This Kit

File	What it does
setup-guide.html	Start here. An interactive step-by-step guide with a live progress bar. Covers the full pipeline from Figma file structure through generating your first component.
tokens.json	Structured token definitions. Two-layer system: primitives + semantics. Figma Variables are the authoring source - this file mirrors those values in a format AI tools can read. Generate tokens.css from this file for use in components.
system-prompt.txt	Paste into Claude Project Instructions. Tells Claude how to read your tokens, interpret designs, and draft component structure. Claude proposes - Cursor finalizes.
cursor-rules.txt	Rename to `.cursorrules` and place at your project root. Cursor reads this automatically. Defines coding rules, token usage, accessibility requirements, and project conventions.
README.html	You're reading it.

The Pipeline This Kit Is Built For

Figma Variables
      |
  tokens.json   <- structured token definitions
      |
  tokens.css    <- CSS custom properties generated from tokens.json
      |
 Claude (MCP)   <- reads your design system, proposes component structure
      |
   Cursor       <- writes, refines, and commits final production code
      |
   GitHub       <- version controlled, shippable

Note on tokens.css: tokens.css is generated from tokens.json using any token transformer or simple script. The kit assumes tokens.css already exists in your /tokens folder before components are generated. It is committed to your repo alongside tokens.json.

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 directly to your token values. Generate it from tokens.json using a script or a tool like Style Dictionary. Place it in your /tokens folder alongside tokens.json.

Step 6 - Set up Cursor

Install Cursor. Rename cursor-rules.txt to .cursorrules and place it at the root of your project. Put tokens.json and tokens.css inside 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.