skills.rest
Valyay
ValyayCOMMUNITY
Explore all skills by this author →
GitHub

figma-audit

Compare live UI screenshots against Figma references and report visual discrepancies.

Updated Mar 26, 2026
Search Tags:#audit#figma#design-review#visual-diff#design-implementation#ui-validation#browser-screenshot
One-click install
npx skills add https://github.com/Valyay/vibe-design-kit --skill figma-audit-valyay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-audit
Source: https://github.com/Valyay/vibe-design-kit/tree/main/skills/figma-audit
Command: npx skills add https://github.com/Valyay/vibe-design-kit --skill figma-audit-valyay

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Compares a live browser page or component against a Figma design and reports visual discrepancies in a structured, actionable format.

Core Features & Use Cases

  • Capture a Figma reference (fileKey and node) and a live URL or component story.
  • Generate a pixel-accurate visual audit covering layout, typography, color, and borders.
  • Produce a structured report with findings, severities, and suggested fixes for design-to-implementation gaps.
  • Use during design reviews or CI checks to ensure design fidelity.

Quick Start

Provide a Figma URL and a live page URL to generate a visual-audit report for the component.

Frequently Asked Questions about figma-audit

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

FAQPage Schema
How do I compare a live UI against a Figma design?▼

To compare a live UI against a Figma design, provide a Figma URL and a live page URL. The tool extracts the fileKey and nodeId, captures a browser screenshot, and audits layout, typography, and color discrepancies.

What is a visual design audit?▼

A visual design audit is a pixel-accurate comparison between a Figma reference and an implemented UI. It checks layout, typography, color, borders, and content states to identify design-to-implementation gaps and produce actionable fixes.

How do I run a UI validation check for my Figma components?▼

Run a UI validation check by providing a Figma URL and a live component story URL. The tool captures a Figma reference and a live screenshot at the same viewport to compare design context values like spacing and color.

Can I use a Figma visual diff report during design reviews?▼

Yes, you can use a Figma visual diff report during design reviews or CI checks. It produces a structured report with findings, severities, and suggested fixes to ensure design fidelity throughout the implementation process.

Does the visual audit work with different viewport sizes?▼

The visual audit captures the live screenshot at the same viewport as the Figma frame. By matching the viewport, it accurately compares design context values like spacing and typography against the implemented UI.

What specific elements are checked in a Figma design implementation review?▼

A Figma design implementation review checks layout, typography, color, borders, and content states. It compares these design context values against the implemented UI to generate a structured report with severity and actionable fixes.

Related Skills

Explore More Design & Creative Skills→
raphaelmansraphaelmans

implement-design

Translate Figma designs into UI code with token-driven styling and MCP server integration.

Community
Advanced
TheSoftwareHouseTheSoftwareHouse
282

ui-verification

Compare implemented interfaces against Figma designs and generate structured verification reports.

Official
Advanced
latitude-devlatitude-dev
4.6k

ci-watchdog

Monitor GitHub PR CI checks and automatically fix failures until all pass.

Official
Advanced
serkan-ozalserkan-ozal
7

visual-testing

Detect visual discrepancies between live pages and Figma design references.

Community
Intermediate