ui-fidelity-check

What problem does it solve?

Automates verification of UI fidelity by comparing Figma design artifacts with live or code-based front-end implementations, reducing manual visual inspection and catch regressions early.

Core Features & Use Cases

• Visual + Structural Comparison: Compares design screenshots and structured design context from Figma with implementation screenshots and DOM snapshots to identify layout, spacing, color, and typography differences.
• State Coverage & Reporting: Detects presence or absence of design states (default, loading, empty, error), computes coverage, assigns severity and confidence, and outputs a structured ui_fidelity_report.json for QA and acceptance.
• Fallback Modes & Robustness: Supports structural-only mode when pages are not accessible by reading code directories, includes retries and downgrade logic, and produces deterministic JSON artifacts for pipelines and traceability.
• Use Cases: Post-implementation QA, design handoff validation, regression checks for design systems, and automated acceptance gating.

Quick Start

Run the ui-fidelity-check skill with a Figma design link and optional page URL to generate a ui_fidelity_report.json detailing differences, severities, and overall fidelity.