design-compare

manashmandal's avatarfrom manashmandal

Use when comparing a frontend implementation against a reference design (Figma, mockup, screenshot). Performs pixel-level and structural analysis to identify discrepancies.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 8, 2026
[Creative Quality Checks]

When & Why to Use This Skill

The Design Compare skill is a specialized utility for frontend developers and UI/UX designers to ensure high-fidelity implementation. It performs automated, pixel-level and structural analysis by comparing live frontend code or screenshots against reference designs (Figma, mockups, or screenshots), identifying discrepancies in layout, spacing, typography, and color to maintain design integrity.

Use Cases

  • Figma-to-Code Validation: Automatically verify if a newly developed web page matches the original Figma design specifications with high precision.
  • Automated Visual QA: Systematically identify spacing, margin, and padding inconsistencies that are often missed by manual 'eyeballing' during the quality assurance phase.
  • CSS Debugging and Optimization: Generate detailed reports on color mismatches and typographic errors, providing actionable CSS fixes to align the implementation with the design spec.
  • Visual Regression Testing: Compare current frontend states against baseline design screenshots to detect unintended UI changes during code refactoring or updates.
namedesign-compare
descriptionUse when comparing a frontend implementation against a reference design (Figma, mockup, screenshot). Performs pixel-level and structural analysis to identify discrepancies.

Design Compare

Overview

Compare your frontend implementation against a reference design to identify visual discrepancies, spacing inconsistencies, and structural mismatches.

Core principle: Every pixel matters. Systematic comparison reveals what eyeballing misses.

When to Use

Use this skill when:

  • Implementing a design from Figma/Sketch/mockup
  • Checking if implementation matches design spec
  • Debugging visual differences between design and code
  • QA review before handoff
  • User says "compare this to the design" or "check against mockup"

Required Inputs

  1. Reference design - Screenshot, Figma export, or mockup image
  2. Implementation - Screenshot of current frontend OR URL to capture

Announce: "I'll compare your implementation against the reference design using design-compare."

Comparison Process

Phase 1: Capture and Prepare

  1. Obtain reference design

    • User provides screenshot/image path
    • Read the image using Read tool
    • Note dimensions, viewport size

  2. Capture implementation

    • User provides screenshot OR
    • Request user to capture current state
    • Match viewport/dimensions to reference

Phase 2: Structural Analysis

Compare these elements systematically:

Element Check For
Layout Grid alignment, container widths, flex/grid structure
Spacing Margins, padding, gaps between elements
Typography Font family, size, weight, line-height, letter-spacing
Colors Background, text, borders, shadows
Components Button styles, inputs, cards, icons
Hierarchy Visual weight, heading levels, emphasis
Responsive Breakpoint behavior if applicable

Phase 3: Generate Comparison Report

Output format:

## Design Comparison Report

### Match Score: [X/10]

### Critical Discrepancies (Must Fix)
- [ ] Issue description | Location | Reference vs Implementation

### Minor Discrepancies (Should Fix)
- [ ] Issue description | Location | Reference vs Implementation

### Acceptable Variations
- Variation description | Reason acceptable

### Pixel-Perfect Elements
- Element that matches exactly

Evaluation Criteria

Spacing (Weight: High)

  • Measure in pixels or design tokens
  • Flag differences > 4px
  • Check consistency across similar elements

Typography (Weight: High)

  • Font family must match exactly
  • Size tolerance: ±1px
  • Weight must match (400 vs 500 matters)
  • Line-height tolerance: ±2px

Colors (Weight: Medium)

  • Hex values within #02 tolerance per channel
  • Check in multiple states (hover, active, focus)
  • Gradient direction and stops

Layout (Weight: Critical)

  • Container widths must match
  • Alignment (left/center/right)
  • Element ordering
  • White space distribution

Visual Polish (Weight: Medium)

  • Border radius consistency
  • Shadow values
  • Icon sizing and alignment
  • Image aspect ratios

Common Discrepancies

Issue Impact Typical Cause
Inconsistent spacing High Missing design tokens
Wrong font weight Medium Default browser styles
Color off by shade Low Color space conversion
Different line-height High Framework defaults
Misaligned icons Medium Baseline alignment issues
Border radius mismatch Low Hardcoded values

Output Actions

After comparison, offer:

  1. Generate CSS fixes - Output corrected values
  2. Create issue list - Checklist format for tickets
  3. Deep dive - Analyze specific element in detail

Red Flags

Stop and clarify if:

  • Reference image is low resolution
  • Implementation uses different viewport size
  • Design has responsive variants not provided
  • Component states differ (hover vs default)

Integration

Related skills:

  • design-audit - For identifying issues without reference
  • design-report - For comprehensive expert analysis