Interactive Setup Guide · v1.0
Your AI design pipeline,
ready to ship.
Follow these 6 steps to connect Figma, Claude, and Cursor into a pipeline that goes from design system to production-ready code automatically.
Figma Variables
→
Claude MCP
→
Cursor
→
GitHub
Your design system becomes the code.
Not a reference doc someone interprets. The actual working code, generated directly from your Figma design system, on-brand from line one.
The old way
🎨 Designer builds in Figma
↓
📋 Hands off specs to developer
↓
🤔 Developer interprets the design
↓
❌ Builds something close, not quite right
↓
🔁 Back and forth for days
VS
The new way
🎨 Designer builds in Figma with Variables
↓
⚡ Claude reads the design system directly
↓
✅ Writes code using your exact colors, spacing, components
↓
🚀 Ready to commit. No redlines. No drift.
What this looks like in practice: You type
"build me a login screen" and get back a real React component using your actual button radius, your brand color, your heading font, because Claude read them directly from Figma. Not an approximation. The real thing.STEP 01
Structure Your Figma File for AI
Before variables, before tokens, before any of the tools, your Figma file needs to be organized in a way AI can actually navigate. A messy file produces messy code. A structured file produces clean, accurate components from the first prompt.
Why file structure matters: When Claude reads your Figma file, it scans layer by layer. If everything is on one giant page with no clear organization, Claude has to guess what's a component, what's a prototype, and what's a rough sketch. That guessing shows up in your code. Give it a clear map and it navigates straight to what it needs.
The three tiers everything lives in
Components
Individual, self-contained UI pieces. Button, Input, Badge, Avatar. Each maps to a single reusable code file.
Patterns
Components combined to solve a real use case. Login Form, Data Table, Nav Bar. Built from component instances.
Pages
Complete screens assembled from patterns and components. Dashboard, Settings, Onboarding. What users actually see.
How to name your Figma pages
Figma page structure
-- Foundations: one page per category -- 01 Foundations - Color 01 Foundations - Typography 01 Foundations - Spacing & Grid 01 Foundations - Elevation & Radius -- Components: grouped by function -- 02 Components - Actions 02 Components - Inputs 02 Components - Navigation 02 Components - Feedback -- Patterns: composed from components -- 03 Patterns - Forms 03 Patterns - Lists & Tables 03 Patterns - Cards & Content -- Pages: full screens -- 04 Pages - Dashboard 04 Pages - Settings 04 Pages - Onboarding
Split your foundations across separate pages. Don't put color, typography, spacing, and icons all on one page. When Claude needs to extract your typography tokens, it shouldn't have to load every color swatch and icon grid too.
Figma pages organized with 01/02/03/04 prefix structure
Foundation pages split by category
Each component has Component Set, Anatomy, Specs, and Usage frames
Real placeholder content used throughout, no Lorem Ipsum
Icons named semantically
STEP 02
Build a Design System AI Can Actually Use
Before AI can generate UI that looks like your product, it needs to know your rules. Not just colors and fonts, but what those colors and fonts mean. This is the foundation everything else depends on.
Think of it like hiring a contractor: You could hand them a paint chip and say "use this color somewhere." Or you could say "this goes on the walls, this one on the cabinets, never on the ceiling." The second brief gets you what you actually wanted. Figma Variables work the same way.
Primitives — raw values
color/brand/500
#22c55e
color/neutral/900
#111827
spacing/1616px
radius/full9999px
→
Semantics — decisions
color/action/primary→ brand/500
color/text/primary→ neutral/900
spacing/component/md→ spacing/16
radius/button→ radius/full
Common mistake: Using Figma Styles instead of Variables. Styles are not accessible via the MCP API. Claude cannot read them. You must use Variables.
- 1Open your Figma file. Go to Local Variables in the top right toolbar.
- 2Create two collections: Primitives and Semantics. Primitives are your palette. Semantics are your decisions.
- 3In Primitives, add all raw values using forward-slash naming:
color/brand/500,spacing/16. Never reference these directly in components. - 4In Semantics, create aliases that reference primitives. Example:
color/text/primary→ referencescolor/neutral/900. These are what AI uses. - 5Publish the library: Assets panel → your library name → Publish. Library and working file must be in the same Figma workspace.
Created Primitives collection in Figma Variables
Created Semantics collection with aliases referencing primitives
Published library to Figma workspace
Connected library to working file and confirmed components drag correctly
STEP 03
Give Claude Direct Access to Your Figma File
Right now Claude and Figma don't know each other exist. This step connects them using MCP, a live bridge that lets Claude read your design file directly without you having to copy-paste anything between apps.
Why this matters: Without this connection, you'd have to manually describe your design to Claude every time. With MCP, Claude just reads your Figma file and already knows. It's the difference between hiring someone who's read your brand guide vs. one who hasn't.
- 1Download and install Claude Desktop from claude.ai/download
- 2Get your Figma API token: Figma → Account Settings → Personal Access Tokens → Generate new token. Give it read access. Copy it somewhere safe.
- 3In Claude Desktop: Settings → Developer → Edit Config. Paste the config below, replacing
YOUR_TOKEN_HEREwith your token.
JSON · claude_desktop_config.json
{
"mcpServers": {
"figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR_TOKEN_HERE"
]
}
}
}
- 4Save the config and fully restart Claude Desktop.
- 5Test by typing: "What Figma skills do you have access to?" Claude should list tools like
search_design_systemandget_variable_defs.
If the connection fails: This requires Node.js to be installed. Download it at nodejs.org (LTS version), then try again.
Claude Desktop installed
Figma Personal Access Token generated
MCP config added to claude_desktop_config.json
Claude Desktop restarted and connection confirmed
STEP 04
Give Claude Its Standing Orders
Claude reads your design system and drafts component structure, but it needs to know your rules first. This step gives Claude a permanent briefing so every conversation starts from the same foundation.
Think of it like onboarding a new hire: The system prompt is Claude's briefing document. It tells Claude how your tokens work, how to read your Figma library, and what it should never do. Cursor then takes Claude's output and produces the final production code.
- 1In Claude Desktop or Claude.ai, find Projects in the left sidebar and click New Project.
- 2Inside the project, click Project Instructions. Open
system-prompt.txtfrom this kit, select all, and paste it in. - 3Every conversation you start inside this Project automatically inherits these instructions. You never have to re-explain your design system again.
Want to customize it? The only thing you need to change is the folder structure at the bottom of
system-prompt.txt. Update it to match how your project is organized. Everything else works out of the box.Created a new Claude Project
Pasted system-prompt.txt into Project Instructions
Started a test conversation inside the Project to confirm it's working
STEP 05
Set Up Cursor — Where Code Gets Written
Cursor is a code editor with AI built in. It's where the components Claude designs actually get written, cleaned up, and saved. Claude is the architect. Cursor is the builder.
- 1Download and install Cursor from cursor.com. Open your project folder in it.
- 2Take
cursor-rules.txtfrom this kit and rename it to.cursorrules. Drop it at the root of your project. Cursor reads this automatically. - 3Create a
tokensfolder at the root of your project. Placetokens.jsoninside it. Generatetokens.cssfrom it and place that inside too. - 4Set the AI model to Claude Sonnet in Cursor settings.
- 5Important habit: Accept all changes after Cursor generates something that works. This saves your progress and gives you a clean rollback point.
Two things to watch for: If Cursor tries to fix a bug by editing the output instead of the source code, stop it: "Don't fix the output, fix the code that creates it." If it's stuck, say: "Please stop and tell me where you are."
Cursor installed and project folder opened
cursor-rules.txt renamed to .cursorrules and placed at project root
tokens.json placed in /tokens folder
tokens.css generated and placed in /tokens folder
Model set to Claude Sonnet in Cursor settings
STEP 06
Generate Your First Component
Everything is connected. Claude reads your Figma design system and drafts component structure. Cursor takes that draft and produces final, production-ready code referencing your tokens.
Claude reads, Cursor writes. Give Claude a Figma file link, what you want built, and your library name. Claude reads your library and drafts the structure. Then bring it into Cursor to generate final production code against your token system.
Step 1 — Ask Claude to read your design system
Create a [what you want, e.g. mobile login screen] in file [your Figma file URL] using components from my design system library [your library name exactly as it appears in Figma].
Step 2 — Ask Cursor to write the final code
Generate a [component name] component referencing tokens.css for all visual values. Include [sm, md, lg sizes] and [hover, focus, active, disabled states]. Export as [ComponentName] with a TypeScript Props interface.
If Claude builds generic UI instead of your components: Double-check that the library name in your prompt is spelled exactly as it appears in Figma's Assets panel. It's case sensitive.
Generated first screen in Figma via Claude MCP
Confirmed components are real library instances, not raw frames
Generated final component in Cursor referencing tokens.css
Committed to GitHub
🚀 Pipeline Complete
You're set up to ship faster.
Your design system is now something AI can actually use. Every component your team generates from here will be on-brand, consistent, and ready to commit.