skills.rest
ybbms777
ybbms777COMMUNITY
Explore all skills by this author →
GitHub

design-implementation-reviewer

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
One-click install
npx skills add https://github.com/ybbms777/compound-engineering --skill design-implementation-reviewer-ybbms777
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
i3ringiti3ringit
3

design-implementation-reviewer

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

Community
Intermediate
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
FerranGuardiaFerranGuardia

frontend-craft

Build UI components and design systems for Next.js with shadcn/ui and Tailwind CSS.

Community
Advanced
KrismithReddy12KrismithReddy12
1

web-design-reviewer

Inspects running websites and applies source-code fixes for design issues.

Community
Advanced