skills.rest
CodeGeneration-2020
CodeGeneration-2020COMMUNITY
Explore all skills by this author →
GitHub

cgs.figma.visual

Compare live web pages against Figma design frames using pixelmatch.

1|3|Updated Feb 26, 2026
Search Tags:#figma#playwright#visual regression#design fidelity#ui comparison#pixelmatch
One-click install
npx skills add https://github.com/CodeGeneration-2020/cgs-team-claude-setup --skill cgs-figma-visual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cgs.figma.visual
Source: https://github.com/CodeGeneration-2020/cgs-team-claude-setup/tree/main/.claude/skills/cgs.figma.visual
Command: npx skills add https://github.com/CodeGeneration-2020/cgs-team-claude-setup --skill cgs-figma-visual

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pixelmatch, pngjs, and includes scripts (resource) components.

What problem does it solve?

This Skill automates the process of visually comparing your live application UI against the original Figma designs, ensuring pixel-perfect fidelity and catching design drift.

Core Features & Use Cases

  • Pixel-Perfect Comparison: Uses pixelmatch to compare screenshots of your application against Figma frames.
  • Automated Audits: Run visual regression tests as part of your CI/CD pipeline or development workflow.
  • Use Case: After implementing a new feature, use this Skill to verify that the developed UI exactly matches the approved Figma mockups for desktop, tablet, and mobile viewports.

Quick Start

Run a visual comparison for the 'user-profile' screen against its Figma design.

Frequently Asked Questions about cgs.figma.visual

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

FAQPage Schema
How do I perform visual regression testing between a live web page and a Figma design?▼

Run visual regression by using Playwright to capture live web page screenshots and pixelmatch to compare them against Figma design frames, generating a pixel-level UI discrepancy report.

What is pixel-perfect UI comparison and how does it catch design drift?▼

Pixel-perfect UI comparison matches live application pixels to Figma mockups to catch design drift, using pixelmatch to detect layout and styling discrepancies that deviate from the original design.

Can I use Playwright to automate Figma design fidelity checks across different viewports?▼

Yes, Playwright automates Figma design fidelity checks by capturing live UI screenshots across desktop, tablet, and mobile viewports for pixel-level comparison against the corresponding Figma frames.

Does the pixelmatch visual comparison support configurable thresholds for UI testing?▼

Yes, pixelmatch visual comparison supports configurable thresholds for UI testing, allowing you to adjust sensitivity for minor pixel variations or enforce strict pixel-perfect fidelity during automated audits.

How do I integrate Figma visual regression tests into a CI/CD pipeline?▼

Integrate Figma visual regression tests into a CI/CD pipeline by running scripts that use Playwright to capture live UI states and pixelmatch to verify they match the approved Figma designs before deployment.

Related Skills

Explore More Design & Creative Skills→
Eva813Eva813
2

figma-export

Export Figma frames as PNG images via a Python script.

Community
Intermediate
kobogithubkobogithub

uiux-pixelmatch

Compare PNG screenshots against design exports using pixelmatch for visual regression testing.

Community
Advanced
ThalfmanThalfman

webapp-testing

Automate local web application testing with Playwright scripts.

Community
Intermediate
GLaDO8GLaDO8

unified-web-design

Review web UI accessibility and visual design against WCAG 2.1 guidelines.

Community
Basic