One Shot UI

Name: One Shot UI
Author: TN0123

by TN0123version 0.7.0i★ –iRuns on your computer

Registry nameio.github.TN0123/one-shot-ui

Install

Overview

Description from the maker (original English)

Deterministic UI extraction and screenshot diffing for AI coding agents.

PopNx MCP’s three pillars

These three are never merged into one score: opinions, measurements and popularity are different things.

User voiceiNo reviews yetReviews open together with accounts in a later step
Our basic checksi1 of 1 passedChecked from public information; code not scanned yet
UsageiNot measured yet★ –

What you can do with it

We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.

Connection: Runs on your computer
Transport: stdio
Category: Developer tools

Install

Pick the AI app you use, then copy the settings.

Before you install

Basic checks: 1 of 1 passed
Runs on your computer with your user’s permissions (files, network, apps).
The registry lists no key to fill in.

You need

npmNode.js installed (for the npx command)

Which app do you use?

ClaudeClaude CodeCursorVS CodeChatGPT

Pick your app above. We remember it, so next time the button says “Install in …”.

Open Claude Desktop → Settings → Developer → Edit Config, and paste this into claude_desktop_config.json

{
  "mcpServers": {
    "one-shot-ui": {
      "command": "npx",
      "args": [
        "-y",
        "one-shot-ui",
        "mcp"
      ]
    }
  }
}

Run this in your terminal

claude mcp add one-shot-ui -- npx -y one-shot-ui mcp

Open in Cursor

Or copy the settings yourself

Paste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json

{
  "mcpServers": {
    "one-shot-ui": {
      "command": "npx",
      "args": [
        "-y",
        "one-shot-ui",
        "mcp"
      ]
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

Open in VS Code

Or copy the settings yourself

Paste into .vscode/mcp.json in your project

{
  "servers": {
    "one-shot-ui": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "one-shot-ui",
        "mcp"
      ]
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

This one runs on your computer, and ChatGPT can only connect to servers on the internet. Pick another app.

Your choice stays on this device in a cookie; no account needed.

These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.

What it can do

Runs on your computer; the tool list appears in your AI app after you install it.

Basic checksi

We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 8, 2026

✓ Pass
Maker matches the repo
The registry name was verified with the GitHub account TN0123, which owns the repo
… Not checked yet
Still maintained
We have not read this repo from GitHub yet
… Not checked yet
Has a licence
We have not read this repo from GitHub yet
– Not applicable
Endpoint responds
This one runs on your computer; there is no internet endpoint
– Not applicable
Sign-in with OAuth
Runs on your computer and uses local settings instead
… Not checked yet
No hidden instructions in tool descriptions
Runs on your computer; we can only read tool lists from internet endpoints

Compared with others in Developer toolsi

More stars than 0% of the other 4914 servers in this category
Published to the registry more recently than 19% of the other 4914 servers in this category
Basic checks equal to or better than 100% of the other 4914 servers in this category

Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.

Common questions

Is One Shot UI safe?

It passed 1 of 1 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.

What keys or codes does it need?

The registry does not list a required key, though some servers ask you to sign in on first use.

Does it run on my computer or in the cloud?

It runs on your computer. Your AI app starts it when needed, and data does not pass through the maker’s servers (unless it calls an online service itself).

Is it still maintained?

The GitHub repo last changed –, and the latest version (0.7.0) reached the registry 5 months ago.

Which apps can use it?

Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. You also need Node.js on your computer.

What can I use instead?

In the same category: GitHub, Desktop Commander, Cloudflare MCP

Alternatives

Servers in the same category from other makers, sorted by stars.

Reading a card:★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi

GitHub

by github

GitHub’s official server lets AI read and manage code, issues and pull requests in your account. Use GitHub’s hosted version or run it locally with Docker.

Computer or cloud★ 34,245MITUpdated 4 days ago

Install

Desktop Commander

by wonderwhy-er

MCP server for terminal commands, file operations, and process management

Runs on your computer★ 10,225MITUpdated 16 days ago

Install

Cloudflare MCP

by cloudflare

Cloudflare MCP servers

Runs in the cloud★ 4,446Apache-2.0Updated 14 months ago

Install

README from the maker

Open the README

Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.

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.

one-shot-ui closes that last 10% deterministically. It extracts structured data from a reference screenshot — layout regions, colors, typography, spacing, design tokens — diffs your implementation against it, and returns specific, ranked fixes, not "make it look more like this."

Set width to 616px (currently 640px)

Change the fill color to #303040. Set box-shadow to -3px 0px 24px 0px rgba(28, 29, 38, 0.32). gap: 176px; /* currently ~152px */

Copy-paste CSS, ranked by visual impact — every example above is real output from the run below.

Watch it converge

The run command loops extract → capture → compare → fix until the heatmap goes quiet. In the run above, the agent's first build looked identical to the eye — one-shot-ui flagged 15 concrete deltas (position, size, color, shadow, spacing) and the loop drove the build to ~2.5% pixel mismatch, within ~0.5% of the tool's own estimated *irreducible* floor (≈2%, sub-pixel font rendering) for this design.

Why one-shot-ui

Deterministic, not vibes. Stable pixel + structural diff scores — same input, same numbers — so you can gate CI on "is this pixel-close enough?"
Exact fixes, not nudges. It returns concrete CSS (width: 616px, #303040, gap: 176px), grouped by component and ranked by visual impact.
Structural, not just pixels. Detects missing/extra elements, position & size shifts, color, shadow, spacing, and typography — and labels which differences are *irreducible* (anti-aliasing, photographic content) so agents don't chase ghosts.
Not gameable. converge scores structural fidelity — is the reference's content present, placed, and legible? — not just pixel mismatch, and it refuses to win pixels by hiding, overlapping, or recoloring text into its background. It even flags reference text your build renders but clips out of view (a fixed-height overflow:hidden box) — the failure a pixel diff *rewards*, because cropped text lowers the mismatch.
Agent-native. Ships an AGENTS.md (auto-discovered by Claude Code, Cursor, Codex, …) plus a Claude Code skill, so your agent drives it without hand-holding.
Local & private. Pixel diffing, OCR, and layout extraction all run on your machine. No images leave your box, no API keys.

Copy a UI's style, not just match it

Matching a screenshot pixel-for-pixel is one job. The other: building a different screen that feels like it belongs to the same design system. one-shot-ui extracts the *design language* from a reference and verifies a new UI conforms to it — deterministically, with no pixel oracle to lean on.

# Extract a reusable style system — palette, spacing scale, type ratio, radii, elevation

one-shot-ui tokens reference.png --emit shadcn # or: tailwind | json

Build a different screen in that style, then check it conforms

one-shot-ui style-check reference.png ./pricing.html

It reports measured facts and leaves the taste to the agent: it won't name your "primary" color or classify the mood — you decide those from the image (you're the vision model; the tool is your exact, hallucination-free eyes). Conformance is judged on what a screenshot grounds reliably — palette, spacing rhythm, type scale — while roundedness and elevation are flagged as advisories, since a raster can't pin them down.

Install

npm install -g one-shot-ui

For commands that need a browser (capture, run):

npx playwright install chromium

Quick start

# Diff your implementation against a reference and see exactly what's off

one-shot-ui compare reference.png build.png --json --heatmap heatmap.png

Get copy-paste CSS fixes, ranked by impact

one-shot-ui suggest-fixes reference.png build.png --json

The step that gets you pixel-perfect: trial fixes in a live browser and keep

only the ones that provably reduce pixel mismatch — outputs a verified patch,

a structural fidelity score, and any reference text your build hides or clips

one-shot-ui converge reference.png --impl ./index.html

Or run the full automated loop until it converges

one-shot-ui run reference.png --impl ./index.html --max-passes 5 --threshold 0.02

Every command supports --json for structured, agent-friendly output.

Use it with your coding agent

one-shot-ui ships an AGENTS.md (auto-discovered by Claude Code, Cursor, Codex, and other agent tools) plus a skill/SKILL.md for Claude Code.

Install the skill in one line:

mkdir -p .claude/skills/one-shot-ui && cp "$(npm root -g)/one-shot-ui/skill/SKILL.md" .claude/skills/one-shot-ui/

Use it as an MCP server

one-shot-ui also runs as a local MCP server, so any MCP-capable agent (Claude Code, Cursor, Cline, Windsurf, VS Code) can call compare, converge, suggest_fixes, extract, tokens, plan, and style_check as tools — no shell glue. It runs over stdio, makes no network calls, and needs no API keys.

claude mcp add one-shot-ui -- npx -y one-shot-ui mcp

Or add to any client's MCP config:

"mcpServers": { "one-shot-ui": { "command": "npx", "args": ["-y", "one-shot-ui", "mcp"] } } }

See docs/MCP.md for per-client setup and registry publishing.

Commands

Command	Purpose	Key Flags
`extract`	Analyze a screenshot into layout, color, and text data	`--json`, `--no-ocr`, `--overlay`, `--fine`
`compare`	Pixel + structural diff between two screenshots	`--json`, `--heatmap`, `--dom-diff`
`tokens`	Design tokens + a reusable style system (palette, spacing, type, radii)	`--json`, `--emit shadcn\	tailwind\	json`
`style-check`	Check a new UI conforms to a reference's design language	`--json` (new UI = URL / HTML / screenshot)
`plan`	Generate an implementation strategy	`--json`
`capture`	Screenshot a URL or local HTML file	`--url`, `--file`, `--output`
`suggest-fixes`	Tailwind/CSS fix suggestions from a diff	`--json`, `--top`, `--dom-diff`, `--framework`
`converge`	Closed-loop optimizer: pixel-verified CSS patch + structural fidelity score, flags hidden/clipped text	`--impl`, `--out`, `--json`, `--budget-seconds`
`run`	Multi-pass extract→capture→compare→fix loop	`--impl`, `--max-passes`, `--threshold`
`benchmark`	Run benchmark suites	`--json`, `--output`

How it works

extract — segments the reference into layout regions, samples colors/tokens, and OCRs text.
capture — screenshots your implementation (URL or local HTML) at a matched viewport.
compare — aligns the two, computes a pixel heatmap *and* a structural diff, and classifies each issue (layout / color / typography / spacing) plus whether it's actionable.
suggest-fixes — turns issues into concrete, ranked CSS edits.

run chains all four in a loop until the diff drops below --threshold.

Development

Requires Bun.

bun install

bun run install:browsers # Playwright Chromium bun run typecheck

Dev scripts run directly from source:

bun run dev:extract -- ./reference.png --json

bun run dev:compare -- ./reference.png ./build.png --json

Build for npm:

bun run build

License

MIT

One Shot UI

Overview

PopNx MCP’s three pillars

What you can do with it

Install

Before you install

What it can do

Basic checksi

Maker matches the repo

Still maintained

Has a licence

Endpoint responds

Sign-in with OAuth

No hidden instructions in tool descriptions

Compared with others in Developer toolsi

Common questions

Alternatives

GitHub

Desktop Commander

Cloudflare MCP

README from the maker

one-shot-ui

Catch what the eye can't.

The problem

Watch it converge

Why one-shot-ui

Copy a UI's *style*, not just match it

Build a different screen in that style, then check it conforms

Install

Quick start

Get copy-paste CSS fixes, ranked by impact

The step that gets you pixel-perfect: trial fixes in a live browser and keep

only the ones that provably reduce pixel mismatch — outputs a verified patch,

a structural fidelity score, and any reference text your build hides or clips

Or run the full automated loop until it converges

Use it with your coding agent

Use it as an MCP server

Commands

How it works

Development

License

Copy a UI's style, not just match it