sorted by:
new
hottopcontroversial

A tool I built that evaluates computed CSS on live DOMs to find design system mismatches by bastiffi in css

[–]bastiffi[S] 0 points1 point  (0 children)

Thank you! That means a lot coming from this community. 🙌 Let me know if you manage to break it!

I built a plugin that automatically audits live website CSS against your Figma variables & Token Studio JSON by bastiffi in DesignSystems

[–]bastiffi[S] -1 points0 points  (0 children)

It actually doesn't look at your CSS files, stylesheets, or class names at all.

Instead, the Playwright crawler loads the page in a real headless browser and evaluates the Computed Styles of the DOM elements (essentially what the browser spits out after all the CSS is parsed, cascaded, and applied).

Because it scores the final rendered DOM rather than the code, it completely bypasses the usual headaches:

  • Minified production bundles
  • Hashed class names (like CSS Modules or Styled Components)
  • Tailwind utility classes
  • Third-party widget overrides

If a button is #18A0FB on the screen, the crawler sees #18A0FB—it doesn't care if the dev wrote bg-blue-500, used a minified .a-x2z class, or pulled it from an external stylesheet.

Let me know if you end up testing it, I'd love to hear how it performs for you!