AI agent for web designers
Design System Drift Repair Agent
Working design files match the approved design library, without breaking layouts or intentional exceptions.
What it does
Design teams that serve several clients keep a library of approved tokens, such as colors, type sizes and spacing, plus approved components. Over time working files drift: a slightly different blue, an old button, the wrong heading size. This agent parses working files, lists every mismatch with the library, and matches each one to the approved token or component. It skips anything on the exception list. It patches safe substitutions in a review copy, renders the original and the patched version side by side, and checks that the layout still holds. If a fix breaks the layout, for example a heading overflows on mobile, it undoes that patch and tries a component-level fix instead. The design lead reviews and merges the repair set. Edge case: a mismatch that looks intentional but is not on the exception list is asked about, not fixed.
How it works
Follow the arrows from top to bottom. The orange dashed arrow is the loop: when a check fails, the agent goes back and tries again.
Read the steps as a list
- Library audit or pre-handoff check
- Parse working files and list token and component mismatches
- Match each mismatch to the approved token or component
- Is this an intentional exception?If not: skip it and record why. Back to step 3.
- Patch the substitution in a review copy
- Render original and patched side by side
- Does the layout still hold?If not: undo, try a component-level fix. Back to step 5.
- Collect all passing patches into a repair set
- Design lead reviews and merges the repair setThe agent waits here for your OK.
- Report fixed, skipped and unresolved mismatches
How it decides
It scores each mismatch by how certain the mapping is (exact token neighbour versus guess) and starts with the most certain ones. After every patch it renders and compares; a broken layout means undo and try the component swap; an exception on the list is never touched.
- Which mismatch to fix first: highest-confidence mappings first.
- Token swap or component swap: token first; component swap only when the token swap breaks layout.
- Skip or fix: never fix listed exceptions; ask when a mismatch looks intentional but is not listed.
Make it yours
Every agent is a starting point. You choose these settings for your own situation.
- Minimum match confidence before a token swap is proposed (default 90%)
- Exception list of intentional deviations per client or sub-brand
- Screen sizes rendered for the layout check (default 360, 768 and 1440 pixels wide)
- When the audit runs (default before every handoff and monthly)
- Who merges the repair set (default the design lead)
What keeps you in control
It always asks you first
- Changing master tokens
- Merging repaired files into production
- Altering intentional exceptions
Hard limits
- Patches go to a review copy only.
- Exceptions are never changed without approval.
It stops when
- Done: every mismatch is fixed, skipped with a reason, or queued.
- Blocked: the approved library itself is inconsistent.
Set it up
We guide you through the set-up, step by step
Members get the full set-up guide for this agent. No technical skills needed: you copy, paste and upload.
- One set of instructions to paste into your AI, with the clicks for ChatGPT, Claude, Microsoft 365 Copilot, Gemini and Grok
- The agent then walks you through connecting your own data, one source at a time
- A downloadable copy with the flow chart, the rules and the full guide
