The full upstream README, mirrored here for reference. Install config, tool schemas, adoption signals, and an original overview live on the Validator listing page.
Give your AI agent a visual system to build against — so it writes brand-consistent styles instead of guessing colors, radii, spacing, and type.
✅ Now in the Anthropic Connector Directory. In Claude, open Settings → Connectors, search swatchdog, and click Connect — no URL, no key, no setup.
https://github.com/user-attachments/assets/6ae8b242-d6c7-4a29-8892-27b067835308
Swatchdog is a Model Context Protocol (MCP) server that runs on-demand design-token drift checks for AI coding assistants — Claude Code, Claude Desktop, Cursor, Google Antigravity, other MCP clients, and claude.ai via the connector.
When your agent asks, Swatchdog checks the generated CSS against a design system — a curated pack or your own tokens — and returns every off-token color, radius, spacing, and type value, each with the closest matching token to use instead. The check is on-demand and the loop is yours: Swatchdog reports drift; it never intercepts writes or changes your code.
AI agents are fast but blind to your design system — they invent off-brand spacing, off-palette colors, and quietly ignore your scales. Swatchdog adds a deterministic drift check to the build loop:
radius.sm (5px) instead of 7px").How is it different from a linter like ESLint?
A linter checks whether your code is valid; Swatchdog checks whether your design is on-system. A linter happily passes color: #ff00ff because it's valid CSS — it has no idea magenta isn't in your palette. Swatchdog catches exactly that, even when the code is flawless. Lint catches broken code; Swatchdog catches broken design.
Can't I just give my agent the tokens, or a design.md?
You can, and it'll still drift. Agents approximate and interpolate even with the rules right in front of them — having the rules isn't the same as following them. Swatchdog verifies conformance in the build loop, where the drift actually happens.
Pack mode — check against a curated Swatchdog family (Workbench, Showcase, Terminal, plus the free Studio sandbox). Zero-config.
BYO mode — check against your own design system. The agent extracts your tokens (from tailwind.config.js, CSS variables, etc.) and passes them as parameters. Content-only and stateless — your code and tokens are never stored. Free to try on the keyless connector lane, or uncapped with a $12 license.
Intelligent suggestions — Swatchdog doesn't just flag drift, it maps each off-token value to the nearest valid token: color (hex/rgb → nearest theme color), radius, spacing, font-size, and font-family.
Coverage note: checks currently cover hex and standard color formats. HSL-channel representation and complex multi-file token resolution are on the Phase 2 roadmap.
check_design_drift — connector endpoint · BYO-only · keyless-friendly
reference_tokens (object, required) — your design tokens, e.g. {"color":{"primary":"#b06ed0"},"radius":{"md":"6px"}}code (string, required) — the CSS/markup to checkcheck_drift — main endpoint · checks CSS against a pack or a custom token set
content (string, required) — the CSS/markup to checkpaletteId (string, optional) — a pack id (e.g. studio-blue-hour); pack modetokens (object, optional) — your own token set; BYO modesource (string, optional) — telemetry tag (pack, css, tailwind)| Tier | What you get | Where |
|---|---|---|
| Free — keyless | BYO checks on a shared, rate-capped lane | connector endpoint |
Free — sandbox key swt_sandbox_studio | pack checks vs the Studio family | main endpoint |
| $12 — drift-check license | BYO checks, your own uncapped key | both endpoints |
| $19 / $49 — pack or bundle | premium families (Workbench · Showcase · Terminal) + a paid key | both endpoints |
On the main endpoint, a free caller attempting a premium or BYO check gets a structured upgrade payload pointing to swatchdog.dev.
In Claude (easiest): Settings → Connectors → find swatchdog in the directory → Connect. Nothing to paste, no key.
Other MCP clients (Cursor, Claude Code, Claude Desktop) — add one of these to your MCP config:
Connector endpoint — BYO-only, keyless (add a key to remove the rate cap):
Main endpoint — packs + BYO, bearer key (free sandbox key shown):
Prefer to add the connector to claude.ai manually? Settings → Connectors → Add custom connector → paste the connector URL above → leave auth empty.
All checks are on-demand and transient. No source code, files, or tokens are ever stored on our servers. We log only minimal usage metadata — a source tag, which pack, and the finding count — never your license key, your code, or your tokens. Full policy: swatchdog.dev/privacy.html.
Created and maintained by swatchdog.dev · Support: hey@swatchdog.dev · A Ziola Project