Guide · Claude Code
Claude Code writes good front-end code, but on visual work it can only change what it can identify. You can already paste a screenshot into Claude Code. What a screenshot cannot tell it is which element in your code you mean. This guide shows how to give it both: the picture and the element.
Ask for "a less generic pricing card" in a chat and Claude Code has to guess which card, at which screen size, and what is wrong with it. It fills the gaps with a sensible default, which is how AI-built UI ends up looking like all the other AI-built UI.
Claude Code can read images: you can drag a screenshot into the session, paste it with Ctrl+V, or give it a file path. A screenshot shows what the page looks like, but not which component renders it or which styles apply.
Describing the element ("the second heading in the hero, not the nav") costs turns, and Claude Code still has to search your code to find it.
Pin a comment on the element in your running app, on localhost, a preview deployment or production. The comment keeps a screenshot, the CSS selector, DOM path, attributes and computed styles, framework hints, and the page URL and viewport.
Click Send to Agent. Claude Code, connected to Yocoolab over MCP, reads the thread with get_thread_context: the screenshot, the element, the repository and the change. Then it finds the matching code in your checkout.
Claude Code makes the change, opens a pull request and moves the thread to In Review. You check the result on the real page, then resolve the thread or reply with what still looks off.
AI-made UI looks generic when nobody made a specific decision and the model averaged one. When a person points at the exact element on the real page and says what is wrong with it, Claude Code is acting on a decision, not filling in a guess.
Run claude mcp add --transport http --scope user yocoolab https://app.yocoolab.com/mcp, then type /mcp in Claude Code, choose yocoolab and Authenticate. Sign in to Yocoolab in the browser and click Allow. There is no token to paste.
Open the page in Chrome, Edge or Firefox with the Yocoolab extension, click the exact element and say in a sentence what should change.
Claude Code gets the screenshot, selector, DOM path, computed styles and the whole thread, and finds the code in your repository. With an always-on agent running, it picks the thread up by itself; otherwise, ask Claude Code to work on your Yocoolab threads.
Claude Code opens a PR and moves the thread to In Review. Check the change on the page, then resolve it.
If the change is in a file you already have open, typing the instruction to Claude Code directly is faster. This earns its keep when the person who sees the problem is not the person in the terminal, or when "which element?" keeps coming up.
Facts about Claude Code on this page come from Claude Code docs: work with images, checked October 2026.
Yes. Claude Code can read images: drag one into the session, paste it with Ctrl+V, or give it a file path. A screenshot shows what the page looks like; it does not say which element or component you mean. The selector and DOM path that Yocoolab captures add that.
Install the Yocoolab extension, connect Claude Code with claude mcp add --transport http --scope user yocoolab https://app.yocoolab.com/mcp and sign in to Yocoolab when it asks, then pin a comment on the element and click Send to Agent. Claude Code reads the screenshot, selector, DOM path, computed styles and the discussion over MCP.
No. Claude Code still reads your code, writes the change and opens the pull request. Yocoolab is how the element, the screenshot and the discussion get to it.
A person. Claude Code moves the thread to In Review; it never resolves it.
Pin a comment on the element in your live app; your coding agent gets the screenshot, selector and discussion, and opens the PR for a person to review. Free for your whole team, in beta.