design-implementation-reviewer

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

Compare live UI components with Figma designs and report visual discrepancies.

Updated Feb 16, 2026

Search Tags:#visual consistency #UX design #feedback generation #Figma integration #UI comparison

Ready to run

npx skills add https://github.com/praburajasekaran/ruthva-clinic-os --skill design-implementation-reviewer-praburajasekaran

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill streamlines the process of comparing live UI implementations against Figma designs, providing detailed feedback on discrepancies to maintain visual consistency.

Core Features & Use Cases

Visual Comparison: Compare UI implementations with Figma designs.
Feedback Generation: Provide actionable feedback on discrepancies.
Use Case: After implementing UI components, use this Skill to ensure they match the intended design specifications from Figma.

Quick Start

Run the design-implementation-reviewer skill to compare the UI of the 'HeroSection' component with the corresponding 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 live UI components with Figma designs to check visual consistency?▼

To compare live UI components with Figma designs, you provide images of both to this Skill, which analyzes visual layout, typography, color, and responsiveness to generate actionable feedback on discrepancies.

What is the best way to automate UI comparison during design handoff?▼

The best way to automate UI comparison during design handoff is using a Skill that compares images of live components against Figma designs, generating feedback on visual discrepancies to ensure UI fidelity.

Can I detect typography and color discrepancies between my implementation and Figma?▼

Yes, this Skill detects typography and color discrepancies by comparing images of your live UI implementation against Figma designs, providing detailed feedback on visual layout and responsiveness issues.

Does the UI comparison process require image comparison tools?▼

Yes, the UI comparison process requires image comparison tools and design system knowledge to accurately evaluate visual layout, typography, color, and responsiveness against Figma designs.

What are the limitations of using Figma integration for visual comparison?▼

Limitations of using Figma integration for visual comparison include relying on image comparison tools and design system knowledge to detect visual layout, typography, color, and responsiveness issues, requiring clear images for accurate feedback.