design-implementation-reviewer

Name: design-implementation-reviewer
Availability: InStock
Author: ybbms

Compare implemented HTML, CSS, and React interfaces against Figma design specifications.

1|Updated Apr 4, 2026

Search Tags:#frontend #react #css #figma #ui review #visual testing #design fidelity

Ready to run

npx skills add https://github.com/ybbms777/compound-engineering --skill design-implementation-reviewer-ybbms777

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-implementation-reviewer
Source: https://github.com/ybbms777/compound-engineering/tree/main/skills/agent-design-implementation-reviewer
Command: npx skills add https://github.com/ybbms777/compound-engineering --skill design-implementation-reviewer-ybbms777

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually checking if live UI implementations exactly match Figma design specs is time-consuming and prone to human error, leading to inconsistent user experiences and unnecessary rework late in the development cycle.

Core Features & Use Cases

Systematic Visual Comparison: Checks layout, typography, colors, spacing, interactive states, responsive breakpoints, and accessibility compliance against Figma design files.
Actionable Feedback: Provides specific CSS corrections, design token references, and prioritized issue lists to resolve discrepancies efficiently.
Use Case: After building a new React navigation bar component, use this skill to catch misaligned padding and incorrect font weights before merging the code.

Quick Start

Use the design-implementation-reviewer skill to compare the live product settings page against its corresponding Figma design file and list all visual discrepancies that need to be fixed.

Frequently Asked Questions about design-implementation-reviewer

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

FAQPage Schema

How do I check if my React UI matches the Figma design pixel-perfectly?▼

Automated visual fidelity reviews compare your React UI against Figma design specifications to verify pixel-perfect alignment. This process checks layout, typography, colors, spacing, and interactive states, delivering actionable CSS corrections and prioritized issue lists to resolve discrepancies efficiently.

What is visual fidelity testing for frontend components?▼

Visual fidelity testing systematically verifies static layouts, interactive states, and responsive breakpoints against Figma design files. It eliminates manual effort required to verify alignment between implemented user interfaces and design specifications, ensuring consistent user experiences.

Can I use automated design review to check HTML and CSS accessibility compliance?▼

Yes, automated design review supports frontend development workflows for HTML, CSS, and React components, including checks for accessibility compliance. It compares live implementations against Figma specifications to catch misaligned padding, incorrect font weights, and other visual discrepancies.

What's the best way to get actionable CSS fixes for misaligned UI components?▼

The best way to get actionable CSS fixes is through structured visual fidelity reviews that provide specific CSS corrections and design token references. This automated approach catches misaligned padding and incorrect font weights early, delivering prioritized issue lists to resolve discrepancies efficiently before merging code.

Does visual testing work with responsive breakpoints and interactive states?▼

Yes, visual testing systematically checks responsive breakpoints and interactive states alongside layout, typography, colors, and spacing. This ensures your implemented React components align with Figma design specifications across different screen sizes and user interactions.

Why does my live UI implementation look different from the Figma design specs?▼

Your live UI implementation may look different from Figma design specs due to misaligned padding, incorrect font weights, or inconsistent design tokens. Automated visual fidelity reviews identify these specific discrepancies and provide actionable CSS corrections to align the implementation with the design system.