Use when comparing a frontend implementation against a reference design (Figma, mockup, screenshot). Performs pixel-level and structural analysis to identify discrepancies.
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.
Use this skill when:
Announce: "I'll compare your implementation against the reference design using design-compare."
Obtain reference design
Capture implementation
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 |
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
| 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 |
After comparison, offer:
Stop and clarify if:
Related skills:
design-audit - For identifying issues without referencedesign-report - For comprehensive expert analysis