LooksRightToMe

The AI-powered lie detector for your React Native UI.

"Looks right to me" is what you say right before the designer opens Figma and files four tickets.

You built the screen. The padding is off by 4px. The font weight is wrong. The border radius lied to your face. You had no idea — because it looked right.

LooksRightToMe catches what your eyes miss. Right-click any screen → it captures your simulator, fetches the Figma frame, and sends both to Claude for a pixel-perfect, style-aware diff. You get an exact list of what's wrong, where it is, and what the value should be.

No tab switching. No squinting. No "LGTM" regrets.

What It Does

Captures your running iOS or Android simulator automatically — no screenshots needed.

Reads every style in your screen and all its child components. Theme tokens, typography spreads, inline styles — all resolved to their real values.

Fetches the matching Figma frame — by screen name, by annotation, or by a mapping file you commit once and forget.

Asks Claude to compare both images and all extracted styles simultaneously — not a pixel diff, a semantic diff that understands what changed and why it matters.

Shows you a match score, a list of exact mismatches with component names and line numbers, and a side-by-side comparison panel you can actually use.

Getting Started

Install the extension, then add three settings:

• Your Figma personal access token
• Your Figma file ID
• Your Anthropic API key

Then right-click any screen file and hit "Compare with Figma." That's the whole setup.

Optionally drop a .figma-map.json in your repo to pre-link screens to frames — so the extension always knows which frame to pull without asking.

The Panel

Three tabs. No bloat.

Mismatches — every diff card shows you the component, the property, your value, and the Figma value. Click to jump straight to the line in code.

Compare — your simulator screenshot next to the Figma frame. Zoomable. Pannable. Uncomfortable.

Styles — the full extracted style tree for your screen, with resolved token values and color swatches. Useful even without a diff.

Match score ring: green means you're good, yellow means close, red means the designer is already typing.

Settings

Roadmap

• [x] Style parser — resolves tokens, spreads, and inline styles
• [x] Auto simulator capture — iOS and Android
• [x] Smart Figma frame matching
• [x] Claude-powered visual + semantic diff
• [x] Comparison panel with match score and diff cards
• [ ] VS Code Marketplace publish
• [ ] Figma plugin — highlight matched frames from inside Figma
• [ ] CI mode — run design regression checks in your pipeline