MCP design system validator for agentic coding. Detects design drift in agent-built UI.
SaferSkills independently audited Swatchdog Mcp (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
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
https://github.com/user-attachments/assets/6ae8b242-d6c7-4a29-8892-27b067835308
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:
A linter checks whether your code is valid and well-formatted. 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: colors, spacing, radii, and type that have drifted from your reference, even when the code is flawless. Lint catches broken code; swatchdog catches broken design.
You can, and it'll still drift. Agents approximate and interpolate even with the rules right in front of them — a tokens file or a design.md is instruction. Having the rules isn't the same as following them. swatchdog verifies conformance in the build loop, where the drift actually happens.
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.
tailwind.config.js or your CSSvariables and passes them as parameters.
uncapped with any paid key, including the standalone $12 drift-check license.
A dedicated, trimmed BYO-only surface built for chat clients:
check_design_drift(reference_tokens, code) — returning acompact, machine-first report sized for an agent's fix-and-recheck loop.
with a clean 429 + Retry-After at capacity). A paid key in the Authorization header gets its own uncapped lane.
connector, URL below, no credentials).
Swatchdog doesn't just flag drift; it maps each off-token value to the closest valid token:
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.| Lane | What you get | Where |
|---|---|---|
Free — sandbox key swt_sandbox_studio | pack checks vs the Studio family | main endpoint |
| Free — keyless | BYO checks, shared rate-capped lane | connector endpoint |
| $12 — drift-check license | BYO checks, your own uncapped key | both endpoints (key sent as a bearer header) |
| $19 / $49 — pack or bundle | premium families (Workbench, Showcase, Terminal) + a paid key (BYO included) | both endpoints |
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 (In process: Pending Connector Submission Approval 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 process: Pending connector submission approval] In claude.ai: Settings → Connectors → Add custom connector → paste the connector URL above — no credentials needed.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.