skills.rest
udecode
udecodeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-implementation-reviewer

Compare live UI implementations against Figma designs and report discrepancies.

240|75|Updated Jul 13, 2023
Search Tags:#design review#pixel perfect#ui implementation#figma comparison#css review#ux fidelity
One-click install
npx skills add https://github.com/udecode/plate-playground-template --skill design-implementation-reviewer-udecode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-implementation-reviewer
Source: https://github.com/udecode/plate-playground-template/tree/main/.codex/skills/design-implementation-reviewer
Command: npx skills add https://github.com/udecode/plate-playground-template --skill design-implementation-reviewer-udecode

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 or brand consistency.

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 deviations from the design.
  • Actionable Feedback: Provides specific CSS/code suggestions for rectifying issues.
  • Use Case: After a developer implements a new feature based on a Figma mockup, this Skill can be used to verify that the spacing, colors, and font sizes are exactly as specified in the design.

Quick Start

Use the design-implementation-reviewer skill to compare the current implementation at 'http://localhost:3000/button' with 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 a live UI implementation against a Figma design?▼

To compare a live UI against a Figma design, you can use a visual fidelity tool that captures UI states and retrieves design tokens to systematically check layout, typography, colors, and spacing discrepancies.

What is a pixel-perfect UI review and when do I need it?▼

A pixel-perfect UI review ensures a live implementation precisely matches design specifications, catching visual discrepancies before they impact user experience or brand consistency after a new feature is developed.

Can I get specific CSS code suggestions to fix UI discrepancies?▼

Yes, you can get specific CSS code suggestions to rectify issues by generating structured reviews that provide actionable feedback and detailed fixes for developers.

How do I check if my UI typography and spacing match the Figma mockup?▼

You can check typography and spacing by capturing the current UI implementation and systematically comparing visual fidelity, colors, and interactive elements against the retrieved Figma design tokens.

Do I need a specific browser environment to perform a Figma comparison?▼

You need an environment that supports agent-browser to capture UI states and Figma MCP to retrieve design tokens, enabling the systematic visual comparison of your live implementation.

Related Skills

Explore More Design & Creative Skills→
pcasarettopcasaretto

design-implementation-reviewer

Compare live UI implementations against Figma designs and report discrepancies.

Community
Advanced
Generous-CorpGenerous-Corp
13

import-design

Import external design files into the Pulp framework with automated layout parity validation.

Official
Advanced
guilhermemarketingguilhermemarketing
59

figma-implement-design

Translate Figma designs into production-ready UI code with design-token mapping.

Community
Advanced
i3ringiti3ringit
3

figma-design-sync

Detect and fix visual differences between Figma designs and web implementations.

Community
Advanced