Let the agent check its own UI with Playwright MCP
Stop pasting screenshots. Add the Playwright MCP server so the agent can open your dev server, read the page structure and compare it with what you asked for.
Tools used
- Playwright MCPGives the agent a browser it can drive
- Claude CodeRuns the check and fixes the differences
Step navigator
An agent that opens your local app, inspects the result and reports evidence, instead of you taking screenshots.
Frontend developers using Claude Code, Cursor or another MCP client.
Before you start
A developer on r/ClaudeAI said they were "losing brain cells" taking screenshots of their UI for Claude Code. The replies pointed to one fix: add a Playwright MCP server so the agent can look for itself. Anthropic's guide recommends giving the agent this kind of visual check.
Step-by-step instructions
Add the Playwright MCP server
In Claude Code: claude mcp add playwright npx @playwright/mcp@latest. In Cursor: Settings → MCP → Add new MCP Server with npx @playwright/mcp@latest. One user's summary: "Just add puppeteer or playwright MCP servers to your Claude config. It's a few lines of JSON."
claude mcp add playwright npx @playwright/mcp@latest
Start your dev server yourself
Run the app locally (the poster's example is localhost:3000) so the agent has something to open.
Ask it to open the page and report what it finds
Playwright MCP works from the page's accessibility tree rather than pixels, returning roles and text the model can act on. The same user had Claude try both tools and "it preferred playwright due to ability to snapshot DOM"; others in the thread use it to read console errors.
Open http://localhost:3000/settings, check the form matches the spec in SPEC.md, report any console errors, and list the differences.
Give it a visual target and let it iterate
Anthropic's example for UI work: "[paste screenshot] implement this design. take a screenshot of the result and compare it to the original. list differences and fix them."
Why this works
A check it can run closes the loop without you.
Review the evidence, then look yourself
Ask for evidence (snapshots, console output) rather than a claim that it looks right, then open the page yourself before shipping. Anthropic: "Have Claude show evidence rather than asserting success."
End of guide · Reviewed Oct 26, 2026
Pro tips2
- Give stated acceptance criteria rather than "does it look right".
- Screenshots fill the context quickly; use page snapshots for routine checks.
Common mistakes2
- Letting the agent call a UI change done without opening the page.
- Taking a screenshot after every tiny edit.
FAQ2
Does it need a vision model?
Puppeteer or Playwright?
Related field guides.
CodingRun parallel Claude Code agents in git worktrees without merge hell
Give each agent its own worktree, scope tasks so their files do not overlap, merge one stream at a time, and rebase the rest on the new main.
CodingMake a coding agent write the failing tests first, then implement
Split the work into separate prompts: tests only, confirm they fail for the right reason, commit, then implement without touching the tests.
CodingSet up Claude Code hooks for formatting, tests and protected files
Add PostToolUse hooks that format and test after edits, a PreToolUse hook that blocks protected files, and a notification for long runs.