Compare two design systems
designesy_compareCompare two live design systems by URL to detect token additions, removals, renames, value changes, and contrast drift for migration or reference analysis.
Instructions
Diff two design systems from live URLs — the only URL-scoped design-token diff engine. Fetches both URLs in parallel, extracts their :root custom properties, and produces a structured diff across 8 dimensions: tokens added (in A not B), removed (in B not A), renamed (heuristic Levenshtein ≤ 2), value-changed (same name, different value), scale-stop-changed (spacing/radius/color scale steps), contrast-drift-per-pair (WCAG contrast ratio change for shared color tokens), structure-delta (token count + category distribution), and score-delta (runs /score on both URLs and diffs). Use this to answer 'what actually changed between two design systems' or 'how does our design system differ from a reference'. When NOT to use: for single-site drift detection, use designesy_drift_score; for continuous monitoring, use designesy_monitor_score. Executable — fetches both URLs, extracts CSS + tokens, computes diff. No browser needed. Returns JSON: { ok, urlA, urlB, score (0-100, diff completeness), grade, pass, warn, fail, total, tokensA, tokensB, added[], removed[], renamed[], valueChanged[], scaleDiff, structureDelta, contrastDrift[], scoreDelta, checks[] }. Results cached ~24h server-side per URL pair.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| urlA | Yes | First URL to compare (e.g. your design system). | |
| urlB | Yes | Second URL to compare (e.g. a reference or competitor). |