skills.rest
Nikhil-Chopra-7
Nikhil-Chopra-7COMMUNITY
Explore all skills by this author →
GitHub

design-qa

Compare live frontend implementations against Figma designs and generate severity-scored mismatch reports.

1|Updated Apr 25, 2026
Search Tags:#design#frontend#qa#figma#overlay#visual-diff
One-click install
npx skills add https://github.com/Nikhil-Chopra-7/claude-frontend-skills --skill design-qa-nikhil-chopra-7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-qa
Source: https://github.com/Nikhil-Chopra-7/claude-frontend-skills/tree/main/design-qa
Command: npx skills add https://github.com/Nikhil-Chopra-7/claude-frontend-skills --skill design-qa-nikhil-chopra-7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often ship visuals that diverge from the Figma design, resulting in time-consuming pixel QA. This skill automates end-to-end visual QA by comparing live implementations against Figma specs, surfacing typographic, color, spacing, layout, and content mismatches.

Core Features & Use Cases

  • Figma MCP integration to retrieve design context and specs for each task
  • Chrome DevTools MCP-based analysis and overlay-based visual comparison
  • Automated mismatch reporting with clear severity labels (BLOCKER, WARNING, INFO)
  • Supports both desktop (dweb) and mobile (mweb) QA rounds to ensure responsive fidelity

Quick Start

Provide the Figma design reference and the localhost URL, then run the QA workflow to generate a report.

Frequently Asked Questions about design-qa

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

FAQPage Schema
How do I automate visual QA to compare live frontend code against Figma designs?▼

Automated visual QA compares live frontend implementations against Figma designs by extracting design specs via Figma MCP and capturing live DOM details to surface typographic, color, spacing, and layout mismatches.

What is the best way to perform pixel-perfect QA across desktop and mobile breakpoints?▼

Pixel-perfect QA across desktop and mobile breakpoints is performed by capturing implementation details from the live DOM and comparing them against Figma specs to generate a structured, severity-scored report.

How do I generate a severity-scored report for frontend visual diffs?▼

Generating a severity-scored report for frontend visual diffs involves overlay-based visual comparison and Chrome DevTools MCP analysis to label mismatches as BLOCKER, WARNING, or INFO.

Do I need the Figma MCP to run a visual comparison on my localhost URL?▼

Figma MCP is used to retrieve design context and specs, but you can also use provided design spec files to run the visual comparison workflow on your localhost URL.

Can I use this pixel-perfect QA workflow without any external dependencies?▼

The pixel-perfect QA workflow relies on Figma MCP integration and Chrome DevTools MCP-based analysis to compare live implementations and identify visual mismatches.

Why does my frontend implementation diverge from the Figma design specs?▼

Frontend implementations diverge from Figma design specs due to typographic, color, spacing, layout, and content mismatches that occur during manual code generation and translation.

Related Skills

Explore More Design & Creative Skills→
gooftroopgooftroop

figma-implement-design

Translate Figma designs into production-ready code with 1:1 visual fidelity.

Community
Advanced
oliver-kriskaoliver-kriska
517

phx:triage

Interactively triage code review findings by approving, skipping, or downgrading priorities.

Community
Intermediate
vtgiang-dotcomvtgiang-dotcom
3

browser-testing-with-devtools

Capture DOM state, console output, network activity, and performance data via Chrome DevTools MCP.

Community
Advanced
winstonkoh87winstonkoh87
558

visual-verify-ui

Capture multi-viewport screenshots and compare DOM states for visual regression testing.

Community
Intermediate