Design Compare Skill | Agent Skills

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

Reference design - Screenshot, Figma export, or mockup image
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

Obtain reference design
- User provides screenshot/image path
- Read the image using Read tool
- Note dimensions, viewport size
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:

Generate CSS fixes - Output corrected values
Create issue list - Checklist format for tickets
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

Agent Skills: Design Compare

Skill Files