# validator

Compares agent-written CSS against your design system and lists every value that sits off-token. Useful when the agent invents its own colors and spacing.

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

## What it does

validator is an MCP server that checks generated CSS for drift on request. The agent hands over the markup plus a token set, and the server answers with each violation: which axis, the value it found, the token that should be there, and where it sits. Nothing runs in the background — the server reports drift and leaves your files alone.

Two modes are available. Pack mode measures against a ready-made Swatchdog family; BYO mode measures against tokens the agent pulls from `tailwind.config.js` or CSS variables and passes as parameters. BYO is free on the keyless lane, which is rate-capped, and uncapped with a $12 license. Premium families run $19, or $49 as a bundle with a key.

The `check_design_drift` tool is BYO-only and works without a key; `check_drift` takes either a `paletteId` or your own `tokens`. Hex and standard color formats are covered today, while HSL channels and token resolution across several files are still on the roadmap. Code and tokens are not kept on the servers — only usage metadata such as a source tag and a finding count.

## Requirements
- Remote server: `https://swatchdog-mcp-970396648818.us-central1.run.app/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http validator https://swatchdog-mcp-970396648818.us-central1.run.app/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add validator --url https://swatchdog-mcp-970396648818.us-central1.run.app/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "validator": {
            "url": "https://swatchdog-mcp-970396648818.us-central1.run.app/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "validator": {
            "type": "http",
            "url": "https://swatchdog-mcp-970396648818.us-central1.run.app/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http validator https://swatchdog-mcp-970396648818.us-central1.run.app/mcp
```

## When to use it
- catch an off-palette color the agent dropped into a component
- swap a made-up radius for the nearest token on your scale
- match spacing and font sizes to your design system
- check markup against a ready pack without writing tokens
- get the exact token value instead of the agent's guess

## Example prompts
- Check this CSS against my tokens from `tailwind.config.js`
- Run `check_design_drift` on the generated markup and tell me what to replace
- Compare the styles with the `studio-blue-hour` pack using `check_drift`

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821

---
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