How does the visual verification process work?

After making a UI change, Claude captures a new screenshot of the affected area and presents it alongside the original state, asking for your explicit confirmation that the fix is correct.

Does Claude modify my CSS automatically with this skill?

No. The Eyes skill workflow strictly requires Claude to propose specific changes and use the AskUserQuestion tool to get your approval before implementation.

Does this skill require Playwright?

Yes, this skill relies on Playwright MCP tools to navigate web pages, take screenshots, and interact with browser elements.

What is the Eyes skill for Claude Code?

It is a specialized capability that allows Claude to use Playwright MCP to capture screenshots of your web application, helping the AI understand and fix visual or layout issues through a structured feedback process.

Can I use this for responsive design testing?

Absolutely. The skill includes browser resize tools, allowing Claude to capture screenshots at different viewport sizes to debug mobile and tablet layouts.

Visual Feedback Loop (Eyes)

Name: Visual Feedback Loop (Eyes)
Author: mintuz

bymintuz

•

디자인 도구

Captures website screenshots using Playwright MCP to facilitate collaborative UI debugging and visual refinements with real-time verification.

The Eyes skill establishes a structured visual feedback loop between Claude and developers by leveraging Playwright MCP tools. It enables Claude to see the application's current state, capture specific element screenshots, and gather precise feedback on UI elements that are difficult to describe through text alone. By following a rigorous workflow of capture, proposal, confirmation, and verification, it ensures that frontend changes—such as CSS adjustments or layout fixes—align perfectly with user expectations before code is modified.

주요 기능

01Responsive testing via browser resizing capabilities

02Structured 'Capture-Fix-Verify' workflow for UI refinements

03Automated screenshot capture using Playwright MCP integration

04Side-by-side visual comparison for before-and-after validation

05Accessibility snapshot analysis to understand DOM structure

0614 GitHub stars

사용 사례

01Debugging complex CSS layout issues and responsive design breakpoints

02Collaborative UI polish sessions requiring precise visual feedback

03Verifying frontend bug fixes through automated visual regression checks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mintuz/claude-plugins eyes

For use in Claude.ai and ChatGPT

Download Skill