HelpKoder
Blog

Figma

Turn a Figma frame into an agent spec

Copy a frame link with node-id, paste a Figma token with file_content:read, capture the PNG, then stream a Cursor or Claude Code brief. HelpKoder is not a Figma plugin and not a replacement for the Figma MCP. It is the saved spec when MCP is not wired, or when the file started as a Community template.

Paste a Figma URL

GitHub · $10/month

  1. 01 / Link

    Copy the frame, not the file

    Right-click the frame → Copy link to selection. The URL must include node-id. A file or prototype link without a node exports nothing useful. Community files: open or duplicate into your account first. A token cannot see a listing you never opened.

  2. 02 / Token

    Generate a personal access token

    Figma Settings → Security → Personal access tokens. Name it HelpKoder. Scope file_content:read. Expiry is at most 90 days. Paste it once in the studio; it stays in this browser. Do not put it in Cursor chat or AGENTS.md.

  3. 03 / Capture

    Land the PNG, then stream

    Paste the URL on the studio. Capture. The PNG sits on the dropzone like a local export. Sign in with GitHub, subscribe ($10/month), pick Cursor or Claude Code, read the verdict, copy the kickoff. Attach that same PNG in the agent. Extra frames (empty, error, mobile) are more captures from the same file, not one giant page export.

When is this better than the Figma MCP?

The official Figma MCP in Cursor reads layers and variables live. Use it when the file is yours and the agent should inspect Auto Layout. Use HelpKoder when you want a shareable spec, a YES / KINDA / NOT REALLY verdict, and AGENTS.md before you spend the session — or when MCP is not installed yet.

HelpKoder does not generate React. It writes the brief Cursor should execute. That is the same job as dropping a PNG; the Figma URL is only how the PNG arrives.

What usually breaks?

403 means the token cannot open the file. Duplicate the Community template, check the scope, generate a fresh token. Missing node-id means you copied the file URL. A marketing mock with a 3D device grades NOT REALLY — crop to the product UI.

The long walkthrough is how to turn a Figma frame into a Cursor spec. Token docs live on Figma’s PAT page.