validator

Swatchdog MCP 服务

为你的 AI Agent 提供一套可供参照的视觉系统，让它编写符合品牌规范的样式，而不是猜测颜色、圆角、间距和字体。

✅ 现已收录于 Anthropic Connector Directory。 在 Claude 中打开 设置 → 连接器，搜索 swatchdog，然后点击 连接——无需 URL、密钥或设置。

---

查看实际效果

• claude.ai 实时运行： 连接器会话演示 →
• 完整测试记录（全部通过）： part-b-transcript.txt →

https://github.com/user-attachments/assets/6ae8b242-d6c7-4a29-8892-27b067835308

---

项目简介

Swatchdog 是一个模型上下文协议（MCP）服务，可按需为 AI 编码助手运行设计令牌偏差检查，支持 Claude Code、Claude Desktop、Cursor、Google Antigravity、其他 MCP 客户端，以及通过连接器接入的 claude.ai。

当你的 Agent 发出请求时，Swatchdog 会将生成的 CSS 与设计系统进行比对——无论是精选方案包还是你自己的令牌——并返回所有偏离令牌的颜色、圆角、间距和字体值，同时为每项提供最接近的替代令牌。检查按需运行，流程由你掌控：Swatchdog 只报告偏差；它不会拦截写入或修改你的代码。

---

为什么选择 Swatchdog

AI Agent 速度很快，但看不懂你的设计系统——它们会擅自设计不符合品牌规范的间距、超出调色板的颜色，还会悄悄忽略你的比例规范。Swatchdog 在构建流程中加入确定性的偏差检查：

1. Agent 设定一套标准——使用你自己的令牌或方案包。
2. Agent 对生成的 CSS 调用 Swatchdog。
3. Swatchdog 返回精确的修正建议（例如 “使用 radius.sm（5px），而不是 7px”）。
4. Agent 应用修正。流程和审核仍由你掌控。

它与 ESLint 这样的代码检查工具有何不同？ 代码检查工具会检查代码是否有效；Swatchdog 会检查设计是否符合系统规范。代码检查工具会欣然通过 color: #ff00ff，因为它是有效的 CSS——它根本不知道洋红色不在你的调色板中。Swatchdog 能准确发现这一点，即使代码本身毫无瑕疵。代码检查工具发现的是代码错误；Swatchdog 发现的是设计错误。

我不能直接把令牌或 design.md 提供给 Agent 吗？ 可以，但设计仍会偏离。即使规则就在眼前，Agent 仍会近似和插值——知道规则不等于遵循规则。Swatchdog 会在偏差实际发生的构建流程中验证是否符合规范。

---

模式

方案包模式——对照 Swatchdog 精选系列（Workbench、Showcase、Terminal，以及免费的 Studio 沙箱）进行检查。零配置。

BYO 模式——对照你自己的设计系统进行检查。Agent 会提取你的令牌（来自 tailwind.config.js、CSS 变量等），并将其作为参数传入。仅处理内容且无状态——你的代码和令牌绝不会被存储。可通过无需密钥的连接器通道免费试用，也可使用 $12 许可证解除限制。

智能建议——Swatchdog 不只会标记偏差，还会将每个偏离令牌的值映射到最接近的有效令牌：颜色（hex/rgb → 最接近的主题颜色）、圆角、间距、字号和字体系列。

覆盖范围说明：目前检查支持 hex 和标准颜色格式。HSL 通道表示法和复杂的多文件令牌解析已列入第二阶段路线图。

---

工具

check_design_drift — 连接器端点 · 仅支持自带令牌 · 适合无密钥使用

• reference_tokens (对象，必填) — 你的设计令牌，例如 {"color":{"primary":"#b06ed0"},"radius":{"md":"6px"}}
• code (字符串，必填) — 要检查的 CSS/标记
• 每项违规返回：维度 · 检测到的值 · 预期令牌及其值 · 位置

check_drift — 主端点 · 根据套件或自定义令牌集检查 CSS

• content (字符串，必填) — 要检查的 CSS/标记
• paletteId (字符串，可选) — 套件 ID（例如 studio-blue-hour）；套件模式
• tokens (对象，可选) — 你自己的令牌集；自带令牌模式
• source (字符串，可选) — 遥测标签（pack、css、tailwind）

---

定价 — 一次性付费，无需订阅

级别	包含内容	端点
免费 — 无密钥	在共享的限速通道上进行自带令牌检查	连接器端点
免费 — 沙盒密钥 swt_sandbox_studio	针对 Studio 系列进行套件检查	主端点
$12 — 漂移检查许可证	自带令牌检查，使用你自己的不限量密钥	两个端点
$19 / $49 — 套件或组合包	高级系列（Workbench · Showcase · Terminal）+ 付费密钥	两个端点

在主端点，免费用户尝试进行高级或自带令牌检查时，会收到结构化的升级信息，其中包含指向 swatchdog.dev 的链接。

---

连接

在 Claude 中（最简单）： Settings → Connectors → 在目录中找到 swatchdog → Connect。无需粘贴任何内容，也无需密钥。

其他 MCP 客户端（Cursor、Claude Code、Claude Desktop）——将以下任一项添加到你的 MCP 配置中：

连接器端点——仅支持自带令牌，无需密钥（添加密钥即可解除限速）：

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

主端点——套件 + 自带令牌，使用 Bearer 密钥（显示免费沙盒密钥）：

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

想要在 claude.ai 中手动添加连接器？Settings → Connectors → Add custom connector → 粘贴上方的连接器 URL → 将身份验证留空。

---

隐私

所有检查均按需进行，且不会持久保留。我们的服务器绝不会存储源代码、文件或令牌。 我们只记录最少的使用元数据——来源标签、所用套件和发现数量——绝不会记录你的许可证密钥、代码或令牌。完整政策：swatchdog.dev/privacy.html。

---

由 swatchdog.dev 创建并维护 · 支持：[email protected] · A Ziola Project