Overview
Designed and implemented an AI-assisted workflow to audit UI screens for adherence to our design system, covering typography, color, and visual consistency. The process reduced what used to be weeks of manual checks into hours of AI-powered analysis, giving designers and developers objective, token-based feedback.
Role
AI-augmented Designer
Skills
The Problem
Before this project:
Consistency checks were manual, slow, and subjective.
Small color mismatches or off-spec typography often slipped into production.
Reporting was time-consuming and prone to ambiguity for developers.
A full audit of 20+ screens could take 2–3 weeks.
The result was longer QA cycles, inconsistencies slipping into production, and a higher cognitive load for both designers and front-end developers.
My Role
Defined the audit scope based on design system principles (typography, color, spacing, alignment).
Translated brand style guide tokens (colors, typography specs) into machine-readable formats.
Built an automated analysis pipeline using Figma MCP with an AI code agent.
Designed the reporting structure so that results were clear to both designers and developers.
Led the iteration process, refining detection thresholds and output formats to balance precision with usability.
Usage of browser agents for research
Tweaked components using Figma MCP + AI code agent
Published tweaks using Figma MCP + AI code agent + CI/CD
Impact
Traditionally, building and validating a design system takes:
3–6 months for a designer-developer team to document, align, and QA components.
Manual audits of multiple product screens could consume 2–3 weeks per release cycle.
With this automated audit system:
The entire visual consistency check for 20+ screens now runs in minutes instead of days.
Designers can focus on creative problem-solving rather than repetitive inspection.
Developers receive objective, token-based feedback, reducing back-and-forth and rework.
The approach compresses what used to take weeks into hours, setting a precedent for faster, more reliable design system rollouts.