skills.rest
gvkhosla
gvkhoslaCOMMUNITY
Explore all skills by this author →
Website𝕏@geetkhoslaGitHub

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

Related Skills

Explore More Design & Creative Skills→
i3ringiti3ringit
3

design-implementation-reviewer

Compare live UI states against Figma design specs and generate structured feedback.

Community
Intermediate
ImL1sImL1s
6

visual-verdict

Compare generated screenshots with reference images and output strict JSON verdicts.

Community
Intermediate
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
CodeGeneration-2020CodeGeneration-2020
1

cgs.figma.visual

Compare live web pages against Figma design frames using pixelmatch.

Community
Advanced