Your AI design
pipeline, ready to ship.

The three tiers everything lives in

How to name your pages

Page names are the only label Claude can read without opening anything. Use number prefixes so it instantly knows what tier it's in - no analysis needed.

-- Skip these (human-only, AI ignores them) --
00 Cover
───

-- 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
───

-- Skip these too (human-only) --
99 Documentation
99 Changelog
99 Playground

How to structure each component

Every component on a page should follow the same internal structure. This consistency is what lets Claude generate clean, prop-driven code instead of hard-coded div soup.

Section: Button
├── Frame: Button - Component Set
│   └── All variants organized by property:
│       ├── Size: sm | md | lg
│       ├── Variant: primary | secondary | ghost | destructive
│       ├── State: default | hover | active | disabled | focused
│       └── Icon: none | leading | trailing
│
├── Frame: Button - Anatomy
│   └── Labeled parts: icon slot, label, padding, border radius
│
├── Frame: Button - Specs
│   └── Exact measurements and token assignments per state
│
└── Frame: Button - Usage Examples
    └── Real examples in context: in a form, in a toolbar, as a CTA

Setting up Variables in Figma

• 1
  Open your Figma file. Go to Local Variables in the top right toolbar (or press ⌘+Option+V).
• 2
  Create two collections: Primitives and Semantics. Think of Primitives as your palette, Semantics as your decisions.
• 3
  In Primitives, add all your raw values. Use forward-slash naming: color/brand/500, spacing/16. Never use these directly in components.
• 4
  In Semantics, create aliases that reference primitives. Example: color/text/primary → references color/neutral/900. These are what AI uses.
• 5
  Publish the library: Assets panel → your library name → Publish. Your library and working file must live in the same Figma workspace.
• 6
  In your working file, go to Assets → Libraries and enable your published library. Test it by dragging a component onto the canvas to confirm the connection.

• 1
  Download and install Claude Desktop from claude.ai/download
• 2
  Get your Figma API token - this is a password that lets Claude read your Figma files. Go to Figma → Account Settings → Personal Access Tokens → Generate new token. Give it read access to files and dev resources. Copy it somewhere safe.
• 3
  In Claude Desktop: Settings → Developer → Edit Config. This opens a config file - don't worry, you just need to paste one block of code into it. Copy the code below and replace YOUR_TOKEN_HERE with the token you just generated.

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

• 4
  Save the config file and fully restart Claude Desktop (quit from the menu bar, reopen).
• 5
  Test the connection by typing this into Claude: "What Figma skills do you have access to?" If it worked, Claude lists tools like search_design_system and get_variable_defs. If not, restart Claude Desktop and try again.
• 6
  Confirm Claude can actually read your variables by asking: "List the tokens in my Figma file at [YOUR FILE URL]." Claude should return token names like color/text/primary and spacing/component/md with their values. If it can't, your library may not be published or connected to the file.

• 1
  In Claude Desktop or Claude.ai, find Projects in the left sidebar and click New Project. Name it something like "UI Pipeline" or your product name. Projects keep all your AI conversations organized in one place.
• 2
  Inside the project, click Project Instructions. Open the system-prompt.txt file from this kit, select all, and paste it in. That's it - Claude now knows your design rules.
• 3
  Every conversation you start inside this Project automatically inherits these instructions. You never have to re-explain your design system to Claude again.

• 1
  Download and install Cursor from cursor.com. It looks like a normal code editor - open your project folder in it the same way you would any app.
• 2
  Take the cursor-rules.txt file from this kit and rename it to .cursorrules - note the dot at the start and no file extension. Drop it in the root folder of your project. Cursor reads this file automatically every time it runs.
• 3
  Create a folder called tokens at the root of your project. Place tokens.json inside it. You'll also need to generate a tokens.css file from it - see the callout below.
• 4
  In Cursor settings, make sure the AI model is set to Claude Sonnet. The rules file is written specifically for this model.
• 5
  Important habit: After Cursor generates something that works, click Accept on all the changes before moving on. This saves your progress - if something breaks later, you can always roll back to the last accepted state.

Generate CSS variables

tokens.css is generated from tokens.json using any design token transformer or simple script. The result is a CSS file containing custom properties that components reference directly. Place it at /tokens/tokens.css alongside tokens.json and commit both to your repo.

Step 1 - Ask Claude to read your design system

Step 2 - Ask Cursor to write the final code

• 1
  Open Claude Desktop with Figma MCP active. Copy your Figma file URL from the browser and use the prompt above. You'll see Claude working through your design system in real time - reading components, pulling variables, building the screen.
• 2
  Check Figma. If the screen was built using real library components, you'll see them listed by name in the left panel - not generic "Frame" or "Rectangle" layers. Try switching color modes to confirm everything updates correctly.
• 3
  Claude's output is a draft - bring it into Cursor to finalize. Ask Cursor to refine the code, replace any hardcoded values with CSS custom properties from tokens.css, add missing states, and integrate with your project structure. Accept changes after each step.
• 4
  Save and commit to GitHub. That's your first AI-generated, on-brand component - shipped.