Give your AI agents a visual system guide so they write brand-consistent styles instead of guessing color values, radii, and layouts.

Tested live: claude.ai connector run → Full test transcript, all green: part-b-transcript.txt

Swatchdog is a Model Context Protocol (MCP) server that runs on-demand CSS design-token drift checks for AI coding assistants (Claude Code, Claude Desktop, Cursor, Google Antigravity, and other MCP-aware clients — plus claude.ai via a connector).

When your agent asks, Swatchdog checks the generated CSS against a chosen design pack — or your own tokens — and returns the off-token color, radius, spacing, and type values with the closest matching token to use instead. The check is on-demand and the loop is yours: Swatchdog reports drift; it does not intercept writes or change your code.

AI coding agents are fast, but blind to your design system — they invent off-brand spacing, off-palette colors, and ignore your scales.

Swatchdog adds an on-demand drift check to the agentic loop. When connected:

1. The agent detects your design tokens (or you pick a pack).
2. The agent calls Swatchdog to check the CSS it generated.
3. Swatchdog returns precise suggestions (e.g., "Use radius.sm (5px) instead of 7px").
4. The agent applies the fixes. The loop, and the review, stay yours.

Check your styles against a curated Swatchdog design family — Workbench, Showcase, Terminal, plus the free Studio sandbox. Fast, zero-configuration checks.

Check styles against your project's own custom design system.

• The agent extracts tokens locally from files like tailwind.config.js or your CSS variables and passes them as parameters.
• Content-only and stateless — your source code and custom tokens are never stored.
• Free to try on the connector endpoint (no key — shared, rate-capped lane), or uncapped with any paid key, including the standalone $12 drift-check license.

A dedicated, trimmed BYO-only surface built for chat clients:

• One read-only tool — check_design_drift(reference_tokens, code) — returning a compact, machine-first report sized for an agent's fix-and-recheck loop.
• No key required: keyless calls ride a shared free lane (best-effort, rate-capped with a clean 429 + Retry-After at capacity). A paid key in the Authorization header gets its own uncapped lane.
• In claude.ai: add it as a custom connector (Settings → Connectors → Add custom connector, URL below, no credentials).

Swatchdog doesn't just flag drift; it maps each off-token value to the closest valid token:

• Color: off-palette hex/rgb → the nearest theme token.
• Radius: off-scale border-radii → the nearest radius token.
• Spacing & Typography: off-scale padding/margin, font-size, and font-family.

Note: checks currently cover hex and standard color formats. HSL-channel representation and complex multi-file token resolution are planned for Phase 2.

check_drift — main endpoint. Checks a CSS string against a pack or a custom token set.

• content (string, required) — the CSS/markup to check.
• paletteId (string, optional) — a pack id (e.g. studio-blue-hour). Pack mode.
• tokens (object, optional) — your own token set. BYO mode (any paid key).
• source (string, optional) — telemetry tag (pack, css, tailwind).

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 check.
• Returns per-violation: axis · found value · expected token + value · location.

If a free caller attempts a premium or BYO check on the main endpoint, the tool returns a structured JSON upgrade payload with where to get a key — at swatchdog.dev.

All checks are on-demand and transient.

No source code, files, or custom tokens are ever stored on our servers. We log minimal usage metadata — the source tag, which pack, and the finding outcome, tied to the account the key belongs to — never your license key, your source code, or your tokens.

Created and maintained by swatchdog.dev · privacy policy: swatchdog.dev/privacy.html · support: [email protected]

Main endpoint (packs + BYO, bearer key — the free sandbox key shown):

{
  "mcpServers": {
    "swatchdog-sandbox": {
      "type": "http",
      "url": "https://swatchdog-mcp-970396648818.us-central1.run.app/mcp",
      "headers": { "Authorization": "Bearer swt_sandbox_studio" }
    }
  }
}

Connector endpoint ( BYO-only, no key needed — add a key to remove the rate cap):

{
  "mcpServers": {
    "swatchdog-check": {
      "type": "http",
      "url": "https://swatchdog-connector-970396648818.us-central1.run.app/mcp"
    }
  }
}

In claude.ai: Settings → Connectors → Add custom connector → paste the connector URL above — no credentials needed.