Use this skill whenever the user wants to compare a design mockup/wireframe/Figma screenshot with a frontend implementation screenshot to identify visual differences and generate a list of changes needed. Triggers include: "compare design with implementation", "find differences between design and code", "what's different from the mockup", "design review", "pixel comparison", "why doesn't my implementation match the design", "QA visual comparison", "design vs screenshot", or any time two images are provided where one is a design reference and the other is a rendered UI. Always use this skill when the user uploads two images and asks what needs to change to make one look like the other — even if they don't mention "design" explicitly.
Compare a design reference image (Figma, Sketch, mockup, wireframe) with an implementation screenshot and produce a structured, actionable list of visual differences the developer needs to fix.
If the user hasn't labeled the images:
If it's truly ambiguous, ask the user:
Analyze both images across these categories in order. Check each category even if it seems fine — differences hide in overlooked areas:
| # | Category | What to look for |
|---|---|---|
| 1 | Layout & Spacing | Padding, margins, gaps between elements, overall page width/max-width |
| 2 | Typography | Font family, font size, font weight, line height, letter spacing, text color |
| 3 | Colors | Background colors, text colors, border colors, icon colors, hover/active states |
| 4 | Components | Buttons (size, radius, padding, shadow), inputs, cards, modals, badges |
| 5 | Imagery & Icons | Icon set, icon size, image aspect ratio, placeholder vs real images |
| 6 | Borders & Shadows | Border width, border radius, box shadows, dividers |
| 7 | Alignment | Left/center/right alignment of text and elements, vertical centering |
| 8 | Responsive / Breakpoint | If visible, note differences in how content reflows |
| 9 | Missing / Extra Elements | Things present in design but absent in implementation, or vice versa |
| 10 | Micro-details | Opacity, cursor style, focus rings, scrollbar styling |
Produce a structured diff report in this format:
One sentence overview of how close the implementation is.
For each difference, output a block like this:
[#] Category — Short title
After listing all differences, add a Priority Summary section:
🔴 High priority (visible, breaks design intent): #1, #3, ...
🟡 Medium priority (noticeable but secondary): #2, #5, ...
🟢 Low priority (minor polish): #4, ...
If the user's stack is known (React, Tailwind, plain CSS, etc.), add a Quick Fix Snippets section with ready-to-use code for the top 3 high-priority items.
~.[1] Typography — Heading font weight
font-weight: 700 (bold heading, visually heavy)font-weight: 400 (regular weight, looks too light)h1 { font-weight: 700; } or Tailwind: font-bold[2] Colors — Primary button background
#2563EB#6B7280.btn-primary { background-color: #2563EB; } or Tailwind: bg-blue-600[3] Spacing — Card internal padding
.card { padding: 24px; } or Tailwind: p-6