{"id":697,"date":"2025-08-05T18:00:44","date_gmt":"2025-08-05T12:00:44","guid":{"rendered":"https:\/\/192.168.1.202\/?p=697"},"modified":"2025-09-23T22:46:16","modified_gmt":"2025-09-23T16:46:16","slug":"case-study-token-inspector","status":"publish","type":"post","link":"https:\/\/creatrix.us\/?p=697","title":{"rendered":"How (and why) I used AI to build this Chrome Extension"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.linkedin.com\/in\/mamunsrizon\/\"><\/a>Before letting AI take over our work, I decided to hand over one of my own tedious tasks to AI as an experiment.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember836\">The problem<\/h3>\n\n\n\n<p id=\"ember837\">A few weeks ago, I was requested to review a large collection of legacy custom components\u2014spread across different repositories from multiple libraries\u2014to ensure they were fully design-system compliant. The expected timeline for completion less than two weeks.<\/p>\n\n\n\n<p id=\"ember838\">On the surface, visual QA isn\u2019t difficult. The real challenge lies in the hidden issues\u2014components 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.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember839\">Hypothesis<\/h3>\n\n\n\n<p id=\"ember840\">What if there was a tool that could scan each component, detect hardcoded values, and flag them instantly?<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember841\">Approach &amp; Challenges<\/h3>\n\n\n\n<p id=\"ember842\">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\u2019d have to build it myself.<\/p>\n\n\n\n<p id=\"ember843\">My JavaScript skills were\u2026 let\u2019s just say \u201cunderdeveloped.\u201d So, I turned it into a personal side project\u2014a weekend deep dive. I spent after-hours sessions experimenting with Gemini CLI to explore possible solutions, making sure that if it failed, I wouldn\u2019t be wasting the company\u2019s time or resources.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember844\">Proof of Concept<\/h3>\n\n\n\n<p id=\"ember845\">After about an hour of trial and error with Gemini, I had a working prototype. It could detect if the component has:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hex color codes instead of color variables<\/li>\n\n\n\n<li>Pixel values for margins and paddings instead of spacing tokens<\/li>\n<\/ul>\n\n\n\n<p id=\"ember847\">Obviously, it wasn\u2019t pretty (Gemini\u2019s design sense leaves much to be desired), but it worked.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-04-at-10.33.22-PM-1024x661.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember849\">Refinement<\/h3>\n\n\n\n<p id=\"ember850\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-04-at-10.12.02-PM-1024x669.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember852\">Validation<\/h3>\n\n\n\n<p id=\"ember853\">After a few iterations, the extension became stable and reliable. It allowed me to review hundreds of components in a single day\u2014a task that would have otherwise taken roughly 10 days to complete manually.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/08\/Token-Inspector.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember857\">Enhancements<\/h3>\n\n\n\n<p id=\"ember858\">Originally, the extension only detected hardcoded CSS values. Later, I added:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A custom variable detection feature to flag user defined variables so it can detect not only the hardcoded values but deprecated tokens as well.<\/li>\n\n\n\n<li>A settings screen to define what the extension to define those variables to flag.<\/li>\n\n\n\n<li>A DevTools panel to preview real-time token replacements for flagged issues.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/08\/image-1024x640.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember861\">Impact<\/h3>\n\n\n\n<p id=\"ember862\">By automating the review process, I reduced a 10-day manual audit to a single day\u2014freeing up time for more important (and more interesting) work.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember863\">Distribution<\/h3>\n\n\n\n<p id=\"ember864\">lthough the extension was initially built for personal use, I later decided to make it publicly available. After releasing it on GitHub, I <a href=\"https:\/\/chromewebstore.google.com\/detail\/token-inspector\/kcdnklhjaihnhkolaeclncaeiknocacc\">published it to the Chrome Web Store<\/a> so anyone could benefit from it. If it saves even a few people from repetitive manual reviews, it\u2019s worth it.<\/p>\n\n\n\n<p id=\"ember865\">From now on, whenever someone requests another component review, I can simply share the extension link and say, \u201cCheck it yourself.\u201d \ud83d\udc7b<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2014spread across different repositories from multiple libraries\u2014to ensure they were fully design-system compliant. The expected [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":703,"comment_status":"open","ping_status":"open","sticky":false,"template":"single-with-sidebar","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[7,49,48,39],"class_list":["post-697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","tag-ai","tag-case-study","tag-chrome-extension","tag-design-systems"],"_links":{"self":[{"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/posts\/697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/creatrix.us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=697"}],"version-history":[{"count":5,"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/posts\/697\/revisions"}],"predecessor-version":[{"id":768,"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/posts\/697\/revisions\/768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/media\/703"}],"wp:attachment":[{"href":"https:\/\/creatrix.us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creatrix.us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creatrix.us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}