HelpKoder is a screenshot-to-spec studio

Drop a UI screenshot into HelpKoder and you leave with a streaming implementation spec. The document names tokens, screens, a file tree, and a build order. You copy a kickoff for Cursor, Claude Code, or v0, then attach the same screenshot as the visual source of truth.

I built this because pasting a mock into a chat and hoping for a repo is a bad loop. The chat forgets the hex. The file tree is a guess. Hidden states never show up. HelpKoder keeps the run, structures the brief, and lets you rewrite the spec in place instead of scrolling a thread.

What does HelpKoder actually produce?

A HelpKoder run is Markdown an agent can execute, not a product requirements dump. After you pick a target (Cursor, Claude Code, v0, Lovable, or generic), the studio streams sections in a fixed order: a YES / KINDA / NOT REALLY verdict, what the UI looks like, what the screenshot hides, design tokens, screens, components, a data model, routes, a file tree, and a build order.

The first useful artifact is the kickoff. It is a short prompt that says: implement this from the screenshot, treat the frame as canonical for visuals, and follow the spec for structure. Cursor and Claude Code also get files they already know how to read. Cursor gets AGENTS.md plus a project rule. Claude Code gets CLAUDE.md. v0 gets a prompt shaped for a hosted generator.

I used to export “implementation code.” That was the wrong promise. Agents write the code. The studio writes the brief they should not have to invent.

Why not paste the screenshot into ChatGPT?

You can paste a screenshot into ChatGPT, Claude, or Cursor chat. I do that for a one-off question. It fails as a project start for four reasons I hit while building HelpKoder.

First, the output is a conversation, not a document. You cannot copy a token table, a file tree, or a kickoff without hunting. Second, the model improvises a stack. One turn it is Next.js. The next it is Vite. Third, a single frame never shows auth, empty, error, or loading. A chat will invent those or skip them. Fourth, you lose the run. There is no share link, no second frame, no chat that rewrites one spec.

HelpKoder is the version with a saved run, agent-specific exports, and a follow-up that edits the document instead of adding another bubble. Details live in how a screenshot becomes a spec and what a screenshot hides.

How does a run work in the studio?

Upload or paste one to six frames. A Figma frame URL with node-id works if you add a personal access token — the Figma walkthrough is that path. The browser samples a palette from the pixels before the model answers, so you see copper, ink, and paper (or whatever is in the mock) immediately. Sign in with GitHub. Pick the agent you will actually paste into. The spec streams over SSE.

If the UI is a flow (login, then dashboard, then a settings sheet), add the extra frames. One spec, one tree, one kickoff. If the first pass is wrong, chat the spec: “Use Neon.” “React Native.” “Only colors in the screenshot.” Each turn rewrites the whole document so the agent never sees two competing briefs.

When the spec settles, copy the kickoff, export the agent file, and attach the screenshot in Cursor or Claude Code. The pixels stay canonical. The spec stays structural. The Cursor walkthrough is the shortest path if that is your agent.

What is the YES / KINDA / NOT REALLY verdict?

Every spec now opens with a one-shot verdict. YES means an agent can build a faithful first cut from this frame plus the spec. KINDA means the layout is clear but a state, API, or motion is missing. NOT REALLY means the screenshot is a vibe, a collage, or a marketing render that will not survive contact with a file tree.

I added this after watching people drop a Dribbble shot with fake data, glass, and no navigation, then blame the agent. The verdict is a gate, not a score. Read Can you vibe this screenshot? if you want the rules I use.

What did HelpKoder used to be?

The first public version talked like a 2019 PRD generator. Purple hex. “Comprehensive insights.” A blob of suggested code. That copy is gone because it trained the wrong habit: treat the model as a coder and the screenshot as a suggestion.

The studio is now a draftsman’s table. Warm paper, oxidized copper, sharp type. The product job is the same as the visual job: useful, not decorative. If you want the agent files in particular, AGENTS.md vs CLAUDE.md vs Cursor rules is the map. If you use Claude Code, copy a kickoff from a mock.

How much does it cost?

The paid plan is $10 a month. You sign in with GitHub, drop a screenshot, and stream. Privacy and terms are on the site. I am Audiencon. I ship this, I use it on my own mocks, and I write these notes when the product changes.

If you only remember one sentence: HelpKoder turns a UI screenshot into a spec a coding agent can run, then gets out of the way.