For context: I’m a design systems designer. For years, I haven’t had access directly to code. It’s been in Figma. We have a scalable design system with semantic tokens (a brand change or a new theme can be added immediately)

Recently, our org allowed Design access to the production code.

We’ve known for a while, that some pages are inconsistent across the app, but today I had the realisation that the production front end UI code is a mess. I was truly surprised that engineering haven’t been building in a scalable way like our designers are using the Figma Design libraries. Things are hard coded, there’s different naming and token conventions across the app and the colors, spacing, radii, type is all over the place.

My question is, how do I bring this up in my org?
If they ever need a brand refresh, the Figma library can do it in seconds, production code would be a nightmare.

What do I do?

A hero can compile successfully and still have the wrong line breaks, an illustration that dominates the copy, or spacing that looks nothing like the reference. The next edit needs evidence from the page the browser actually rendered.

Ant Ling's Ling-3.0-flash-VL frontend demo shows a generate → render → capture → compare → revise loop. One segment turns a London illustration with Big Ben, a Tube sign and a red bus into a landing page. Another shows a reference site and the local result side by side. There are visible layout differences, which makes the comparison stage more interesting than a claim of instant replication.

The useful input for that stage is a pair of images at a known viewport: the reference and the current render. Feedback can then name an observable mismatch and an intended change: the heading wraps a line too early; the image takes too much horizontal space; the next section starts too far down.

Keep that visual feedback attached to the relevant route and state. A screenshot of the initial page says little about the open menu or the narrow layout.

VL supplies the visual interpretation here. The surrounding environment still has to run the app, capture screenshots and expose logs or DOM information. Interaction, accessibility and viewport coverage need their own checks. What this demo adds is a concrete feedback source for the next CSS/layout revision.

Hey, I just finished recordings for A11Y course on Udemy*/YouTube, comes with 61 CodeSandboxes, where you can just quickly click to jump into the problem.
https://github.com/Ditectrev/Awesome-A11Y-Book-Course-Web-Accessibility-A11Y

*If you like the content, DM me, I'll send a free link to the video version.