Summary
A pipeline that identifies drifts between design system and code helps designers craft high-fidelity prototypes. The use of AI tools is bridging roles like Design and Engineering closer together. Naturally, designers will work closer with the code base, and this automation allows them that opportunity. The teams decide on what to fix: the code or design system. This tool was created to bring a 8+ year old design system up to date with the codebase.
See demo
Services
Design Ops, Design systems, Product Design
Industry
B2B SaaS, Design System
Challenge
The Design System and Code base were both treated as individual sources of truth, but nothing enforced 1:1 parity. Audits were tedious, manual reviews that don't scale well when evaluating complex variants. A designer spends ~45–60 minutes per PR resulting in ~24 hours/month across 10+ designers. Plus the tax context-switching out of deep work to reviewing and testing. Finding drift meant manually creating a tickets for developers, or designers update and republish the design system.
Solution
A four-skill pipeline was created: Evaluates → Tickets → Fixes → Verifies with human-in-the-loop consideration. The skill made Agent outputs reviewable and actionable for humans.
Evaluates compares Design system ↔ Code property-by-property with severity.
Designer reviews.
Tickets are created in Jira if the Design system or Code needs updates. Engineers can pick up tickets as per usual way of working.
Fixes are applied to a branch in the design system file. Another agent verifies and re-checks the work done so it doesn’t introduce new drift.
Designer reviews and merges the branch.
