Design Comparison

The design comparison feature lets you overlay a design image on top of your live implementation to visually spot differences, then run automated diff analysis to get specific CSS fixes.

Workflow

1. Select an element — Use the element picker to select the component you want to compare
2. Upload design — Upload a PNG/JPG from Figma, Sketch, or any design tool
3. Overlay — The design image is overlaid on your implementation with adjustable opacity
4. Analyze — Run the diff engine to get a detailed analysis with fix suggestions
5. Apply fixes — Apply suggested CSS or Tailwind fixes directly

Overlay editor

The overlay editor provides controls for:

Diff analysis

When you run analysis, the extension sends both images to the MCP server which returns:

• Pixel diff percentage — How different the images are
• Color analysis — Regions where colors don't match
• Spacing analysis — Margin/padding differences
• Typography analysis — Font size, weight, line height differences
• Dimension analysis — Width/height mismatches
• CSS fix suggestions — Specific property changes with confidence scores

Figma integration

For a smoother workflow, connect your Figma account:

1. Go to Settings → Integrations → Figma
2. Add your Figma personal access token and file key
3. Browse frames directly in the extension
4. Export frames at any scale for comparison

See the Figma integration API for programmatic access.

Tips

• Export designs at 2x resolution for Retina displays
• Use PNG format for pixel-perfect comparisons (JPG introduces compression artifacts)
• Align the design overlay carefully before running analysis — misalignment increases diff percentage
• Use ignore regions for dynamic content (timestamps, avatars, ads)