Bugs your users can see, with no error to log.
Unreadable text, broken images, layouts that break on phones, "undefined" on the page, buttons under an invisible layer. They render without an exception, so no error monitor records them. GenClass measures them on the page and names the element, what was measured, and a fix. Paste an address to run the checks on one public page.
The visual checks are built and measured in CI. They are not in runtime 0.2.1 yet: they are in testing for a later release. The page check runs the same checks on one public page, except click-blocked, which needs a visitor's clicks. Check numbers as of , from the results linked under Sources. The learned model is still being trained and evaluated and has no published numbers; nothing on this page comes from it.
Every family of visual bug in the catalog, drawn.
The GenClass catalog of visual bugs collects what breaks on screen in AI-built sites, from studies, builder forums, code searches and audits, and ranks each bug by how strong the evidence is that it is common. These are its families, in its order. Under each: the measured checks for that family, by the names their reports use. A family's other bugs have no check yet.
Unreadable text
Text the same colour as its background, too faint, too small, or set over an image.
Checks: text-invisible
Missing or broken media
Images, icons and charts that fail to load, never existed, or render stretched.
Checks: image-broken, image-css-broken, image-distorted, media-failed, icon-font-failed
Missing styles or fonts
CSS the page asks for and never gets: Tailwind classes that generated nothing, theme tokens that resolve to nothing, fonts and stylesheets that fail to load.
Checks: stylesheet-failed, font-failed, css-var-undefined, csp-blocked
Layout overflow and clipping
Content wider than its box: the page scrolls sideways on a phone, cards blow out, labels are cut off.
Checks: page-overflow-x
Overlap and occlusion
Something paints over what the visitor needs: a sticky header over a heading, a dialog behind the page.
Checks: focus-obscured, control-unreachable, dialog-covered
Hidden or unreachable controls
Controls that exist but cannot be used: an invisible layer takes the click, the page stays frozen after a modal closes, actions appear only on hover.
Checks: click-blocked, pointer-events-leak, scroll-lock-stuck
Template and data leaks
What should never reach a visitor: undefined, NaN, [object Object], Lorem ipsum, garbled characters.
Checks: text-template-leak, text-placeholder, text-encoding
Blank page and missing content
The page, or a part of it, renders nothing.
Checks: page-blank
Motion and shift
Content jumps while the page loads, or waits at opacity 0 for an animation that never runs.
Checks: layout-shift
Dark mode
A dark theme applied halfway: dark text left on a dark surface, light cards left behind.
Checks: text-invisible
Responsive
Bugs that appear only at some widths: a phone shown the desktop layout, rows that never wrap.
Checks: viewport-meta-missing, page-overflow-x
Alignment, spacing and consistency
Nothing is broken, but edges, gaps and buttons do not line up.
No check: design quality, not breakage
Other
Fields labelled only by placeholder text, emoji used as icons, and pages that render differently in Safari, Firefox and Chrome.
No measured check yet
Measured checks, a model still in evaluation, and opt-in fixes.
Measure in the browser
Each check is a measurement against a documented threshold, or a fact the browser reports: text below 1.5:1 contrast against a solid background, an image's error event, a page wider than the phone showing it. A report names the element, the value measured and the threshold, and suggests a CSS change for that selector. Text over photos and gradients is skipped, not guessed.
Learn from crawled pages
A learned model is still being trained and evaluated on a crawl of AI-built and regular sites, with faults injected from outside each page so every example has a known label. It has no published numbers yet. If it meets its bar, its recall and false reports will be published on this page with the data and the split.
Fix only when you ask
In testing: observe mode reports and never changes the page. With visual fixes turned on in guard or heal mode, three narrow fixes can run: a readable text colour, a leaked pointer-events: none removed from body, a stuck scroll lock released. Each is measured again after it runs, and each can be undone. On the unmodified pages of the bench, 0 fixes were applied in 128 page views.
Design and thresholds: the visual checks design. The checks never feed the network model, and they read no pixels.
What was measured, and on what.
Every number below is for GenClass visual checks v1 (branch wave2/visual), measured on GitHub runners in Chromium 153 on , and copied with its label from the runtime results, sections 8 and 9. These are measurements of fixed checks with documented thresholds, not of a model. The page check runs the same checks, except click-blocked; these numbers were measured on the runtime's bench, not through the page check.
- 35 of 35 planted faults found on fixture pages, each on its element, 23 kinds, 24 tests passed. These are fixture pages written by the same author as the checks, so this shows the checks work as designed.
- 0 false reports and 0 fixes applied in 128 page views of unmodified pages (Table 2).
- 8 findings in 96 loads of public home pages, 5 confirmed real by a person from the element's crop, 3 unconfirmed, 0 check errors (Table 3, run 4).
| Kind | Planted | Found | Recall |
|---|---|---|---|
text-invisible | 70 | 70 | 1.00 |
image-broken | 36 | 36 | 1.00 |
image-css-broken | 32 | 32 | 1.00 |
media-failed | 36 | 36 | 1.00 |
stylesheet-failed | 32 | 32 | 1.00 |
font-failed | 28 | 28 | 1.00 |
icon-font-failed | 36 | 36 | 1.00 |
csp-blocked | 36 | 36 | 1.00 |
text-template-leak | 54 | 54 | 1.00 |
text-placeholder | 28 | 28 | 1.00 |
text-encoding | 28 | 28 | 1.00 |
image-distorted | 36 | 36 | 1.00 |
page-overflow-x | 22 | 22 | 1.00 |
viewport-meta-missing | 11 | 11 | 1.00 |
layout-shift | 18 | 18 | 1.00 |
page-blank | 18 | 18 | 1.00 |
click-blocked | 18 | 12 | 0.67 |
pointer-events-leak | 18 | 17 | 0.94 |
scroll-lock-stuck | 36 | 24 | 0.67 |
control-unreachable | 32 | 32 | 1.00 |
focus-obscured | 18 | 18 | 1.00 |
dialog-covered | 18 | 18 | 1.00 |
css-var-undefined | 28 | 27 | 0.96 |
Every click-blocked and scroll-lock-stuck miss is on one of the six demo pages, which update their DOM all the time; both checks wait for a moment with no DOM change, so they stay silent on such pages. css-var-undefined missed one phone load. The pointer-events-leak miss is a compat app whose requests were in flight during the reads: since the review a lock is not judged while a request runs.
| Pages | Page views | Findings | Confirmed real | False reports | Fixes applied |
|---|---|---|---|---|---|
| Demos, 7 pages | 28 | 2 | 2 | 0 | 0 |
| Templates, 4 | 16 | 0 | 0 | 0 | 0 |
| Compat apps, 7 apps x 3 scenarios | 84 | 0 | 0 | 0 | 0 |
The two findings are one real bug in two colour schemes: on the demos index at desktop width, the content under the hero headline moves 59 px 0.2 s after navigation start (a layout-shift window of 0.34). It is labelled real and the demo is left alone. The same zero false reports held in all five runs.
| Run | Sites measured | Loads | Findings | Per load | Confirmed real | Check errors | Unconfirmed |
|---|---|---|---|---|---|---|---|
| 1 | 32 | 100 | 49 | 0.49 | 5 | 44 | 0 |
| 2 | 33 | 100 | 12 | 0.12 | 5 | 5 | 2 |
| 3 | 34 | 102 | 7 | 0.069 | 5 | 1 | 1 |
| 4 | 31 | 96 | 8 | 0.083 | 5 | 0 | 3 |
| 5 | 33 | 97 | 6 | 0.062 | not looked at | not looked at | 6 |
The 5 confirmed real findings in run 4 are 3 bugs on 2 of the 40 sites, each found in two colour schemes where it applies: on a phone, a statistic 16 px wider than the 390 px viewport, so the page scrolls sideways; on a phone, a layout shift of 0.27 that moves the content below by 782 px; on a phone, a keyboard-focused link hidden under a fixed announcement banner. Bot challenges, HTTP errors and rate-limited loads are not measured.
@genclass/runtime/auto.| Loads | Count | Pass time | Pass within budget | Longest slice |
|---|---|---|---|---|
| Local pages, 1x CPU | 128 | 6.8 / 32.1 / 53.4 | 100% | 6.2 / 10.5 / 12.5 |
| Local pages, 4x CPU throttling | 32 | 32.8 / 112.4 / 113.6 | 78.1% | 14.3 / 18.3 / 20.1 |
| Public sites, 1x CPU | 117 | 40.3 / 95.2 / 158.4 | 95.7% | 8.9 / 18.9 / 51.1 |
Three of the proposed cost gates are not met yet: p95 pass time on public sites is 95.2 ms against at most 50 ms, the longest slice at p95 is 18.9 ms on public sites against at most 12 ms, and the first pass finishes inside 100 ms at 4x throttling on 78.1% of local pages against at least 90%.
The learned model is still being trained and evaluated. It has no published numbers, and none of the numbers above come from it. If it meets its bar, this section adds its recall per bug family at two false-report rates, its precision on pages with no injected faults, its size and its cost, with the data and the split behind each.
What it does not do yet.
- The learned model has no numbers yet. Nothing on this page claims a detection rate for it until one is measured and published.
- Measured on GenClass's own apps and 31 to 34 of 40 public home pages per run. Recall is on faults planted in the author's own forms, and the public sites were also used to tune the checks between runs, so they are not held out.
- No pixels. Text over photos, video and gradients is skipped, and canvas and WebGL content is not checked.
- Only what the visitor's browser shows. Once they ship in the runtime, the checks run in your app in the colour scheme, width and hover state each visitor is using. The page check adds a phone view and dark mode.
- Two checks need Chromium. Layout shifts and failed CSS background images have no browser signal elsewhere.
- Not an accessibility audit. Readable text below WCAG AA contrast is not reported, and nothing here makes a site accessible or WCAG compliant.
- Design quality is not reported as a bug. Uneven alignment and spacing are in the catalog; no check reports them.
- It does not repair CSS in general. The three fixes above are the only changes it can make, and only when you turn them on.
- Visual and CSS bugs in AI-generated web apps: catalog the bug families, their order and the evidence for each bug
- GenClass runtime results, sections 8 and 9: the visual checks and the visual bench every number for the measured checks
- GenClass visual checks: design the 23 kinds, their thresholds and the opt-in fixes
- Visual bench: pages, loads and planted faults how the clean pages, public sites and planted faults were run
Scan a page.
Paste the address of a public page. A cloud browser loads it, runs the measured checks (all but click-blocked, which needs a visitor's clicks), and shows each problem on a screenshot with what was measured and a suggested fix.