design-implementation-reviewer

Compare live UI implementations against Figma designs and report discrepancies.

49|4|Updated Feb 12, 2026

Search Tags:#ui review #design fidelity #pixel perfect #implementation check #figma comparison #css verification

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that the live user interface precisely matches the intended design specifications in Figma, catching visual discrepancies before they impact user experience.

Core Features & Use Cases

Visual Fidelity Comparison: Compares implemented UI components against Figma designs.
Discrepancy Reporting: Identifies and details differences in layout, typography, colors, spacing, and interactive states.
Actionable Feedback: Provides specific CSS and code suggestions for corrections.
Use Case: After a developer implements a new button component, this Skill can be used to verify that its size, color, hover state, and spacing perfectly align with the approved Figma design.

Quick Start

Use the design-implementation-reviewer skill to compare the live implementation of the hero section at 'https://example.com/hero' against its Figma design.

Frequently Asked Questions about design-implementation-reviewer

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

FAQPage Schema

How do I compare my live UI implementation against Figma designs for pixel perfect accuracy?▼

Pixel perfect implementation checks identify and report visual discrepancies between live UI and Figma designs. The tool compares layout, typography, colors, and spacing, requiring agent-browser for UI capture and Figma MCP for specifications.

Can I use this to verify CSS and typography discrepancies in a live web component?▼

Yes, you can verify CSS and typography discrepancies by visually comparing implemented components against Figma designs. The tool identifies differences in colors, spacing, and typography, then provides specific CSS code suggestions for corrections.

What do I need to automate Figma design comparison for a live website?▼

To automate Figma design comparison, you need the agent-browser tool to capture the live UI and the Figma MCP to retrieve design specifications. These dependencies enable the extraction and comparison of visual elements like spacing and layout.

What is the best way to get actionable CSS feedback for UI implementation fidelity issues?▼

The best way to get actionable CSS feedback for UI fidelity issues is using a discrepancy reporting tool that provides specific CSS and code suggestions. It details differences in layout, typography, colors, and spacing to help correct visual mismatches.

Does the pixel perfect design check work with interactive states like hover?▼

Yes, pixel perfect design checks can verify interactive states like hover. The comparison process identifies discrepancies across various interactive states, ensuring the implemented component perfectly aligns with the approved Figma design specifications.