skills.rest
codeforamerica
codeforamericaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-verify

Compare live app screenshots against Figma designs and generate markdown gap reports.

10|1|Updated Nov 7, 2025
Search Tags:#figma#playwright#ui-testing#screenshot#visual-qa#design-verification#gap-report
One-click install
npx skills add https://github.com/codeforamerica/sebt-self-service-portal --skill figma-verify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-verify
Source: https://github.com/codeforamerica/sebt-self-service-portal/tree/main/.claude/skills/figma-verify
Command: npx skills add https://github.com/codeforamerica/sebt-self-service-portal --skill figma-verify

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Compare a running app's screens against Figma designs and generate a structured gap report to identify visual discrepancies.

Core Features & Use Cases

  • Capture screenshots from both live app and Figma prototype to enable side-by-side comparison.
  • Generate a markdown gap report that highlights layout, typography, color, and asset discrepancies.
  • Save output and inline MCP-rendered images for analysis; supports multiple screen mappings and end-to-end verification flows.

Quick Start

Provide the Figma file key, App base URL, and at least one screen mapping to begin the verification flow.

Frequently Asked Questions about figma-verify

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

FAQPage Schema
How do I automate visual QA to compare a live app with Figma designs?▼

You can automate visual QA by providing a Figma file key, an app base URL, and screen mappings. The tool captures screenshots via Playwright, compares them against the Figma designs, and outputs a structured markdown gap report highlighting layout, typography, and color discrepancies.

Can I use Playwright to capture screenshots for design verification against Figma?▼

Yes, Playwright captures live app and Figma prototype screenshots for side-by-side visual comparison. This enables automated design verification across mobile and web flows to detect layout, typography, color, and asset discrepancies.

What do I need to start comparing my running app against Figma prototypes?▼

You need a Figma file key, an app base URL, and at least one screen mapping to start the design verification flow. These inputs enable the tool to capture and compare screenshots for visual QA.

What does a Figma design verification gap report include?▼

A Figma design verification gap report is a markdown file highlighting layout, typography, color, and asset discrepancies. It includes inline images and structured analysis for each compared screen mapping.

Does automated visual QA support multiple screen mappings for web and mobile flows?▼

Automated visual QA supports multiple screen mappings for end-to-end verification across mobile and web flows. This allows you to compare various app screens against corresponding Figma designs and produce a structured gap report.

Related Skills

Explore More Design & Creative Skills→
sadie100sadie100

cafe24-figma-validate

Validate Cafe24 page components against Figma designs and auto-fix mismatches.

Community
Advanced
NONEitnonameNONEitnoname

brand-guidelines

Apply official brand guidelines for typography, color, and layout.

Community
Basic
magic3007magic3007
10

webapp-testing

Automate end-to-end testing of local web applications with Playwright.

Community
Intermediate
i3ringiti3ringit
3

design-implementation-reviewer

Compare live UI states against Figma design specs and generate structured feedback.

Community
Intermediate