From verify-figma-design
Validate that a deployed website matches its source Figma design. Use this skill during QA verification, regression testing, or design compliance audits. Use when asked to verify, diff, or compare a deployed website against a Figma design, when visual fidelity issues are suspected, or when the user says "verify", "check against Figma", "visual diff", or "does this match the design". Requires the deployed website URL and the Figma MCP server connection.
How this skill is triggered — by the user, by Claude, or both
Slash command
/verify-figma-design:verify-figma-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Validates that a rendered UI matches its source Figma design by performing a structured visual comparison, font audit, token check, and component mapping verification.
Validates that a rendered UI matches its source Figma design by performing a structured visual comparison, font audit, token check, and component mapping verification.
https://mcp.figma.com/mcp)playwright-cli skill is used for browser automation and screenshotsFind the source Figma URL(s) for the implemented feature. Check in this order:
design-context.md in the current feature directory
(specs/NNN-feature-name/design-context.md)tasks.md — the task that was just implemented may carry a Figma URLspec.md — the Design Context reference sectionIf no Figma URL can be found, ask the user to provide one.
Extract fileKey and nodeId from the URL structure. Figma URLs typically look like:
figma.com/design/:fileKey/:fileName?node-id=123-456 or
figma.com/design/:fileKey/:fileName?node-id=123%3A456
In both cases, treat the normalized nodeId value as 123:456.
Obtain the deployed website URL. Check in this order:
Determine the target breakpoints. Check in this order:
For each breakpoint, take a screenshot of the deployed website using
playwright-cli. Follow this sequence:
playwright-cli open https://example.com/target-page
playwright-cli resize 1440 900 # set viewport width for the breakpoint
playwright-cli screenshot --filename=desktop-1440.png # full page
# or capture a specific element only:
playwright-cli screenshot e5 --filename=desktop-hero.png
Repeat with the appropriate width for each breakpoint (e.g. resize 768 1024
for tablet, resize 375 812 for mobile). Save each screenshot with a
descriptive filename that includes the breakpoint width.
Keep all captured screenshots accessible for comparison in Step 5.
get_screenshot with the source fileKey and nodeId to get
a visual reference of the original Figma design.get_screenshot for each variant that
corresponds to the breakpoints captured in Step 2.get_design_context with the same parameters to get the
structured design data (layout, components, tokens, constraints).get_variable_defs to get the design token definitions used
in the source frames.Extract all font families referenced in the get_design_context
response. For each font family:
public/fonts/, src/assets/fonts/,
static/fonts/, or as defined in the project's CSS/config.@font-face declarations) or
via a font loading service (e.g. Google Fonts link, Adobe Fonts).If any fonts are missing or misconfigured:
Report each issue and ask the user to provide the font files. Use this format:
⚠️ Missing fonts detected:
1. [Font Family Name] (weight: [weight], used in: [component/element])
→ No font file found in [checked directory]
→ Please add the .woff2/.ttf file to [suggested directory]
and add an @font-face declaration to [CSS file]
2. [Font Family Name] ...
Do NOT proceed with the visual diff until the user confirms fonts are resolved. Missing fonts invalidate any visual comparison.
Compare the deployed website against the source Figma design across these dimensions:
Before evaluating component usage, call the get_code_connect_map tool (or read the Code Connect mapping from design-context.md - skip if context is present without code connect mapping) to load the mapping between Figma components and code components.
get_code_connect_map output)Generate a verification report in this format:
## Design Verification Report
**Test URL:** [deployed URL]
**Environment:** [staging/production/QA]
**Source Figma:** [URL]
**Tested at breakpoints:** [list of viewport widths]
**Date:** [timestamp]
### ✅ Passing
- [What matches correctly]
### ⚠️ Warnings
- [Minor discrepancies that may be acceptable — e.g. sub-pixel
rounding, antialiasing differences]
### ❌ Issues
- [Significant visual discrepancies with specific details]
- Expected: [from Figma]
- Actual: [from deployed website]
- Severity: [Critical / High / Medium / Low]
### 🔤 Font Status
- [Font family]: ✅ Loaded | ❌ Missing | ⚠️ Wrong weight/style
### 🎨 Token Compliance
- [X/Y] design tokens correctly applied
- Hardcoded values found: [list any raw hex/px values that appear
inconsistent with design tokens]
### Summary
[Pass / Fail with count of issues]
[Recommended next steps — file bug report, request developer fix, etc.]
If there are issues, document them for the development team. For each issue, include:
/verify-figma-design https://staging.example.com/hero-banner https://figma.com/design/abc123/DS?node-id=42-1337
I need to verify the hero banner on staging matches the Figma design. Can you check it across desktop and mobile?
Check if the recent design updates in Figma have been correctly deployed to production.
| Problem | Cause | Fix |
|---|---|---|
| Website URL is not accessible | Environment down or incorrect URL | Verify the deployment is live and use the correct environment URL |
| Diff reports many false positives | Dynamic/animated content or A/B testing | Capture static state, disable animations, or test known variants |
| Fonts show as missing but render OK | Font loaded via CDN not local files | Verify CDN is accessible from your network |
| Screenshots show staged/stale content | Cache or deployment delay | Hard refresh (Ctrl+Shift+R), clear cache, or wait for deployment to propagate |
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub tomrobinson26/qa-skills --plugin verify-figma-design