{
  "markdown": "# Swatchdog MCP Server \n\n> Give your AI agent a visual system to build against — so it writes brand-consistent styles instead of guessing colors, radii, spacing, and type.\n\n**✅ Now in the [Anthropic Connector Directory](https://claude.ai/directory/connectors/swatchdog).** In Claude, open **Settings → Connectors**, search **swatchdog**, and click **Connect** — no URL, no key, no setup.\n\n---\n\n## See it in action\n\n- **Live claude.ai run:** [connector session walkthrough →](https://github.com/swatchdog-dev/swatchdog-mcp/blob/main/docs/demo/live_session.md)\n- **Full test transcript (all green):** [part-b-transcript.txt →](https://github.com/swatchdog-dev/swatchdog-mcp/blob/main/docs/demo/part-b-transcript.txt)\n\nhttps://github.com/user-attachments/assets/6ae8b242-d6c7-4a29-8892-27b067835308\n\n---\n\n## What it is\n\n**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.\n\nWhen 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.**\n\n---\n\n## Why Swatchdog\n\nAI 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:\n\n1. The agent sets a standard — your own tokens, or a pack.\n2. It calls Swatchdog on the CSS it generated.\n3. Swatchdog returns precise fixes (e.g. *\"use `radius.sm` (5px) instead of 7px\"*).\n4. The agent applies them. The loop, and the review, stay yours.\n\n**How is it different from a linter like ESLint?**\nA 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.\n\n**Can't I just give my agent the tokens, or a `design.md`?**\nYou 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.\n\n---\n\n## Modes\n\n**Pack mode** — check against a curated Swatchdog family (**Workbench, Showcase, Terminal**, plus the free **Studio** sandbox). Zero-config.\n\n**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.\n\n**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.\n\n> *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.*\n\n---\n\n## Tools\n\n**`check_design_drift`** — connector endpoint · BYO-only · keyless-friendly\n\n- `reference_tokens` *(object, required)* — your design tokens, e.g. `{\"color\":{\"primary\":\"#b06ed0\"},\"radius\":{\"md\":\"6px\"}}`\n- `code` *(string, required)* — the CSS/markup to check\n- Returns, per violation: axis · found value · expected token + value · location\n\n**`check_drift`** — main endpoint · checks CSS against a pack or a custom token set\n\n- `content` *(string, required)* — the CSS/markup to check\n- `paletteId` *(string, optional)* — a pack id (e.g. `studio-blue-hour`); pack mode\n- `tokens` *(object, optional)* — your own token set; BYO mode\n- `source` *(string, optional)* — telemetry tag (`pack`, `css`, `tailwind`)\n\n---\n\n## Pricing — one-time, no subscriptions\n\n| Tier | What you get | Where |\n|---|---|---|\n| **Free** — keyless | BYO checks on a shared, rate-capped lane | connector endpoint |\n| **Free** — sandbox key `swt_sandbox_studio` | pack checks vs the **Studio** family | main endpoint |\n| **$12** — drift-check license | BYO checks, your own uncapped key | both endpoints |\n| **$19 / $49** — pack or bundle | premium families (Workbench · Showcase · Terminal) **+** a paid key | both endpoints |\n\nOn the main endpoint, a free caller attempting a premium or BYO check gets a structured upgrade payload pointing to [swatchdog.dev](https://swatchdog.dev).\n\n---\n\n## Connect\n\n> **In Claude (easiest):** Settings → Connectors → find **swatchdog** in the directory → **Connect**. Nothing to paste, no key.\n\n\n**Other MCP clients** (Cursor, Claude Code, Claude Desktop) — add one of these to your MCP config:\n\nConnector endpoint — BYO-only, keyless (add a key to remove the rate cap):\n\n```json\n{\n  \"mcpServers\": {\n    \"swatchdog-check\": {\n      \"type\": \"http\",\n      \"url\": \"https://swatchdog-connector-970396648818.us-central1.run.app/mcp\"\n    }\n  }\n}\n```\n\nMain endpoint — packs + BYO, bearer key (free sandbox key shown):\n\n```json\n{\n  \"mcpServers\": {\n    \"swatchdog-sandbox\": {\n      \"type\": \"http\",\n      \"url\": \"https://swatchdog-mcp-970396648818.us-central1.run.app/mcp\",\n      \"headers\": { \"Authorization\": \"Bearer swt_sandbox_studio\" }\n    }\n  }\n}\n```\n\n*Prefer to add the connector to claude.ai manually? Settings → Connectors → Add custom connector → paste the connector URL above → leave auth empty.*\n\n---\n\n## Privacy\n\nAll 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](https://swatchdog.dev/privacy.html).\n\n---\n\nCreated and maintained by [swatchdog.dev](https://swatchdog.dev) · Support: hey@swatchdog.dev · [A Ziola Project](https://www.ziola.dev/index.html)\n",
  "bytes": 6262,
  "sha": "31e0b5d7c7e764f86a37b5701e68cb8341ceec1e0f58986f521d15858eeb54ac",
  "repo_slug": "swatchdog-dev/swatchdog-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_dev_swatchdog_validator_0950c2e3/readme"
}