Enter password to view case study
What I created
AI Skills for Claude to audit design system, fix component & token usage in designs
I observed
Designers are better at discovering minute UI inconsistencies than engineers
Engineers are at capacity to address all UI bugs before release
This was causing frustration across Product, Design and Engineering teams. Designers were not content with the product polish, Product wanted to release more features and Engineering was swamped with more tickets.
My insight
I have a unique mix of skillset with my engineering & design background
I can scale what I learnt using AI to improve the design team
I have been adopting AI tools like Claude Code, Figma's MCP Server and playing with our internal codebase for about an year. I had knowledge on where AI can help the design team and where it fails. Faster deployment of UI bugs was one of the problems my skillset could help the team.
Designing how to code for designers
I learnt how to setup our codebase locally with frontend engineers
Due to my cross-functional work at Glassdoor, I was always working with a few frontend engineers. I reached out to understand the setup for their individual teams. With my engineering background, I could understand what a designer can use across. I was designing programming for fellow designers.
Claude (any AI) is stochastic when it uses Figma, creating unpredictable results
It is also inefficient, having to load Design System context every time a chat starts
This flow is very inefficient for a designer when Claude has to spend 5-10 mins re-understanding how our design system works. Furthermore, due to it's stochastic nature, every instance results in different interpretation of our UI.
What I built
Bespoke Claude Skills
Design Audit Skill which references the designer's designs with Design System guidelines to recommend proper component, token & styling usage
Figma Component Library references with weekly updates on any Design System updates
Dev kit guide for designers and their AI tools
Impact
20% Increase in UI bugs being fixed before releases
With initial adoption at 2 designers, we were able to put 2-3 hours of our week before release to fix and push code reviews. I am sharing updated reports with other teams to adopt our processes.
Based on the data from our JIRA boards.
What's next?
Building design-to-code review skill
Once designers have documented the UI updates, I am working on a pipeline that creates git commits which can be reviewed by Frontend Engineers. This ensures that there are 2 humans in the loop: a designer at the beginning and the engineer at the end.
Inviting design experts to try and provide feedback
Job seekers were spending a lot of time trying to find answers to their core questions like work culture, career aspect but the pages merely showed the data, not the underlying story.
My growth
I am working at the intersection of Design, Engineering & AI
Over the last few years, I have observed that the future for Design is to dabble in the 3 disciplines of product, design & engineering simultaneously. Along with that insight, I want to build my teams to have these broader skills. The more experience I gain with such endeavors, I can adapt & perform to be best with the newest technology. And my teams grow with me ⚡.
That's as much I can share
I want to be careful with what I share about our codebase here. I can share more about my drive for innovation, how I follow through on these initiatives and much more when we speak.