skills.rest
joi-fairshare
joi-fairshareCOMMUNITY
Explore all skills by this author →
GitHub

design-verify-web

Compares live web UI screenshots with mockup baselines using Playwright and pixel-diff analysis.

1|2|Updated Mar 19, 2026
Search Tags:#mcp#playwright#screenshot#web-ui#mockup#pixel-diff#design-verification
One-click install
npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-verify-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-verify-web
Source: https://github.com/joi-fairshare/agentic-workflow/tree/main/skills/design-verify-web
Command: npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-verify-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents unnoticed visual drift by comparing live web implementations to approved mockups, catching layout, typography, and color discrepancies before release approvals.

Core Features & Use Cases

  • Automated Playwright capture: grabs mobile, tablet, and desktop screenshots via the browser lock workflow to keep verification consistent.
  • Mockup-aware diffing: diff results are generated against stored mockup baselines with pixel percentages, diff images, and prioritized remediation tips.
  • Use Case: Run before a UI handoff to prove the implementation matches the design language and to surface specific fixes in case of regressions.

Quick Start

Use design-verify-web to compare the live dashboard implementation with the approved mockup baseline.

Frequently Asked Questions about design-verify-web

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

FAQPage Schema
How do I compare a live web UI to a mockup baseline for visual regression?▼

You can compare a live web UI to a mockup baseline by orchestrating Playwright captures and pixel diff analysis to report layout and color discrepancies with remediation guidance.

Can I capture mobile, tablet, and desktop screenshots for design verification?▼

Yes, automated Playwright capture grabs mobile, tablet, and desktop screenshots via a browser lock workflow to keep design verification consistent across screen sizes.

Do I need stored mockup PNGs to run a pixel diff analysis?▼

Yes, pixel diff analysis requires stored mockup baseline PNGs, Playwright tooling, and the compare_design MCP to generate pixel percentages and diff images.

What is the best way to prevent visual layout drift before a UI handoff?▼

The best way to prevent visual layout drift before a UI handoff is running mockup-aware pixel diffing to prove the implementation matches the design language and surface specific fixes.

How does pixel diff analysis report typography and color discrepancies?▼

Pixel diff analysis reports typography and color discrepancies by generating diff images against stored mockup baselines, calculating pixel percentages, and providing prioritized remediation tips.

Does Playwright work with the compare_design MCP for catching UI regressions?▼

Yes, Playwright works with the compare_design MCP by capturing live web screenshots and comparing them against mockup baselines to catch layout, typography, and color regressions before release.

Related Skills

Explore More Design & Creative Skills→
FunnelEnvyFunnelEnvy
1

experiment-mockup

Orchestrate browser-based mockups from hypotheses via Chrome DevTools MCP, Playwright MCP, or static HTML extraction.

Official
Advanced
dsifrydsifry
379

visual-review

Capture web page and UI screenshots with Playwright for visual inspection.

Community
Intermediate
KhoiwallKhoiwall

playwright

Automate browser-based testing and automation tasks for web applications.

Community
Intermediate
r3dlexr3dlex
2

visual-verdict

Compare UI screenshots against reference images to detect layout, style, and content discrepancies.

Community
Intermediate