skills.rest
CristoVentures
CristoVenturesOFFICIAL
Explore all skills by this author →
GitHub

design-implementation-reviewer

Compare live frontend implementations to Figma designs and generate discrepancy reports.

2|Updated Apr 14, 2026
Search Tags:#frontend#figma#design-system#pixel-perfect#design-review#visual-regression#ui-review
One-click install
npx skills add https://github.com/CristoVentures/LocalCents --skill design-implementation-reviewer-cristoventures
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-implementation-reviewer
Source: https://github.com/CristoVentures/LocalCents/tree/main/.agent/skills/design-implementation-reviewer
Command: npx skills add https://github.com/CristoVentures/LocalCents --skill design-implementation-reviewer-cristoventures

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Verifies that UI implementations faithfully reflect Figma designs by providing structured feedback on discrepancies after code completion.

Core Features & Use Cases

  • Visual comparison: Pixel-level analysis between live UI and Figma references.
  • Discrepancy reporting: Generate actionable notes comparing colors, spacing, typography, and state changes.
  • Design spec retrieval: Access Figma design tokens and component specs to guide fixes.
  • Responsive review: Validate across breakpoints and interactive states (hover, focus, active).
  • Developer handoff support: Produce a streamlined review summary for engineers and designers.

Quick Start

Provide a design-implementation review for the latest UI component using its Figma specs.

Frequently Asked Questions about design-implementation-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify my frontend UI matches Figma designs pixel-perfectly?▼

Pixel-perfect UI verification compares live frontend implementations against Figma references to identify visual discrepancies. It analyzes colors, spacing, typography, and states, generating actionable discrepancy reports with specific fixes for developers.

What is a design-implementation review for HTML, CSS, and React components?▼

A design-implementation review validates that coded HTML, CSS, and React components faithfully reflect Figma design specs. It applies pixel-level visual comparison and retrieves design tokens to generate structured feedback on visual discrepancies.

Can I check responsive UI implementations across breakpoints and interactive states?▼

Yes, responsive UI validation checks live frontend implementations across multiple breakpoints and interactive states including hover, focus, and active. It compares these states against Figma component specs to ensure pixel-perfect accuracy.

Do I need Figma design tokens and component specs to review UI discrepancies?▼

Yes, accessing Figma design tokens and component specs is required to guide the pixel-perfect review process. These design specifications provide the baseline reference needed to generate actionable discrepancy notes and developer handoff summaries.

How do I generate actionable discrepancy reports from a Figma design review?▼

Generating actionable discrepancy reports involves comparing live UI components to Figma references and extracting differences in colors, spacing, and typography. The output provides a streamlined review summary with specific fixes for developers and designers.

What is the best way to automate visual regression checks between code and Figma?▼

Automating visual regression checks involves comparing live frontend components directly against Figma design tokens and specs. This pixel-perfect analysis identifies visual discrepancies across breakpoints and states, producing a detailed report with actionable code fixes.

Related Skills

Explore More Design & Creative Skills→
xlelibertyxleliberty

figma-implement-design

Translate Figma design nodes into React or Tailwind application code.

Community
Advanced
thoreinsteinthoreinstein
3

rams

Analyze HTML, CSS, and framework code for WCAG 2.1 accessibility and visual design issues.

Community
Basic
ivanyeorsivanyeors

frontend-design

Translate UX wireframes into a token-driven frontend design system with handoff packages.

Community
Advanced
rshankrasrshankras
603

snapshot-test-setup

Automate SwiftUI visual regression testing setup with swift-snapshot-testing.

Community
Intermediate