skills.rest
easingthemes
easingthemesCOMMUNITY
Explore all skills by this author →
Website𝕏@draganfillGitHub

dx-figma-verify

Compare HTML/CSS prototypes against Figma reference screenshots and generate verification reports.

6|3|Updated Mar 21, 2026
Search Tags:#qa#multimodal#figma#prototype#visual-verification#chrome-devtools-mcp
One-click install
npx skills add https://github.com/easingthemes/dx-aem-flow --skill dx-figma-verify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dx-figma-verify
Source: https://github.com/easingthemes/dx-aem-flow/tree/main/plugins/dx-core/skills/dx-figma-verify
Command: npx skills add https://github.com/easingthemes/dx-aem-flow --skill dx-figma-verify

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the visual verification of a generated HTML/CSS prototype against the Figma reference screenshot, reducing manual QA time and ensuring pixel-accurate implementations.

Core Features & Use Cases

  • Open the prototype in Chrome via MCP, capture a screenshot, and compare it against the Figma reference using multimodal vision to surface visual gaps.
  • Fix gaps iteratively (up to 2 iterations) and produce a verification report for traceability.
  • Trigger on commands like verify prototype, compare prototype, figma verify, and check prototype against figma; designed to be used after /dx-figma-prototype.

Quick Start

Run /dx-figma-verify after you have a generated prototype and a figma-reference.png to start the visual verification workflow.

Frequently Asked Questions about dx-figma-verify

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

FAQPage Schema
How do I verify an HTML prototype against a Figma reference screenshot?▼

To verify an HTML prototype against a Figma reference screenshot, this Skill opens the prototype in Chrome via MCP, captures a screenshot, and uses multimodal vision to compare it against the Figma reference image to surface visual gaps.

What do I need to compare a prototype against Figma using Chrome DevTools MCP?▼

To compare a prototype against Figma, you need Chrome DevTools MCP installed and a generated prototype containing a figma-reference.png file produced from a prior Figma extraction step.

How does multimodal visual verification work for generated CSS prototypes?▼

Multimodal visual verification works by capturing a browser screenshot of your generated CSS prototype and using vision capabilities to automatically detect and report pixel-level visual discrepancies against the original Figma design.

Can I automatically fix visual gaps found during Figma verification?▼

Yes, you can fix visual gaps found during Figma verification. The Skill supports up to two iterative fix attempts to resolve discrepancies and produces a final verification report for traceability.

When should I run a visual verification check on my Figma prototype?▼

You should run a visual verification check immediately after generating an HTML/CSS prototype from a Figma design. This ensures the generated code matches the reference screenshot before moving to further development.

What are the limitations of automated prototype verification against Figma?▼

The main limitation of automated prototype verification is the maximum of two iterative fix attempts. It also strictly requires a pre-existing figma-reference.png file and Chrome DevTools MCP to function correctly.

Related Skills

Explore More Design & Creative Skills→
wpgauravwpgaurav
111

figma-to-generateblocks

Convert Figma designs into GenerateBlocks V2 HTML files for WordPress.

Community
Advanced
LoringtonianLoringtonian
12

html-tweaker

Restyle LLM-generated HTML artifacts via interactive CSS custom property controls.

Community
Intermediate
easingthemeseasingthemes
6

aem-fe-verify

Screenshot AEM components in wcmmode=disabled and compare against Figma references.

Community
Advanced
i3ringiti3ringit
3

design-implementation-reviewer

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

Community
Intermediate