skills.rest
serkan-ozal
serkan-ozalCOMMUNITY
Explore all skills by this author →
Website𝕏@serkan_ozalGitHub

visual-testing

Detect visual discrepancies between live pages and Figma design references.

7|1|Updated Feb 2, 2026
Search Tags:#screenshots#figma#visual-testing#visual-regression#ui-verification#responsive-testing#design-comparison
One-click install
npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill visual-testing-serkan-ozal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-testing
Source: https://github.com/serkan-ozal/browser-devtools-skills/tree/main/skills/visual-testing
Command: npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill visual-testing-serkan-ozal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA for UI elements is automated to detect visual regressions and ensure design parity across pages and devices.

Core Features & Use Cases

  • Screenshot Capture: Capture page visuals at multiple viewports and states.
  • Responsive Testing: Validate UI across mobile, tablet, and desktop breakpoints.
  • Figma Design Comparison: Compare live pages against Figma references to surface diffs.
  • DOM Inspection: Inspect HTML structure to locate rendering issues.

Quick Start

Navigate to a URL, capture a desktop screenshot, and compare it against the design in Figma.

Frequently Asked Questions about visual-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual regression testing for my UI?▼

Compare a live page to a Figma design reference by capturing a screenshot of the live URL and running a Figma-based comparison to surface visual diffs. This process highlights design parity issues across specified viewports.

Can I test responsive layouts across different breakpoints?▼

Yes, you can validate responsive layouts across mobile, tablet, and desktop breakpoints. The skill captures page visuals at multiple viewports to ensure design consistency and detect rendering issues across devices.

How do I capture screenshots at different viewport sizes?▼

Capture screenshots at different viewport sizes using the browser-devtools-cli to navigate to a URL and record page visuals. This allows you to test responsive states and document the UI appearance across various screen dimensions.

Does this tool inspect HTML structure to locate rendering issues?▼

Yes, DOM inspection is supported to inspect HTML structure and locate rendering issues. This helps identify the underlying markup causing visual discrepancies when comparing live pages against design references.

What is the best way to verify UI design parity after deployment?▼

Verify UI design parity by taking screenshots of the deployed live page and performing a Figma-based comparison. This detects visual regressions and ensures the live UI matches the intended design references.

Related Skills

Explore More Design & Creative Skills→
Eva813Eva813
2

figma-export

Export Figma frames as PNG images via a Python script.

Community
Intermediate
joi-fairsharejoi-fairshare
1

design-verify-ios

Validate iOS simulator screenshots against approved mockups to detect visual UI drift.

Community
Advanced
GoBeromsuGoBeromsu
2

browser-testing-with-devtools

Inspect DOM, console, network, and performance in real browsers via Chrome DevTools MCP.

Community
Intermediate
CodeGeneration-2020CodeGeneration-2020
1

cgs.figma.visual

Compare live web pages against Figma design frames using pixelmatch.

Community
Advanced