DarnlyClaude Code works in your project's files. It can't see the page in your browser. So when something looks wrong, your job is to carry what you see over to it. The better you carry it, the fewer rounds of "can you tell me more?" you get.
The manual way: a Claude Code screenshot, step by step
- Take a screenshot of the broken part. On a Mac, Cmd+Shift+4 lets you drag a box. On Windows, Win+Shift+S. Keep enough around it that the agent can tell where on the page it is.
- Mark the broken bit. If the picture has several buttons or cards, draw a circle or box on the one that's wrong. The Mac screenshot preview and the Windows Snipping Tool both let you draw.
- Get it into Claude Code. Claude Code's docs list three ways: drag the image into the Claude Code window, copy it and paste with Ctrl+V (Alt+V on Windows and WSL), or type the path to the image file in your message.
- Write one short message. What you did, what happened, what you expected. Add the page address, like
localhost:3000/settings. - Paste any red error text. If the page broke after a click, open the browser console and copy the red lines too. See how to copy console errors for your AI agent.
A good message looks like this:
[screenshot]
On localhost:3000/settings, I changed my name and clicked Save.
Nothing happened and the old name came back after a reload.
Expected: the new name is saved and a "Saved" message shows.
This is only about the settings page.Why each part matters
The marked picture tells Claude Code which element you mean. A plain screenshot of a whole page is fine for "the logo is huge", but for "this button is grey" the agent has to guess which button.
The page address narrows the search. A route like /settings usually maps to a file or folder with a similar name.
"Expected" is the most important line. "It's broken" makes the agent invent a goal. "It should save and show Saved" gives it one to aim at.
The scope ("only here" or "everywhere") stops the agent asking, or worse, changing a shared style that breaks other pages. There's a whole guide on why your agent asks if a change is local or global.
Need your browser, screen size and dark mode setting for the report? What browser am I using? copies them in one click. Got a screen recording of the bug instead? Video to GIF turns it into something you can attach.
The one-key way with Darnly
The manual way works. It's also six steps and an app switch, every time. Darnly is a free Chrome extension that does the carrying for you:
- Press Option+Shift+B on a Mac (Windows is coming soon).
- Click the broken part. A red box follows your cursor. The arrow keys make it bigger or smaller, W picks the whole page.
- Type what you expected and press Enter.
Darnly saves a report into .darnly/inbox/ in your project: a screenshot with the broken part boxed in red, the element's selector, text and styles, the page address, the steps you took to get there, and console errors and failed requests from the last 60 seconds. On localhost it can sometimes name the component and file that drew the element. Passwords, tokens and keys are replaced with [hidden] first.
The first time, link your project folder and click Set up this project. That adds a short AGENTS.md note, a skill and a hook, so Claude Code knows where to look and mentions new bugs when you start a session or send your next message. After that you type /darnly, or say yes when Claude Code offers. It fixes each one, writes a Fixed: line saying what it changed, and moves the report to .darnly/done/. The Darnly panel then says "1 bug fixed. Take a look."
Code in the cloud, or on another computer? Add the Darnly MCP server to Claude Code once with claude mcp add --transport http --scope user darnly https://api.darnly.dev/mcp, and it reads your bugs from the Darnly cloud inbox. Set up Darnly in Claude Code, or paste our setup prompt and let Claude Code do it.
Which one should you use?
To be honest about it: in our own test on 8 planted bugs in a real app, a pasted screenshot plus one sentence got every bug fixed, and so did Darnly. Darnly cost more per bug, because of its extra steps. So a screenshot is not the wrong way. Darnly is for when you don't want to leave the page, when the bug is in the console and not on screen, or when you'd rather collect five bugs and fix them in one go. The full numbers are in Darnly vs a plain screenshot.