Intro
This post kicks off a short weekly series about real use-cases for runtime DOM snapshots with LLMs.
Each week — a different scenario.
Let’s start with a common situation: a signup form that looks fine in code, but in practice frustrates users.
The problem
At first glance the form looks perfect:
- clean HTML
- validation rules in place
- no console errors
But the numbers disagree. Conversion is low. Users drop halfway or click “Submit” and nothing happens.
Static code inspection isn’t enough here. Code shows structure, not what a person actually sees and experiences.
The experiment
Instead of looking only at HTML, imagine capturing a runtime snapshot of the page.
That snapshot (as JSON) includes:
- which fields are visible or hidden
- which are required/invalid
- computed styles (is the “Submit” disabled?)
- error messages shown on screen
Now an LLM can be asked:
“What’s blocking the signup, and how would you fix it?”
The findings
The answers are suddenly specific, not vague:
- a required field is hidden → that’s why “Submit” stays disabled
- error text is only in red → add inline copy so the issue is obvious
- password field sits far down → move it higher
-
autocomplete=offmakes users retype emails → remove it
The outcome
A handful of small changes like these — reordered fields, clearer error copy, fixing one hidden input — can add up fast.
In one experiment, a signup flow improved by about +8% submissions after just a couple of tweaks.
All because the model saw the real state of the form at runtime, not just static code.
Takeaway
- Static code = blueprint
- Runtime snapshot = the real X-ray
Give LLMs that context, and the advice becomes concrete.
👉 Want to try it yourself?
We’ve built a free browser add-on that captures runtime DOM state and exports it as JSON for LLMs.
Install Element to LLM for Chrome & Firefox and start running runtime snapshots today.
Top comments (0)