skills.rest
pcasaretto
pcasarettoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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

Related Skills

Explore More Design & Creative Skills→
gvkhoslagvkhosla
49

design-implementation-reviewer

Compare live UI implementations against Figma designs and report discrepancies.

Community
Intermediate
MadAppGangMadAppGang
278

ui-implementer

Generate UI components from Figma URLs and validate against design fidelity.

Official
Advanced
sahinsahin
1

designer

Review React/Next.js UI designs and provide actionable layout recommendations.

Community
Advanced
zinohomezinohome
1

visual-regression-tester

Capture and compare UI screenshots with Playwright and Chromatic.

Community
Advanced