How does this skill access my Figma designs?

It utilizes the Figma MCP (Model Context Protocol) to securely retrieve design specifications, tokens, and layouts directly from your linked Figma files for comparison.

What kind of output does the review provide?

You receive a structured report detailing correctly implemented elements, minor discrepancies, major issues, and specific CSS code snippets to fix any styling errors.

Does it support responsive design testing?

Yes, the skill uses browser automation to capture screenshots at different viewport sizes to ensure your implementation matches design breakpoints specified in Figma.

Can it detect discrepancies in interactive states?

Absolutely. It can trigger and screenshot hover, focus, and active states to verify that interactive elements like buttons and inputs behave exactly as designed.

Is this limited to specific frontend frameworks?

No, this skill works for any web implementation (HTML/CSS, React, Vue, etc.) as long as it can be rendered in a browser environment for visual inspection.

Design Implementation Reviewer

Name: Design Implementation Reviewer
Author: gvkhosla

bygvkhosla

•

Herramientas de Diseño

Performs automated visual audits of live UI components against Figma design specifications to ensure pixel-perfect fidelity.

The Design Implementation Reviewer skill streamlines the frontend development workflow by systematically comparing live web implementations with original Figma designs. It leverages browser automation to capture high-fidelity screenshots and interactive states, then cross-references them with design tokens and layouts retrieved directly from the Figma API. By providing structured feedback on typography, color accuracy, and spacing discrepancies—including specific CSS fix recommendations—it helps developers catch subtle regressions and ensure that the final product adheres strictly to design system standards and brand guidelines.

Características Principales

01Automated visual comparison between live browser snapshots and Figma design specs.

02Multi-breakpoint responsive testing to ensure consistency across mobile and desktop designs.

03Interactive state validation for hover, focus, and active states using browser automation.

04Detailed discrepancy reports categorizing issues by impact with specific measurement data.

05Extraction of design tokens including colors, typography, spacing, and shadows via Figma MCP.

0635 GitHub stars

Casos de Uso

01Automating the visual QA process before submitting pull requests for frontend changes.

02Verifying UI fidelity immediately after implementing a new component or hero section.

03Auditing an existing site's styles against an updated design system in Figma.

Características Principales

01Automated visual comparison between live browser snapshots and Figma design specs.

02Multi-breakpoint responsive testing to ensure consistency across mobile and desktop designs.

03Interactive state validation for hover, focus, and active states using browser automation.

04Detailed discrepancy reports categorizing issues by impact with specific measurement data.

05Extraction of design tokens including colors, typography, spacing, and shadows via Figma MCP.

0635 GitHub stars

Casos de Uso

01Automating the visual QA process before submitting pull requests for frontend changes.

02Verifying UI fidelity immediately after implementing a new component or hero section.

03Auditing an existing site's styles against an updated design system in Figma.