One Shot Ui

tn0123/one-shot-ui

Exposes five tools for deterministic UI diffing: extract layout regions and design tokens from a reference screenshot, capture screenshots of your implementation, compare them with pixel and structural diffs, and get ranked CSS fixes with exact values like "width: 616px" or "gap: 176px". The compare tool returns heatmaps and classifies deltas by type (layout, color, typography). The suggest_fixes tool outputs copy-paste CSS or Tailwind classes ranked by visual impact. Runs locally over stdio, uses Playwright for capture and OCR for text extraction. Reach for this when your AI agent gets a UI 90% right but stalls on subtle spacing, color, or shadow mismatches that need concrete corrections instead of vague nudges.

GitHub stars

2

tools

7

transport

STDIO

last updated

Jun 2, 2026

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Readme

README.md

one-shot-ui

Catch what the eye can't.

Deterministic screenshot diffing for AI coding agents. Turn a reference screenshot into structured data, diff any build against it — pixel, layout, color, and type — then get the exact CSS to fix. Or copy a UI's design language onto a brand-new screen.

The problem

AI agents get UI ~90% of the way there — then stall. The layout looks right, but a card is 8px too tall, a panel is the wrong shade of gray, a shadow is flat, a gap is off by 24px. Asking the model to "look at the screenshot again and fix it" is slow, and you get a different answer every time.

---

View the full README on GitHub

Show full README.md