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.
Playwright MCP Tools
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
Related Skills
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
Before/After Comparison
After implementing changes:
-
Take a new screenshot of the same element/page
-
Present both screenshots side by side
-
Ask: "Does this match what you were looking for?"
-
If not, repeat the feedback loop