Can I compare a live website directly to a Figma design?

Yes, the skill provides a specific capability to compare page content with Figma designs to perform visual similarity analysis and identify design deviations.

How does this skill handle responsive design testing?

The skill includes built-in viewport presets for Mobile (S/M/L), Tablet, and Desktop, allowing Claude to automatically resize the browser and verify layout behavior at different breakpoints.

Does this skill support document export?

Yes, the skill includes a feature to save the current page state as a PDF, which is useful for documentation, compliance, and sharing visual states with team members.

What is the benefit of using annotated screenshots?

Annotated screenshots overlay numbered labels on interactive elements that map to ARIA references, allowing Claude to precisely identify and interact with specific UI components.

Should I use screenshots for understanding page structure?

It is recommended to use the ARIA snapshot tool first to understand the DOM structure and element references, then use the screenshot tool for visual and aesthetic verification.

Visual Testing & UI Verification

Name: Visual Testing & UI Verification
Author: serkan-ozal

byserkan-ozal

•

보안 및 테스팅

Automates visual regression testing and UI verification through screenshots, responsive viewport analysis, and design-to-code comparisons.

The Visual Testing skill empowers Claude to perform comprehensive visual audits and UI validation by capturing high-resolution screenshots, generating annotated overlays, and inspecting DOM structures. It enables automated verification of responsive design across multiple device presets, facilitates direct comparisons between live web pages and Figma designs, and helps developers identify styling regressions or layout inconsistencies. By combining ARIA snapshots with visual verification, it ensures that web interfaces are both accessible and visually accurate across all platforms.

주요 기능

01Automated visual comparison against Figma design specifications

02Responsive design testing with built-in mobile, tablet, and desktop presets

03High-quality PDF generation for UI documentation and reporting

04Deep DOM and CSS inspection for styling and layout verification

05Annotated screenshot capture with numbered ARIA reference mapping

064 GitHub stars

사용 사례

01Identifying visual regressions and styling bugs after CSS refactors or dependency updates

02Comparing implemented frontend components against original Figma designs to detect deviations

03Verifying UI appearance and layout consistency across various device breakpoints

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add serkan-ozal/browser-devtools-claude visual-testing

For use in Claude.ai and ChatGPT

Download Skill