validator — Claude Code MCP server: design-token drift checks
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.
claude mcp add --transport http validator https://swatchdog-mcp-970396648818.us-central1.run.app/mcpWhat validator 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.
What it helps with
- 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 for the agent
- Check this CSS against my tokens from
tailwind.config.js - Run
check_design_drifton the generated markup and tell me what to replace - Compare the styles with the
studio-blue-hourpack usingcheck_drift
How to install validator
Platform CLI: remote server
claude mcp add --transport http validator https://swatchdog-mcp-970396648818.us-central1.run.app/mcpPlatform CLI: remote server
codex mcp add validator --url https://swatchdog-mcp-970396648818.us-central1.run.app/mcpConfig file
{
"mcpServers": {
"validator": {
"url": "https://swatchdog-mcp-970396648818.us-central1.run.app/mcp"
}
}
}Config file
{
"servers": {
"validator": {
"type": "http",
"url": "https://swatchdog-mcp-970396648818.us-central1.run.app/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http validator https://swatchdog-mcp-970396648818.us-central1.run.app/mcpStep 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 validator
How do I install validator in Claude Code?
Run claude mcp add --transport http validator https://swatchdog-mcp-970396648818.us-central1.run.app/mcp. In Claude you can instead go to Settings → Connectors, search for swatchdog and hit Connect.
What does validator do?
It scans CSS and markup for values outside a design system: color, radius, spacing, font size and font family. Each violation comes back with the closest valid token to use instead.
How is validator different from a linter like ESLint?
A linter asks whether the code is valid and will pass color: #ff00ff since that is legal CSS. validator asks whether the value belongs to your palette, so it flags that color even in flawless code.
