# @atercates/vision-judge

MCP server and CLI tool that analyzes web design screenshots using GitHub Copilot (GPT-4o vision) and gives direct, no-nonsense feedback on real visible problems.

## Prerequisites

- [GitHub Copilot CLI](https://docs.github.com/en/copilot/how-tos/set-up/install-copilot-cli) installed and authenticated

```bash
copilot --version  # verify installation
```

## Installation

```bash
npm install -g @atercates/vision-judge
```

## Tools

### `vision_judge_analyze`

Full UI review. Use this whenever you need to evaluate how a web interface looks — and always when performing accessibility or UI checks. Returns direct feedback on visible problems, or confirms the design looks good.

### `vision_judge_ask`

Targeted question about a specific element or aspect of the UI. Use this instead of a full review when you only need to check one concrete thing.

Examples:
- `"Is the submit button visible and easy to find?"`
- `"Does the text have enough contrast against the background?"`
- `"Does the modal look centered?"`

## Usage

### CLI

```bash
vision-judge ./screenshot.png
```

### MCP server (Claude Desktop / Cursor / any MCP client)

```json
{
  "mcpServers": {
    "vision-judge": {
      "command": "npx",
      "args": ["-y", "--package=@atercates/vision-judge", "vision-judge-mcp"]
    }
  }
}
```

### Claude Code

```bash
claude mcp add vision-judge -- npx -y --package=@atercates/vision-judge vision-judge-mcp
```

## Environment variables

| Variable | Default | Description |
|---|---|---|
| `VISION_JUDGE_MODEL` | `gpt-4o` | Copilot model to use for analysis |

```bash
VISION_JUDGE_MODEL=gpt-4.1 vision-judge ./screenshot.png
```

In MCP config:

```json
{
  "mcpServers": {
    "vision-judge": {
      "command": "npx",
      "args": ["-y", "--package=@atercates/vision-judge", "vision-judge-mcp"],
      "env": {
        "VISION_JUDGE_MODEL": "gpt-4.1"
      }
    }
  }
}
```

## Supported formats

PNG, JPG, JPEG, WebP, GIF — up to 20MB.