Validator
Catch CSS design-token drift (color, radius, spacing, typography) against a Swatchdog pack before you ship UI changes.
Overview
dev.swatchdog/validator is an MCP server for the Ship phase that compares declared CSS color, radius, spacing, and typography tokens against a chosen Swatchdog design pack on demand.
What is this MCP server?
- Compares declared CSS color, border-radius, spacing, and typography tokens to a chosen design pack
- On-demand MCP checks via streamable HTTP remote (Google Cloud Run endpoint)
- Targets solo builders who want agents to flag token misuse without manual design QA
- Open-source server in swatchdog-dev/swatchdog-mcp repository
- Drift-focused workflow—not a full visual regression or screenshot suite
- MCP server version 1.0.0
- Checks four token families: color, radius, spacing, and typography
- Remote transport: streamable-http on Google Cloud Run
What problem does it solve?
Agents and fast iteration quietly introduce CSS values that no longer match your design pack, and manual spot-checks miss drift until the UI looks off-brand.
Who is it for?
Solo builders with a Swatchdog (or pack-backed) token system who want agent-driven consistency checks in Claude Code or Cursor before release.
Skip if: Teams without a defined token pack, or anyone who only needs end-to-end visual regression across browsers.
What do I get? / Deliverables
After you add the MCP remote, your coding agent can run pack-aligned token drift checks during review so inconsistent styles surface before you ship.
- On-demand drift results for color, radius, spacing, and type vs the chosen pack
- Actionable mismatches the agent can fix in stylesheets or token files
Recommended MCP Servers
Journey fit
Token-vs-pack validation is a pre-release quality gate—best shelved under Ship where you review consistency before launch. Review subphase covers design-system checks and UI audits that block bad merges, which is exactly what on-demand drift checks support.
How it compares
MCP design-token drift checker, not a general-purpose linter skill or Figma-to-code plugin.
Common Questions / FAQ
Who is dev.swatchdog/validator for?
It is for indie frontend builders and design-system owners who use AI coding assistants and want automated checks that CSS tokens still match a Swatchdog pack.
When should I use dev.swatchdog/validator?
Use it during Ship-phase review when you change theme variables, component styles, or token files and need a quick drift report before merge or deploy.
How do I add dev.swatchdog/validator to my agent?
Register the streamable HTTP MCP remote URL from the server schema (swatchdog-mcp on Google Cloud Run) in your client’s MCP settings, then invoke drift-check tools against your pack and CSS sources.