Cursor's Composer can write a lot of UI code. What it can't do is read your Figma file. Paste in a screenshot and it guesses — wrong spacing, invented color values, made-up component names that match nothing in your codebase. The problem isn't the model. It's the missing structured context.

figmascope fixes that. It exports your Figma file as a zip bundle: design tokens, per-screen layout trees, 2× reference renders, a component inventory, and UI strings — everything Cursor's agent needs to generate accurate code rather than plausible-looking code.

This walkthrough covers the full pipeline: Figma URL → context bundle → Cursor prompt → reviewed output.

What's in the bundle

When figmascope exports your file, the zip contains:

The bundle stays on your machine. It's never re-uploaded anywhere.

Step 1: Generate the bundle

Head over to figmascope and paste your Figma file URL into the input field. The exporter runs in your browser against the Figma REST API — you'll need a personal access token the first time (stored in localStorage, never sent to figmascope servers).

Hit Export Agent Context. The page processes each frame, resolves tokens, builds the IR, then downloads context-bundle.zip to your machine.

If your file has many frames, only top-level frames that aren't components or thumbnails are included. The _meta.json shows exactly which frames were exported and any warnings (gradient fills, unsupported effects).

Step 2: Unzip into your project

Put the bundle where Cursor can see it — a design/ directory at your repo root is the cleanest pattern.

# from your project root
unzip ~/Downloads/context-bundle.zip -d ./design/

# verify the structure
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Add design/ to .gitignore if you don't want to commit the bundle. Or commit it — it's deterministic; the same Figma file at the same state always produces the same bundle, so diffs are meaningful.

Step 3: Add a .cursorrules snippet

Cursor reads .cursorrules at the repo root and prepends it to every chat context. This is where you wire the agent to the bundle.

# .cursorrules

When building UI screens:
1. Read ./design/CONTEXT.md first. It specifies the target framework and constraints.
2. Use tokens from ./design/tokens.json for all spacing, color, radius, and typography values.
3. Reference ./design/screens/<name>.json for layout structure and node hierarchy.
4. Match ./design/screens/<name>.png for visual confirmation — use it as a sanity check, not the source of truth.
5. Use string keys from ./design/strings.json rather than hardcoding UI copy.
6. Do not invent token values. If a value isn't in tokens.json, flag it.

This single block prevents the three most common drift sources: invented colors, hardcoded strings, and layout guessing from the screenshot.

Step 4: Open Cursor Composer and implement a screen

Open Composer (Cmd+I on macOS). Pin the files before prompting: click the paperclip icon and add design/CONTEXT.md, design/tokens.json, and design/screens/home.json. Then prompt:

Implement the home screen from ./design/screens/home.json.

Constraints:
- Target framework and component conventions are in ./design/CONTEXT.md
- All spacing, color, and radius values must come from ./design/tokens.json
- UI strings must use keys from ./design/strings.json
- The root node is a stack (vertical). Children are declared in order in the JSON.
- Do not invent any values not present in the token or IR files.

Cursor will read the pinned files, map the IR nodes to your framework's primitives, and generate the implementation. The output is token-referenced — if you inspect the generated code, every spacing value should trace back to a key in tokens.json.

Step 5: Review and iterate

Open design/screens/home.png alongside the rendered output. The PNG is a 2× export from Figma — it shows exactly what the design should look like. Differences are meaningful: they point to either IR mapping gaps or token values that weren't applied.

Common issues and follow-up prompts:

Token drift — the agent used a hardcoded hex instead of a token:

Compare every color value in the generated component against ./design/tokens.json.
List any colors that don't match a token key. Replace them with the correct token reference.

Missing component — the IR references a component ID the agent didn't resolve:

The IR references componentId "btn-primary-01". Check ./design/components/inventory.json
for its name and type, then implement a placeholder with that name and the correct token values.

Layout off — spacing or alignment doesn't match the PNG:

The vertical gap between the header and the card list should be spacing.24 from tokens.json (24dp).
Your output uses 16px. Fix it.

What works, what doesn't

Works well: flat screens with stack layouts, token-driven spacing and color, text with string refs, simple card and list patterns. Cursor handles these well once the IR is in context — it stops guessing and starts mapping.

Works less well: complex absolute-positioned overlays (Cursor sometimes misreads the offset coordinates), gradient fills (flagged as warnings in _meta.json — Cursor will approximate), and vector icons (the IR stores a reference ID only, not path data).

Screenshot-only vs. bundle: going screenshot-only is faster to start but non-deterministic. Every session starts fresh. The model might nail spacing once and miss it the next turn. The bundle is referenceable across the whole session — Cursor can check its own output against the token file at any point without re-uploading anything.

Tip: check _meta.json warnings before prompting

Before your first implementation prompt, read design/_meta.json. The warnings array lists anything the exporter couldn't fully resolve: gradient fills, missing token mappings, frames with embedded images. Add a note about these to your prompt so the agent doesn't try to implement them and silently fall back to hardcoded values.

cat design/_meta.json | python3 -m json.tool | grep -A 20 '"warnings"'

If the output shows "gradientFill: not fully supported" on a specific node, tell Cursor to skip that node's background and leave a // TODO: gradient comment instead.

Summary

The workflow is: export once, reference everywhere. The bundle is a stable, machine-readable spec that Cursor can consult across multiple turns without re-processing the design. You get token-accurate, string-referenced, layout-correct code instead of a screenshot approximation — and when something drifts, you can point the agent back to the source of truth in one line.

Run this yourself on figmascope.dev — paste your Figma URL, hit Export Agent Context, and unzip the bundle into your Cursor workspace in under two minutes.