# one-shot-ui

Extracts structured UI data from reference screenshots and diffs builds against them. It returns exact CSS fixes directly inside your coding agent.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 6
- Author: TN0123
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/TN0123/one-shot-ui
- Updated: 2026-07-18
- HTML: https://affpapa.org/en/nevibecode/mcp/one-shot-ui

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add one-shot-ui -- npx -y one-shot-ui
```

### Codex

**Platform CLI**
```bash
codex mcp add one-shot-ui -- npx -y one-shot-ui
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "one-shot-ui": {
            "command": "npx",
            "args": [
                "-y",
                "one-shot-ui"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "one-shot-ui": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "one-shot-ui"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add one-shot-ui npx -y one-shot-ui
```

## When to use it
- 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
- 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

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74569
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51104
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4406
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3851
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3451

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md