skills.rest
praburajasekaran
praburajasekaranCOMMUNITY
Explore all skills by this author →
GitHub

design-implementation-reviewer

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

Related Skills

Explore More Design & Creative Skills→
MinhDuyDEVMinhDuyDEV

design-system-audit

Audit design system implementations for component, token, and visual inconsistencies.

Community
Advanced
ValyayValyay

figma-audit

Compare live UI screenshots against Figma references and report visual discrepancies.

Community
Advanced
GeargrindadminGeargrindadmin

eval-ui-ux

Evaluate UI/UX for design system adherence, visual consistency, and accessibility.

Community
Advanced
CodeGeneration-2020CodeGeneration-2020
1

cgs.figma.visual

Compare live web pages against Figma design frames using pixelmatch.

Community
Advanced