Workflow Guide
Automated Design Review
Scan any live page for UI-quality defects with no design file and no saved baseline.
Last updated: 2026-08-10
What automated design review is
Automated design review scans a live web page for UI-quality defects without a design file or a saved baseline. Rather than comparing a page against a previous screenshot, it checks the rendered page against known UI failure patterns: missing interactive states, dead controls, form gaps, responsive breakage, inconsistent spacing, and leftover placeholder copy.
OverlayQA ships this as the Auto Review workflow in its Chrome extension. A local scan runs 34 deterministic checks against the rendered DOM and CSSOM, then GPT-4o reviews a downscaled full-page screenshot to confirm or dismiss each local finding and add issues the rules cannot express. Findings export to Jira, Linear, Notion, Asana, or Trello with the CSS selector and computed values attached.
Why a green regression suite still ships broken interfaces
Visual regression testing compares a page against its own approved history, so it reports change. If a defect shipped in the very first implementation there is no change to report, and the suite stays green forever. Automated design review asks a different question: not whether the page moved, but whether it is right. That catches a class of bug regression testing structurally cannot see. We wrote up the full distinction in design QA vs visual regression testing.
It also runs where cloud crawlers cannot. Because the scan happens in your own browser, it reads localhost, staging, and pages behind a login, not just what a server can fetch from a public URL.
The 34 deterministic checks
| Category | Checks | What it catches |
|---|---|---|
| Interactive States (5) | missing hover, focus, active, disabled, and error states | Controls that look dead to a mouse and lose the visible focus cue keyboard users need, which fails WCAG 2.4.7 |
| Design Inconsistencies (9) | inconsistent padding, font size, font family, and border radius; button size drift; icon size drift; misaligned icons; group color outliers; broken heading hierarchy | Elements that should match each other and quietly stopped matching |
| Form Quality (5) | form with no submit path, input with no placeholder, required field with no indicator, submit button with no disabled style, password field with no autocomplete | Forms that frustrate users or cannot be completed at all |
| Responsive Gaps (5) | fixed width inside a flex container, image with no max-width, text overflow clipping, unnecessary truncation, distorted image aspect ratio | Layouts that break below the width the design was drawn at |
| Dead UI (5) | dead link, button that is not clickable, broken image, empty container, empty select | Controls that render perfectly and do nothing when clicked |
| Content Quality (5) | visible lorem ipsum, leftover TODO or FIXME markers, "coming soon" placeholders, default alt text, misspellings | Filler copy that reached customers and reads as an unfinished product |
Workflow steps
- Open any page: Run it on production, staging, or localhost. No design file, no baseline, and no prior scan of the page are needed.
- Run the local scan: 34 deterministic checks read the rendered DOM and CSSOM to flag missing states, dead controls, form gaps, responsive breakage, spacing drift, and placeholder copy.
- Add the AI pass: GPT-4o reviews a downscaled full-page screenshot, confirms or dismisses each local finding, and adds issues the deterministic rules cannot describe.
- Triage and export: Keep what matters, ignore the rest per page or per project, then send the findings to Jira, Linear, Notion, Asana, or Trello with the selector and computed CSS attached.
Frequently asked questions
What is automated design review?
Automated design review scans a live web page for UI-quality defects without a design file or a saved baseline. Rather than comparing a page against a previous screenshot, it checks the rendered page against known UI failure patterns: missing interactive states, dead controls, form gaps, responsive breakage, inconsistent spacing, and leftover placeholder copy.
How is automated design review different from visual regression testing?
Visual regression testing compares a page against its own approved history, so it reports change. If a defect shipped in the first implementation there is no change to report, and the suite stays green. Automated design review asks whether the page is right, not whether it moved, so it catches bugs that were never a change.
What UI problems can be detected automatically?
OverlayQA runs 34 deterministic checks in six categories: interactive states (5), design inconsistencies (9), form quality (5), responsive gaps (5), dead UI (5), and content quality (5). Examples include buttons with no hover or focus style, links pointing nowhere, images with no max-width, and visible lorem ipsum or TODO markers.
Do you need a Figma file to run an automated design review?
No. Automated design review reads only the page in front of it, so it works on pages that never had a design file and on pages whose design drifted away from the file long ago. OverlayQA's separate Visual Comparison workflow is the one that needs a Figma frame or an uploaded image.
Can automated design review run on localhost or a staging site?
Yes. OverlayQA runs Auto Review from a Chrome extension in your own browser, so it reads whatever page you can already see, including localhost, staging, and pages behind a login. Cloud crawlers that fetch a URL from their own servers cannot reach any of those.
Does automated design review replace manual QA?
No. It removes the mechanical sweep, not the judgement. Deterministic checks are good at coverage a person loses patience for, such as testing every control for a focus style. Deciding whether a layout communicates well, or whether a flow makes sense, still needs a reviewer.
How does OverlayQA reduce false positives in automated review?
Two ways. Deterministic checks carry guards for known false-positive shapes, such as tracking beacons that look like broken images and buttons inside a closed dropdown that only appear unclickable. The GPT-4o pass then reviews a screenshot of the page and dismisses local findings it can see are wrong, with a reason attached.