To start Claude Code from a UI mock, drop the screenshot in HelpKoder, pick Claude Code, export CLAUDE.md, and paste the kickoff as the first instruction. Attach the same PNG. Claude Code reads CLAUDE.md from the working directory. It does not read Cursor rules. The screenshot is visual canon. CLAUDE.md is structural canon.

I keep the kickoff short because Claude Code first messages and deep links have a tight character budget. The studio document can be long. The paste cannot.

What is a kickoff prompt in this workflow?

A kickoff is the first instruction you type after the files are in the folder. It tells Claude Code to implement the product from the screenshot, obey CLAUDE.md, use the token roles, and follow the build order. It does not repeat every component.

HelpKoder generates that paragraph for you. You can copy it, or use the compact launch prompt when a URL length cap would truncate the spec. If the compact version lost a constraint you care about (“Neon only,” “React Native”), add one sentence. Do not paste the entire Markdown spec into the terminal.

How do I run the HelpKoder side?

Drop one to six frames on helpkoder.com. A Figma frame URL works too — the Figma capture notes.
Choose Claude Code as the target.
Read the YES / KINDA / NOT REALLY strip. Verdict rules if that is new.
Export CLAUDE.md.
Copy the kickoff.
Optional: download the kit zip if you want the spec plus agent file together.

Chat the spec before you export if the stack is wrong. Claude Code will follow a Next.js tree if that is what CLAUDE.md says, even if you meant Expo.

How do I run the Claude Code side?

Open the project directory in a terminal. Confirm CLAUDE.md is at the root. Launch Claude Code. Attach the screenshot. Paste the kickoff.

If you use a deep link from HelpKoder, still attach the image. A URL cannot carry your PNG. Without it, Claude will implement a plausible UI from the token table and miss the layout.

Put the screenshot in the repo if you want later turns to see it without re-attaching. A docs/mock.png path mentioned in CLAUDE.md is enough.

What belongs in CLAUDE.md vs the studio spec?

CLAUDE.md: product one-liner, stack, token roles, file tree spine, build order, invariants (“screenshot is canonical,” “no second palette,” “ask when a state is missing”).

Studio spec: full screen inventory, hidden states, component notes, Prisma sketch, the long “looks like” paragraph. Keep it in HelpKoder or save it next to the mock. Do not duplicate it into CLAUDE.md or you will blow the context window on every turn.

AGENTS.md vs CLAUDE.md vs Cursor rules is the comparison if you also use Cursor. Same screenshot, different filename. Do not put both files in one repo unless you maintain them. They will drift.

What goes wrong with Claude Code specifically?

Claude Code is obedient to CLAUDE.md and eager to “finish” hidden states. If you omit empty and error, it will invent a toast system. If you omit “out of scope: billing,” it will add Stripe. Write the omissions. What a screenshot hides is the checklist I use before I copy.

It also likes to start at the wrong end of the tree: auth before the screen you uploaded. The build order section exists to stop that. If the screenshot is a settings page, the kickoff should say so in the first sentence.

When should I use Cursor instead?

If your daily driver is Cursor composer, use the Cursor walkthrough and AGENTS.md. If your daily driver is the Claude Code CLI, stay here. HelpKoder is the same studio. The export pack changes with the target dropdown.

I am Audiencon. I run both, and I got tired of pasting the same mock into a blank chat. Open the studio, pick Claude Code, and leave with a file the CLI will actually read.

Copy a Claude Code kickoff from a UI screenshot