Let Claude see the page before it fixes it
Claude fixed the button five times and never looked. This guide gives it a real browser through Playwright MCP.
The fix
Playwright MCP is Microsoft's browser server for AI agents. It needs Node.js 18 or newer. Run this once. By default the server is yours only, in this project; add --scope project to share it with your team through .mcp.json.
claude mcp add playwright -- npx @playwright/mcp@latestMake it look first
Tell Claude to look, fix, then look again. It uses browser_navigate to open the page, browser_snapshot to read it, and browser_take_screenshot to capture it.
Open http://localhost:3000 and take a screenshot.
Find the Save button and tell me what covers it.
Fix it, reload, take a second screenshot and
show me what changed.Check it worked
List the servers from the terminal, or open /mcp inside Claude Code to see the status. Then ask for a screenshot of any page.
claude mcp list
/mcpPro tip: snapshot vs screenshot
A snapshot is text built from the page's accessibility tree. The README calls it better than a screenshot, and says you can't perform actions based on a screenshot. Use the screenshot to judge how it looks, the snapshot to click things.
Pro tip: test it like a phone
Emulate a phone, and read what the browser logged. Add --device when you register the server (already added? run claude mcp remove playwright first), then ask Claude to check the console and the failed requests (browser_console_messages, browser_network_requests).
claude mcp add playwright -- npx @playwright/mcp@latest \
--device "iPhone 15"Common mistake
Stopping at the code change. The loop is look, fix, look again. If Claude says it is fixed, ask for the second screenshot.
Official docs
One fix of twenty: the whole Claude Code survival kit.
Follow @whyshouldaicareA new disaster and its fix every day. Comment the word under a reel to get its guide.