one-shot-ui — Claude Code MCP server: what it does, how to install
Extracts structured UI data from reference screenshots and diffs builds against them. It returns exact CSS fixes directly inside your coding agent.
claude mcp add one-shot-ui -- npx -y one-shot-uiWhat one-shot-ui does
AI coding assistants often get interface layouts close to reference images, but miss minor padding, font sizes, or color values. The one-shot-ui MCP server parses a reference image into layout components, palettes, and typography metrics. It matches the running build against those targets to surface ranked styling adjustments.
The tool checks layout geometry, missing components, and clipped text. It ignores unavoidable artifacts like sub-pixel font rendering. Beyond direct pixel matching, it can also dump design tokens for Tailwind or shadcn to validate whether independent screens follow the original styling rules.
Commands relying on live page rendering require Chromium via Playwright. Everything runs on the local computer over stdio, so no screenshots are transmitted externally and no API tokens are required.
What it helps with
- diff generated layouts against reference images to detect pixel discrepancies
- generate exact CSS property fixes for colors, shadows, and spacing
- extract design tokens into Tailwind CSS or shadcn configurations
- verify whether a new webpage conforms to an existing design language
Example prompts for the agent
- Compare my current build against reference.png using one-shot-ui and generate CSS fixes
- Extract the design token palette from ui-mockup.png into shadcn format
- Run the converge check on index.html against design-spec.png
How to install one-shot-ui
Platform CLI
claude mcp add one-shot-ui -- npx -y one-shot-uiPlatform CLI
codex mcp add one-shot-ui -- npx -y one-shot-uiConfig file
{
"mcpServers": {
"one-shot-ui": {
"command": "npx",
"args": [
"-y",
"one-shot-ui"
]
}
}
}Config file
{
"servers": {
"one-shot-ui": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"one-shot-ui"
]
}
}
}Platform CLI
gemini mcp add one-shot-ui npx -y one-shot-uiStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about one-shot-ui
How to install one-shot-ui in Claude Code?
Run this command in your terminal: claude mcp add one-shot-ui -- npx -y one-shot-ui. It sets up the server over stdio without manual configuration files.
What does the one-shot-ui MCP server do?
It converts UI screenshots into structural specs and runs deterministic diffs against your implementation. Instead of vague suggestions, it produces copy-paste CSS changes to fix discrepancies.
Does one-shot-ui require API keys or cloud connections?
No API keys or remote calls are involved. Layout analysis and optical character recognition happen on your machine, though browser commands need Chromium installed through Playwright.
