design-implementation-reviewer

Compare live UI implementations against Figma designs and report discrepancies.

5|1|Updated Aug 26, 2025

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

Ready to run

npx skills add https://github.com/hollandkevint/thinkhaven --skill design-implementation-reviewer-hollandkevint

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-implementation-reviewer
Source: https://github.com/hollandkevint/thinkhaven/tree/main/.gemini/skills/design-implementation-reviewer
Command: npx skills add https://github.com/hollandkevint/thinkhaven --skill design-implementation-reviewer-hollandkevint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill bridges the gap between design mockups and live web implementations, ensuring that the final user interface precisely matches the intended design specifications and catches visual discrepancies early.

Core Features & Use Cases

Visual Comparison: Compares live UI elements against Figma designs.
Discrepancy Reporting: Identifies and details differences in layout, typography, colors, spacing, and interactive states.
Actionable Feedback: Provides specific recommendations for CSS or code adjustments to achieve design fidelity.
Use Case: After a developer implements a new feature, this Skill can be used to verify that the implemented components, such as buttons, forms, and layout sections, perfectly match the approved Figma designs before deployment.

Quick Start

Use the design-implementation-reviewer skill to compare the live implementation at https://example.com/dashboard with the latest Figma designs.

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 live UI implementation against Figma designs for pixel perfect fidelity?▼

To check responsive design and UI fidelity, the Skill visually compares live UI implementations against Figma designs to identify layout, typography, color, and spacing discrepancies. It utilizes agent-browser CLI to capture UI states and Figma MCP for design specifications.

How do I verify CSS adjustments to match Figma design specifications?▼

To verify CSS adjustments, the Skill provides actionable feedback and specific recommendations for code adjustments after comparing live UI elements against Figma designs. This ensures developers achieve precise design fidelity before feature deployment.

Does the visual comparison tool require agent-browser CLI and Figma MCP to work?▼

Yes, the visual comparison tool requires agent-browser CLI for capturing live UI states and Figma MCP for retrieving design specifications. These dependencies allow it to analyze layout, typography, colors, and spacing for pixel perfect fidelity.

Can I use this to find typography and spacing discrepancies in web implementations?▼

Yes, you can use this to find typography and spacing discrepancies in web implementations. It visually compares live UI implementations against Figma designs and reports differences in layout, typography, colors, spacing, and interactive states.

What is the best way to automate design fidelity checks between Figma and live code?▼

The best way to automate design fidelity checks is comparing live UI implementations against Figma designs to catch visual discrepancies early. It identifies differences in layout and typography, providing actionable feedback for UI developers to adjust CSS code.