Design Diff Skill

Step 2 — Systematic Visual Inspection

Analyze both images across these categories in order. Check each category even if it seems fine — differences hide in overlooked areas:

Step 3 — Format the Output

Produce a structured diff report in this format:

🎨 Design Diff Report

Summary

One sentence overview of how close the implementation is.

Differences Found

For each difference, output a block like this:

[#] Category — Short title

• 📐 Design: what the design shows
• 💻 Implementation: what the current implementation shows
• 🔧 Fix: concrete, copy-paste-ready CSS or code suggestion when possible

Step 4 — Prioritization

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, ...

Step 5 — Optional: Code Snippet Section

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.

Output Principles

• Be specific, not vague. Instead of "the button looks wrong", say "button border-radius should be 8px, currently appears to be 0px".
• Estimate values when exact values aren't visible — use visual judgment and standard scales (4px grid, Tailwind classes, etc.). Flag estimates with ~.
• Never say "looks fine" for a category without actually checking it.
• Use developer language — CSS property names, Tailwind class names, or design token names where appropriate.
• Avoid subjective adjectives like "ugly" or "bad". Be neutral and precise.

Edge Cases

• Low-resolution images: Note that measurements are estimates and recommend the developer inspect with browser devtools.
• Dark mode / theming: If one image is dark mode and the other is light mode, flag this as a context difference before diffing.
• Animated / interactive states: Static screenshots can't capture hover states. If differences might be in interactive states, note this caveat.
• Partial screenshots: If only a section of UI is shown, scope the diff to what's visible and say so.
• Design with annotations/redlines: Use annotation values as ground truth for measurements.

Example Output Snippet

[1] Typography — Heading font weight

• 📐 Design: font-weight: 700 (bold heading, visually heavy)
• 💻 Implementation: font-weight: 400 (regular weight, looks too light)
• 🔧 Fix: h1 { font-weight: 700; } or Tailwind: font-bold

[2] Colors — Primary button background

• 📐 Design: Vibrant blue, approximately #2563EB
• 💻 Implementation: Muted gray-blue, approximately #6B7280
• 🔧 Fix: .btn-primary { background-color: #2563EB; } or Tailwind: bg-blue-600

[3] Spacing — Card internal padding

• 📐 Design: ~24px padding on all sides
• 💻 Implementation: ~8px padding, content feels cramped
• 🔧 Fix: .card { padding: 24px; } or Tailwind: p-6