design-implementation-reviewer

Compare live UI implementations against Figma designs and report discrepancies.

Updated Jun 28, 2022

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

Ready to run

npx skills add https://github.com/pcasaretto/nix-home --skill design-implementation-reviewer-pcasaretto

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill ensures that the live UI implementation 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 elements against Figma designs for layout, typography, colors, and spacing.
Discrepancy Reporting: Identifies and details both minor and major issues, providing actionable feedback for corrections.
Use Case: After a developer implements a new feature's UI, this Skill can be used to verify that the spacing, colors, and font styles exactly match the approved Figma mockups.

Quick Start

Use the design-implementation-reviewer skill to compare the current implementation of the login form against the 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?▼

Comparing your live UI against Figma designs requires visually capturing the implementation and retrieving design specifications. This process analyzes layout, typography, colors, and spacing to identify fidelity discrepancies and provide actionable feedback for corrections.

What is the best way to check front-end CSS spacing and colors against approved Figma mockups?▼

Checking front-end CSS spacing and colors against approved Figma mockups is done through visual fidelity comparison. It cross-references implemented components with Figma design specifications to detail both minor and major discrepancies, ensuring the live UI precisely matches the intended design.

Do I need agent-browser CLI and Figma MCP to automate UI review?▼

Yes, automating UI review requires agent-browser CLI and Figma MCP. The agent-browser CLI handles live UI capture, while the Figma MCP retrieves design specifications, enabling the system to visually compare implementations against intended mockups.

Can I use this to verify responsive behavior and component layouts against design specifications?▼

Yes, you can verify responsive behavior and component layouts against design specifications. The visual fidelity comparison applies to front-end workflows, ensuring pixel-perfect accuracy across components, layouts, and responsive behavior by identifying visual discrepancies.

What limitations exist when catching visual discrepancies between Figma and a live implementation?▼

A key limitation when catching visual discrepancies is reliance on agent-browser CLI for UI capture and Figma MCP for specification retrieval. Complex dynamic interactions or highly animated states may be difficult to evaluate compared to static layout, typography, and spacing checks.