Design to Code

Compare Figma designs with your implementation and auto-generate CSS fixes to match.

Overview

UI Inspect bridges the gap between design and development by:

Comparing design mockups with live implementation screenshots
Analyzing pixel-level differences with the smart diff engine
Generating specific CSS or Tailwind fixes to match the design
Optionally applying fixes automatically

Using the browser extension

Pick an element

Open the extension side panel and hold Ctrl to activate the element picker. Click the element you want to compare.

Upload the design

Upload the corresponding design image (PNG/JPG) from Figma, Sketch, or any design tool.

Overlay and compare

Use the overlay editor to align the design with your implementation. Adjust opacity to visually spot differences.

Run analysis

Click Analyze to send both images to the diff engine. You'll get:

Pixel diff percentage
Highlighted difference regions
CSS fix suggestions with confidence scores

Apply fixes

Choose between CSS patches or Tailwind classes. Apply directly or copy to your code.

Using the API

For automated design-to-code comparison:

// 1. Analyze the diff
const result = await client.diff.analyze.mutate({
  designImage: designBase64,
  implementationImage: screenshotBase64,
  selector: ".hero-section",
  ssim: true,
  antiFlake: true,
});

console.log(`Diff: ${result.analysis.pixelDiff.percentage}%`);
console.log(`SSIM: ${result.analysis.ssimScore}`);
console.log(`Fixes: ${result.suggestion.fixes.length}`);

// 2. Generate Tailwind fixes
const fixes = await client.diff.generateFixes.mutate({
  suggestion: result.suggestion,
  useTailwind: true,
});

console.log(`Tailwind classes: ${fixes.classes?.join(" ")}`);

// 3. Apply fixes
const applied = await client.diff.applyFixes.mutate({
  selector: ".hero-section",
  fixes: result.suggestion.fixes,
  filePath: "src/components/Hero.tsx",
});

Using the MCP server with AI

The MCP server exposes design comparison as a tool that AI assistants can use:

Share a screenshot and design image with Claude/Cursor
The AI calls analyzeUiDiff to compare them
It calls generateCssFixes to get fix suggestions
It applies the fixes to your code

This enables a conversational workflow: "Make this button match the Figma design" → AI does the comparison and applies the fix.

Tips for accurate comparisons

Tip	Why
Export at matching resolution	Different DPIs cause false positives
Use PNG, not JPG	JPEG compression introduces artifacts
Crop to the component	Full-page comparison is noisy
Disable animations	Moving elements cause massive diffs
Use consistent fonts	Font loading differences are common
Check dark/light mode	Ensure both match the design

On this page