Design drift check
check_design_driftCompare design tokens from the design tool with what the code uses. Pass design (W3C design tokens JSON, Tokens Studio JSON, flat key/value JSON, or CSS variables) and code (CSS, SCSS or a Tailwind theme with custom properties or hex values). Both are parsed forgivingly. Returns findings grouped by severity with a count summary: design tokens missing from code, code tokens missing from design, same name with a different value (color distance in deltaE, px and rem normalized at 16px), different names with identical values (rename candidates), near-duplicate colors inside the code (deltaE under 2), hard-coded values in code that equal a token exactly, and values that are close to but not exactly a token, naming the token. No AI, nothing stored.
Tool call template
Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.
{
"id": 1,
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"arguments": {
"design": "<design>",
"code": "<code>"
},
"name": "check_design_drift"
}
}Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | CSS, SCSS or Tailwind theme text from the codebase. | |
| design | Yes | Design tokens: W3C or Tokens Studio JSON, flat key/value JSON, or CSS variables. |