Eyes - Visual Feedback Loop

Use Playwright MCP to capture screenshots and collaborate with users on visual refinements. Always confirm before making changes.

Workflow

Capture current state — Use Playwright MCP browser_take_screenshot to capture the current page or element to better understand the users questions or requirements.
Gather specific feedback — Ask what needs adjustment: "Looking at this screenshot, what specifically would you like changed?"
Propose changes clearly — Describe intended modifications with specifics:
- Bad: "I'll fix the spacing"
- Good: "I'll increase the gap between cards from 16px to 24px and add 32px padding to the container"
Confirm before implementing — Use AskUserQuestion to get explicit approval. Never modify code without confirmation.
Verify with comparison — After changes, capture a new screenshot to confirm the fix has been made.

Use these Playwright MCP tools for the visual feedback loop:

browser_navigate — Navigate to a URL
browser_take_screenshot — Take a screenshot of the current page
browser_snapshot — Capture accessibility snapshot of the current page (useful for understanding structure)
browser_click — Perform click on a web page
browser_hover — Hover over element on page
browser_wait_for — Wait for text appearance/disappearance or specified duration
browser_console_messages — Returns all console messages (useful for debugging)
browser_resize — Resize the browser window (useful for responsive testing)
browser_install — Install the browser specified in the config

When implementing visual changes, load these skills for guidance:

web:css — CSS architecture, spacing, units, and selector patterns
web:web-design — Visual hierarchy, typography, color, and component polish

After implementing changes: