Notes
How a screenshot becomes a spec
Field notes from shipping HelpKoder: Figma frames, agent files, kickoff prompts, and the states a mock never shows.
How to turn a screenshot into a Cursor spec
Drop a UI screenshot in HelpKoder, pick Cursor, copy the kickoff and AGENTS.md, then attach the same frame in Cursor so pixels stay the source of truth.
How to turn a Figma frame into a Cursor spec
Paste a Figma frame URL into HelpKoder, export a PNG via a personal access token, then copy an AGENTS.md kickoff for Cursor. Use this when you do not want to wire the Figma MCP.
Copy a Claude Code kickoff from a UI screenshot
Export CLAUDE.md from HelpKoder, paste a short kickoff in Claude Code, and attach the UI screenshot. The frame stays visual canon; the file stays structural canon.
Can you vibe this screenshot?
HelpKoder grades a UI frame YES, KINDA, or NOT REALLY for whether a coding agent can one-shot it. Crop, add states, or stop before you paste a kickoff.
HelpKoder is a screenshot-to-spec studio
Drop a UI screenshot and stream a spec a coding agent can run: tokens, file tree, build order, and a kickoff for Cursor, Claude Code, or v0.
AGENTS.md vs CLAUDE.md vs Cursor rules
Cursor reads AGENTS.md and project rules. Claude Code reads CLAUDE.md. HelpKoder exports the file your agent actually opens, plus a paste-ready kickoff.
How a screenshot becomes a spec an agent can run
The HelpKoder pipeline: instant palette, verdict, tokens, screens, schema, file tree, build order, then a kickoff you paste into Cursor or Claude Code.
What a screenshot hides from a coding agent
A UI screenshot never shows auth, empty, error, loading, or the API. A spec has to name those states or mark them out of scope, or the agent will invent them.