Cursor
A Cursor spec from a UI screenshot
Drop a cropped frame — or paste a Figma URL — then stream a spec aimed at Cursor. You leave with AGENTS.md, a Cursor rule, and a short kickoff. In Cursor, attach the same PNG. HelpKoder does not write the React. Cursor does, against a brief that already named tokens, files, and build order.
GitHub · $10/month
01 / Frame
One screen, cropped
PNG or JPEG. Product UI, not a marketing page with browser chrome. Extra frames for empty, error, and mobile if the first image hides them. A Figma frame URL with node-id works if you add a personal access token.
02 / Spec
Pick Cursor and read the verdict
GitHub login. $10/month. Set the target to Cursor before you generate — the export filenames change. YES means paste. KINDA means add frames or accept the inference list. NOT REALLY means crop. Do not paste a KINDA spec and a second ChatGPT essay.
03 / Paste
AGENTS.md at the repo root
Copy the short kickoff, not the whole studio document. Save AGENTS.md. Optional Cursor rule. Attach the screenshot on the first message — deep links cannot carry the image. If the repo exists, lock to globals.css so the spec is a patch list, not create-next-app.
What does Cursor actually read?
Cursor reads AGENTS.md from the project root. It may also pick up a project rule. It does not read CLAUDE.md. If you switch agents later, regenerate with the Claude Code target instead of renaming the file and hoping.
The kickoff 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 if you are tired of copying.
When the design is still in Figma
You do not have to export by hand. Paste the frame link on the Figma page. That is capture, not a Figma plugin. The Figma MCP in Cursor is a different path: live layers, no saved brief. Use both if you already have MCP; use HelpKoder when you want the document.
The field notes are how to turn a screenshot into a Cursor spec.