Using AI to assist with design & code automations

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, and this automation allows them that opportunity.

The team decides 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.

Services

Design Ops, Design systems, Product Design

Design drift review dashboard for breadcrumb components, comparing Figma specs to code for color, icons, and font weight.

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 when evaluating complex variants.

A designer spends ~45–60 minutes per PR resulting in ~24 hours/month across 10+ designers. Plus the tax of context-switching out of deep work to reviewing and testing. Finding drift means creating tickets for developers, or a designer updates and republishes the design system.

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 when evaluating complex variants.

A designer spends ~45–60 minutes per PR resulting in ~24 hours/month across 10+ designers. Plus the tax of context-switching out of deep work to reviewing and testing. Finding drift means creating tickets for developers, or a designer updates and republishes the design system.

Desktop, Laptop, tablet and mobile screen mockups displaying the custom website redesign for Heights Wellness Retreat, highlighting a modern layout and refined typography.

Solution

A four-skill pipeline was created: Evaluates → Tickets → Fixes → Verifies with human-in-the-loop consideration. Agent outputs are 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.

A four-skill pipeline was created: Evaluates → Tickets → Fixes → Verifies with human-in-the-loop consideration. Agent outputs are 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.

Website section previews and UI layout components for Heights Wellness Retreat
Website section previews and UI layout components for Heights Wellness Retreat

‹ Marma Head Spa Web Presence Audit