To turn a screenshot into a Cursor spec, drop the frame in HelpKoder, choose Cursor as the target, wait for the spec to stream, then copy the kickoff and save AGENTS.md at the repo root. In Cursor, attach the same screenshot on the first message. The pixels stay canonical for layout and color. The spec stays canonical for structure.

That is the whole loop. The rest of this page is the failure modes I hit while wiring it, and the exact files Cursor actually reads.

What do I need before I start?

A cropped UI screenshot. PNG or JPEG. One screen is enough for a first cut. Add extra frames if the first image hides a sheet, an empty state, or a mobile nav. GitHub login on HelpKoder. A Cursor project folder, empty or existing. If the frame is still in Figma, paste the URL instead of exporting by hand — how to turn a Figma frame into a Cursor spec.

Do not send a full-page marketing site with a browser chrome and a dock. Crop to the product. Do not send a moodboard. Moodboards grade NOT REALLY.

How do I run HelpKoder for Cursor?

Open helpkoder.com and drop the screenshot (up to six frames).
Sign in if you have not.
Set the target to Cursor.
Let the spec stream. Read the verdict first. If it is NOT REALLY, crop or add frames before you copy anything.
Copy the kickoff prompt.
Export AGENTS.md and the Cursor rule.
Optional: copy the file tree or a token hex from the studio.

The instant palette in the sidebar is sampled in the browser. Use it to sanity-check the spec. If the swatches are brown and the spec says indigo, chat “use only colors in the screenshot” and regenerate.

What do I paste into Cursor?

Create or open the repo. Put AGENTS.md at the root. Put the rule in .cursor/rules (HelpKoder’s export is named for that). Paste the kickoff as the first composer or agent message. Attach the screenshot.

The kickoff is short on purpose. Cursor does not need the entire studio document in the first bubble. It needs: implement from the screenshot, follow AGENTS.md, do not invent a palette, follow the build order. If you paste a 8,000-character essay, you crowd out the image.

If you use HelpKoder’s “Open in Cursor” deep link, it still cannot carry the PNG. Attach the file. I cannot stress this enough. Without the image, Cursor will follow the spec’s hex and still invent layout.

How do I handle a KINDA verdict?

KINDA means the happy path is buildable and something important is missing. Read what a screenshot hides. Either add the missing frame and re-stream, or accept the inference list in the spec (“empty state is a dashed card with one sentence”).

Then paste into Cursor. Do not start a second chat “also add empty states” without updating the spec. Two briefs is how you get two button components.

What if I already have a codebase?

Drop the screenshot anyway. In HelpKoder chat, say “this is a Next.js App Router app with Prisma. Do not scaffold a new repo. Map screens onto src/app.” The file tree should change from a greenfield tree to a patch list.

Cursor rules in an existing repo already exist. Merge, do not blindly overwrite. Keep your invariants. Replace the visual ones if the mock is the new source of truth.

How is this different from Cursor’s own image paste?

Cursor can see images. HelpKoder is not a better vision model. It is a better document: tokens with roles, a tree, a build order, a saved run, extra frames, and an export named AGENTS.md instead of a chat you will not find on Monday.

I still paste images in Cursor for a one-line tweak. I use HelpKoder when the ask is “build this screen” or “build this flow.” AGENTS.md vs CLAUDE.md vs Cursor rules explains the files. What HelpKoder is explains the studio.

If your agent is Claude Code, use the Claude kickoff guide instead of this page. The screenshot is the same. The filename is not.

How to turn a screenshot into a Cursor spec