The Gap

🏷️#claude-code has strong design skills — /frontend-design for creative marketing work, /interface-design for dashboards and apps. Both produce excellent code. But Claude can't see what it rendered. It writes CSS, hopes the layout is right, and moves on. The human catches visual issues, sends corrections, and the cycle repeats.

🏷️#playwright MCP closes this loop. Claude builds → navigates to localhost → takes a screenshot → evaluates the result → iterates. Visual feedback in the build cycle, not after it.

The Workflow

Build → Navigate → Verify → Iterate

• Write the component or page code
• browser_navigate to http://localhost:3000 (or whatever port the dev server runs on)
• browser_snapshot to read the accessibility tree — verify structure, hierarchy, content
• browser_screenshot to see the actual rendered output — verify layout, color, spacing, typography
• browser_click / browser_type to test interactive states — hover, focus, form fills
• Iterate on the code based on what Claude actually sees

What This Enables

• Catch layout issues before the human does — broken grids, overflow, missing responsive behavior
• Verify design intent — does the implemented color actually feel warm? Is the type hierarchy readable?
• Test interaction states — hover effects, focus rings, disabled states, loading skeletons
• Screenshot-driven iteration — Claude can compare before/after screenshots across changes
• Accessibility verification — the snapshot tool returns the accessibility tree, surfacing missing labels, broken ARIA, and hierarchy issues

Which Tools Matter

Tools like browser_evaluate and browser_run_code are blocked — they add attack surface with no design benefit. See 📝Playwright MCP Localhost Containment for the full 🏷️#security model.

Pairing with Design Skills

With /frontend-design

Creative marketing work — landing pages, hero sections, editorial layouts. Playwright lets Claude verify that the bold aesthetic direction actually landed. Did the asymmetric grid work? Does the gradient mesh render correctly? Is the staggered animation timing right?

With /interface-design

Dashboard and app work — the /critique and /audit sub-commands check code against the design system. Playwright adds visual confirmation. The squint test from the interface-design skill ("blur your eyes — can you still perceive hierarchy?") becomes something Claude can actually perform via screenshot.

With /interface-design:critique

After building, run critique → take a screenshot → evaluate whether the critique findings are visible in the rendered output. Closes the gap between code review and visual review.

Prerequisites

• Playwright MCP installed and configured with --isolated flag
• Localhost containment hook active — see 📝Playwright MCP Localhost Containment
• A running dev server on localhost (Next.js, Vite, etc.)

Contexts

🏷️#claude-code 🏷️#playwright 🏷️#frontend-design 🏷️#agentic 🏷️#mcp