Can I compare more than two URLs at once?

Yes, you can provide a list of multiple URLs, and the skill will capture and compare all of them in a single session.

Is the comparison based on code or visuals?

The comparison is primarily visual. While it uses browser automation to get there, the analysis is performed by Claude looking at the resulting screenshots to identify layout and design shifts.

How does the Page-Compare skill work?

It uses Playwright-CLI to open a browser, navigate to your specified URLs, take full-page screenshots, and then employs Claude's vision capabilities to analyze and describe the differences.

Do I need to install additional tools?

Yes, this skill requires playwright-cli to be installed and accessible via the Bash tool within your Claude Code environment.

Does it capture the entire webpage or just the screen?

The skill uses the --full-page flag by default, ensuring the entire length of the page is captured for comparison, not just the visible viewport.

Visual Page Comparison

Name: Visual Page Comparison
Author: hmu332233

byhmu332233

0•

브라우저 자동화

Automates full-page screenshots of multiple URLs and performs an AI-powered visual comparison to detect design and layout discrepancies.

Visual Page Comparison is a specialized Claude Code skill designed for developers and designers who need to verify visual consistency across different web environments. It leverages the Playwright-CLI to capture high-quality, full-page screenshots of multiple URLs and then utilizes Claude's multimodal capabilities to analyze and report on differences in layout, styling, and content. This skill is particularly useful for visual regression testing, cross-environment validation such as staging versus production, and ensuring design fidelity across various page versions.

주요 기능

01Multimodal comparison that identifies meaningful changes beyond pixel-matching

02AI-driven visual analysis of layout, color schemes, and typography

030 GitHub stars

04Customizable page capture workflow with browser automation

05Detailed reporting on visual discrepancies between web pages

06Automated multi-URL full-page screenshot capture using Playwright-CLI

사용 사례

01Visual regression testing during site migrations or framework updates

02Comparing staging and production environments to ensure visual parity

03Analyzing design differences between multiple UI iterations or templates

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hmu332233/playground.playwright-cli page-compare

For use in Claude.ai and ChatGPT

Download Skill