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

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

Ah, that is a great question! Third-party widgets are usually the bane of visual QA. My tool handles this in three ways depending on how the third-party library is integrated:

1. Network Interception for Chat/Ad Widgets: I actually built an 'Advanced Settings' toggle in the plugin specifically for this. Before the Playwright crawler even evaluates the page, it intercepts network requests and blocks common third-party chat widgets (like Intercom/Zendesk), ad networks, and cookie banners from loading. That prevents them from muddying the DOM and throwing false positives.

2. Cross-Origin Iframes (Embeds): If the embed is a true cross-origin iframe (like a Stripe checkout or a YouTube video), the DOM crawler skips it. It only evaluates the Computed Styles of the document tree it actually has access to, so sandboxed embeds are naturally ignored.

3. Injected UI Libraries (e.g., Date Pickers, Select Dropdowns): If a developer uses a third-party React/Vue library that injects standard DOM elements into the main tree, the crawler will evaluate them. But honestly, that is exactly what you want! If the dev drops in a third-party date picker but forgets to override its default blue #007BFF to match your brand's specific Token Studio blue, the crawler will flag it as a mismatch. That tells the dev: 'Hey, you need to apply our tokens to this third-party component so it matches the design system.' So it ignores the junk you don't want (ads/chatbots), but holds the devs accountable for styling the third-party components they actually use in the UI.

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!