에이전트 강화
게시자의 자체 명령입니다. PlugMCP 엔드포인트가 아닙니다.
Host a copy with our keys and logs.
npx -y [email protected]Claude Code에는 로컬 명령용 설치 링크가 없습니다. 아래 명령을 복사해 터미널에서 실행합니다.
claude mcp add io.github.tn0123-one-shot-ui -- npx -y one-shot-ui@0.7.0터미널에서 실행합니다.
{ "mcpServers": { "io.github.tn0123-one-shot-ui": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}claude_desktop_config.json
원격 URL인가요, 내 컴퓨터에서 실행하는 명령인가요? 두 설치 방식의 차이
PlugMCP에서 실행
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
실행게시자 제공
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.
Deterministic UI extraction and screenshot diffing for AI coding agents.
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.
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.
width: 616px, #303040, gap: 176px), grouped by component and ranked by visual impact.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.AGENTS.md (auto-discovered by Claude Code, Cursor, Codex, …) plus a Claude Code skill, so your agent drives it without hand-holding.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.
npm install -g one-shot-ui
For commands that need a browser (capture, run):
npx playwright install chromium
# 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.
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/
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.
run chains all four in a loop until the diff drops below --threshold.
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
MIT
Deterministic UI extraction and screenshot diffing for AI coding agents.
{ "mcpServers": { "io.github.tn0123-one-shot-ui": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}도구
아직 도구 목록이 없습니다. 원격 서버는 첫 상태 확인 후에 도구 목록이 생깁니다.
FAQ
이 페이지에서 Cursor, Claude Desktop, Claude Code 또는 VS Code용 stdio 설정을 복사합니다. PlugMCP 프록시가 아니라 게시자의 설치 방식을 사용합니다.
이 레코드에는 필수 환경 변수가 등록되어 있지 않습니다.
One Shot Ui은(는) stdio를 통해 로컬에서 실행됩니다.
마지막 확인: 2026-11-09. Deterministic UI extraction and screenshot diffing for AI coding agents.