From Design Feedback to a Pull Request with Claude Code

Claude Code is good at front-end changes once it knows exactly what to change. With visual feedback, that is the hard part. "The button looks off" does not say which button, on which page, at which size, or what is wrong with it. This post walks through how Yocoolab gets that context to Claude Code, step by step, and what still needs a person.

The usual path from feedback to fix

Without a tool in between, a visual fix tends to go like this:

• 1.A reviewer spots a problem on the deployed app and takes a screenshot.
• 2.They write a ticket or a chat message describing it.
• 3.A developer opens the page, works out which element the screenshot shows, and finds it in the code.
• 4.The developer, or an agent they prompt, makes the change and opens a pull request.

Steps 2 and 3 are where context gets lost. The reviewer knows exactly what they mean; the words and the screenshot only carry part of it.

The same fix with Yocoolab and Claude Code

• 1.The reviewer opens the page with the Yocoolab extension, clicks the element and writes what should change, for example "Align the checkmarks with the text in the Pro card."
• 2.Yocoolab saves the comment with a screenshot, the element's CSS selector and DOM path, its attributes and computed styles, framework hints, and the page URL, title and viewport.
• 3.Someone with AI access clicks Send to Agent. The thread is queued for the connected agent and moves to In Progress on the board.
• 4.Claude Code, connected through the Yocoolab MCP server, reads the thread with get_thread_context, uses find_source_for_selection to look for the matching code in your checkout, and makes the change.
• 5.Claude Code opens a pull request in your repository and calls mark_thread_addressed, which moves the thread to In Review with a note and, if you pass them, the PR and preview links.
• 6.A person reviews the change and resolves the thread. The agent never resolves it.

What Claude Code receives

• •Screenshot of the page with the pin, so it can see what the reviewer saw
• •CSS selector and DOM path, for example .pricing-card.pro .feature-item
• •Attributes and computed styles: the padding, margins, font sizes and colors as rendered
• •Framework hints, such as React, Vue or Svelte
• •Page URL, title and viewport
• •The whole thread: the reviewer's comment and every reply

The extension does not read source files or line numbers from the page. Claude Code finds the source itself, in your own checkout, starting from the selector and styles. That is the step find_source_for_selection helps with.

Setting it up

• 1.Install the extension for Chrome, Edge or Firefox and sign in with Google, GitHub, or email and password.
• 2.Connect Claude Code with one command: npx -y @yocoolab/mcp-server@2 setup. The wizard detects Claude Code, Cursor, Cline, Roo Code and Windsurf and writes the config for each.
• 3.Add your Yocoolab token from the extension's settings, and restart Claude Code.
• 4.Pin feedback on any page: localhost, staging or production. Nothing is added to your app.

The full tool list is on the AI agents docs page.

What works well, and what needs review

In practice, the more self-contained and visual the change, the more reliable the result:

• •Style fixes (spacing, colors, typography) usually land cleanly.
• •Layout changes (flex, grid, responsive) work well when the element is well scoped.
• •Component behavior (click handlers, state) depends on how the code is structured.
• •Data and API logic is best treated as a draft for a developer to finish.

Where Claude Code cannot land the change, it can still reply in the thread with what it found, so a developer starts with the element, the screenshot and the analysis already in place. Always review the pull request before merging.

The point

Claude Code does not need a better prompt so much as the right input: the element someone actually pointed at, on the page as it really renders. That is what a Yocoolab pin carries. For more on this, see the guide to showing Claude Code the exact element.

Try Yocoolab with Claude Code, free in beta