Before letting AI take over our work, I decided to hand over one of my own tedious tasks to AI as an experiment.
The problem
A few weeks ago, I was requested to review a large collection of legacy custom components—spread across different repositories from multiple libraries—to ensure they were fully design-system compliant. The expected timeline for completion less than two weeks.
On the surface, visual QA isn’t difficult. The real challenge lies in the hidden issues—components that appear fine but contain hardcoded CSS values for colors, spacing, typography, or border-radius instead of using design tokens. Detecting these through DevTools and manual inspection is tedious and leaves plenty of room for oversight.
Hypothesis
What if there was a tool that could scan each component, detect hardcoded values, and flag them instantly?
Approach & Challenges
After some (read: very little) thought, I decided to build a Chrome extension that could handle both the visual and technical review in one go. The only problem? I’d have to build it myself.
My JavaScript skills were… let’s just say “underdeveloped.” So, I turned it into a personal side project—a weekend deep dive. I spent after-hours sessions experimenting with Gemini CLI to explore possible solutions, making sure that if it failed, I wouldn’t be wasting the company’s time or resources.
Proof of Concept
After about an hour of trial and error with Gemini, I had a working prototype. It could detect if the component has:
- Hex color codes instead of color variables
- Pixel values for margins and paddings instead of spacing tokens
Obviously, it wasn’t pretty (Gemini’s design sense leaves much to be desired), but it worked.
Refinement
I initially planned to avoid any UI design work, but eventually created a quick interface in Figma and handed it over to Cursor for implementation. This gave the tool a much more polished and user-friendly appearance.
Validation
After a few iterations, the extension became stable and reliable. It allowed me to review hundreds of components in a single day—a task that would have otherwise taken roughly 10 days to complete manually.
Enhancements
Originally, the extension only detected hardcoded CSS values. Later, I added:
- A custom variable detection feature to flag user defined variables so it can detect not only the hardcoded values but deprecated tokens as well.
- A settings screen to define what the extension to define those variables to flag.
- A DevTools panel to preview real-time token replacements for flagged issues.
Impact
By automating the review process, I reduced a 10-day manual audit to a single day—freeing up time for more important (and more interesting) work.
Distribution
lthough the extension was initially built for personal use, I later decided to make it publicly available. After releasing it on GitHub, I published it to the Chrome Web Store so anyone could benefit from it. If it saves even a few people from repetitive manual reviews, it’s worth it.
From now on, whenever someone requests another component review, I can simply share the extension link and say, “Check it yourself.” 👻