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

cgs.qa.visual

Analyze rendered UI screenshots against Figma frames to detail visual discrepancies.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill pinpoints and describes the exact visual discrepancies between a Figma design and the actual rendered UI, going beyond simple pixel difference percentages.

Core Features & Use Cases

  • Detailed Mismatch Identification: Uses LLM vision to describe what is wrong (colors, spacing, typography, layout).
  • Fidelity Auditing: Ensures the implemented UI precisely matches design specifications.
  • Root Cause Analysis: Helps identify likely causes for visual bugs.
  • Use Case: After a visual regression test flags a 5% difference, use this Skill to understand if it's a critical layout shift or a minor color shade variation.

Quick Start

Analyze visual differences for the current feature, focusing on screens with more than a 2% pixel difference.

Frequently Asked Questions about cgs.qa.visual

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

FAQPage Schema
How do I identify specific UI mismatches between Figma designs and rendered screenshots?▼

To identify specific UI mismatches, this Skill uses LLM vision to compare rendered screenshots against exported Figma frames, detailing discrepancies in layout, spacing, typography, colors, and components beyond a specified pixel difference threshold.

What is visual regression analysis and how does LLM vision improve it?▼

Visual regression analysis detects UI differences between design and implementation. LLM vision improves it by describing exactly what is wrong, such as color or spacing shifts, rather than just reporting a simple pixel difference percentage.

Do I need a Figma API token to run visual fidelity auditing?▼

Yes, you need a FIGMA_TOKEN for API access to run visual fidelity auditing. This token allows the Skill to automatically fetch exported Figma frames for comparison against your rendered UI screenshots.

Can I analyze visual differences only on screens with more than a 2% pixel difference?▼

Yes, you can analyze visual differences by specifying a threshold. The Skill focuses deep LLM-powered visual analysis on UI elements that diverge from Figma designs beyond your specified percentage, such as 2%.

Why does the visual analysis automatically run the Figma export process?▼

The visual analysis automatically runs the Figma export process because it requires exported Figma frames to compare against rendered screenshots. If prior execution of the Figma export is not detected, it triggers automatically to ensure accurate visual regression analysis.

Related Skills

Explore More Software Engineering Skills→
Eva813Eva813
2

figma-export

Export Figma frames as PNG images via a Python script.

Community
Intermediate
AndrejKiriAndrejKiri

design-system-extraction-cowork-wrapup

Document design system friction points and generate side-by-side HTML comparisons.

Community
Intermediate
manushi4manushi4
11

qa-smoke-test

Automate QA smoke tests for desktop and web apps using ScreenHand tools.

Community
Intermediate
praburajasekaranpraburajasekaran

design-implementation-reviewer

Compare live UI components with Figma designs and report visual discrepancies.

Community
Advanced