To turn a Figma frame into a Cursor spec, copy the frame link (it must include node-id), paste it into HelpKoder, add a Figma personal access token with file_content:read, capture the PNG, pick Cursor, then copy the kickoff and save AGENTS.md. In Cursor, attach that same PNG. The pixels stay canonical. The spec stays structural.

That loop does not replace the official Figma MCP in Cursor. MCP reads layers and variables live. HelpKoder writes a document you can share, refine, and paste next week. I use both. I use HelpKoder when MCP is not installed, the file is a Community template I just duplicated, or I want a verdict before I spend an agent session.

When should I use HelpKoder instead of the Figma MCP?

Use HelpKoder when any of these are true:

You do not want to install an MCP server or OAuth plugin this afternoon.
The design is a Community file. Duplicate it into your account first, then capture. A token cannot export a file your user cannot open.
You need a saved spec: tokens with roles, hidden states, a file tree, a YES / KINDA / NOT REALLY verdict.
Several people will implement the same frame. A share link beats “scroll up in my Cursor chat.”

Use the Figma MCP when you already live in Cursor, the file is yours, and you want the agent to read Auto Layout and variables directly. Builder.io, Fishtank, and Figma’s own docs cover that path. HelpKoder is the screenshot-to-spec path: one exported frame, one brief, one kickoff.

If you already have a PNG export from Figma, skip the URL. Drop the PNG. The Cursor screenshot walkthrough is then the rest of the job.

What does a usable Figma URL look like?

It looks like a frame link, not a file link.

Right-click the frame on the canvas → Copy link to selection. Or select the frame and copy the address bar. You need node-id= in the query string. Example shape:

https://www.figma.com/design/FILEKEY/Name?node-id=60-1116

HelpKoder maps 60-1116 to Figma’s 60:1116 and calls the Images API at 2× PNG. A file URL with no node exports nothing useful. A prototype URL without a node is the same miss. A board of ten screens in one capture will grade NOT REALLY. Capture the screen you will actually build, then add extra frames for empty, error, and mobile.

Community templates are allowed. Open or duplicate the file so it appears in your account. Then copy the frame link from your copy. Copying the Community listing URL and hoping the token can see it is how you get a 403.

figma.com/file/ links still work if they carry node-id. figma.com/design/ is the current shape. Do not paste a FigJam board unless the node is a single UI frame. Do not paste a comment permalink.

How do I generate a Figma personal access token?

Figma will not render a frame for HelpKoder without a token. That is their API, not a paywall we invented.

In the Figma file browser, open the account menu → Settings.
Open the Security tab.
Under Personal access tokens, generate a new token.
Name it HelpKoder. Scope file_content:read. Expiry is at most 90 days.
Copy it once. It looks like figd_….

Paste the token into HelpKoder’s capture field. It stays in this browser under helpkoder.figma-token. You can also set FIGMA_ACCESS_TOKEN on the server if you run the app yourself. Official steps: Manage personal access tokens.

If Figma returns 403, the token cannot see the file. Duplicate the Community file, confirm the scope, generate a fresh token. A token from a teammate’s account will not open a file you were never invited to.

Do not paste the token into Cursor chat. Do not put it in AGENTS.md. Do not commit it. When it expires, generate another and paste it once in the studio. HelpKoder never needs write access.

How do I run the HelpKoder capture?

Open the Figma landing or the studio.
Paste the frame URL. The token field appears when the URL looks like Figma.
Capture. You should see the PNG on the dropzone, same as a local export.
Sign in with GitHub if you have not. Subscribe if you have not. The studio is $10/month.
Set the target to Cursor.
Stream the spec. Read the verdict first.
Copy the Cursor kickoff. Export AGENTS.md and the Cursor rule.
Optional: lock to an existing repo by pasting globals.css so the spec is a patch list.

Then open Cursor. Put AGENTS.md at the repo root. Paste the kickoff. Attach the captured PNG. Deep links cannot carry the image. Without the frame, Cursor will follow hex values and still invent layout. I have watched that happen on HelpKoder’s own landing.

If the agent is Claude Code, switch the target before you generate. The filename becomes CLAUDE.md. See the Claude Code kickoff. The Claude Code landing is the product page for that target.

How do I add empty, error, and mobile from the same Figma file?

HelpKoder takes up to six frames in one spec. Capture the primary screen first. Then copy the empty-state frame, the error toast, the mobile artboard, and capture those too. Each capture lands as another image on the dropzone.

Do not export a whole Figma page that contains desktop, tablet, and a marketing footer in one PNG. The vision model will average them. One node per capture. Name the frames in Figma so you can tell them apart after they land (Home / empty, Home / error, Home / mobile). The studio can carry labels; the agent still needs the pixels.

If the designer only drew the happy path, say so in chat after the spec streams. Inferring an empty table is cheaper than inventing a second product.

Figma MCP vs PNG export vs HelpKoder

| Path | What the agent sees | When it fails | | ----------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------ | | Figma MCP in Cursor | Live layers, variables, often a screenshot of the node | Setup, auth, Community files you never opened, no saved brief | | Export PNG, paste into Cursor | Pixels only | No tokens-as-roles, no tree, no hidden-state list, chat evaporates | | HelpKoder capture | PNG plus a spec, AGENTS.md, kickoff, share link | Needs a PAT; still attach the PNG in Cursor |

I do not generate the React. HelpKoder is not screenshot-to-code. Agents write the code. The studio writes the brief they should not have to invent. That distinction is the product. What HelpKoder is is the longer version.

MCP is better at “what is the Auto Layout gap on this card.” HelpKoder is better at “here is the file tree, the Prisma model, and the build order, and here is a share URL for the person who was not in the Figma file.” If you already have MCP wired, you can still run HelpKoder first for the verdict, then let Cursor talk to Figma for the last 10% of spacing.

What if the verdict is KINDA or NOT REALLY?

A Figma marketing file with fake data, glass, and a 3D device will grade NOT REALLY. Crop to the product UI. Remove the browser chrome. Add the empty table as a second frame.

KINDA is the honest Community-template grade: hero is clear, the sheet is a shadow, dark mode is a toggle with no second page. Add frames or accept the inference list, then paste. Do not paste a KINDA spec and a second ChatGPT essay. Can you vibe this screenshot? is the rubric.

A YES from a Figma capture is the same YES as from a PNG drop. The source does not change the bar. If the frame is a dashboard with four empty widgets and a chart that is a rectangle, expect KINDA. That is the studio telling you the agent will hallucinate the chart library unless you name it.

What should I paste into Cursor after the spec lands?

The short kickoff, not the whole studio document. Cursor’s first message should say: implement from the screenshot, follow AGENTS.md, do not invent a palette, follow the build order. The kit zip (or npx helpkoder pull) drops mocks/, AGENTS.md, SPEC.md, and KICKOFF.md into a folder if you are tired of copying.

If the repo already exists, say so in HelpKoder before you copy. Patch mode should name files to change, not create-next-app. Merge rules. Do not overwrite a Cursor rule that encodes your auth invariants.

The Cursor landing is the short commercial version of this loop without the Figma token steps. The Cursor-only walkthrough covers kickoff length, extra frames, and why the image still has to ride along. This page is only the Figma-shaped front door.

How to turn a Figma frame into a Cursor spec