Review with a visual overlay
Find the problem, see where it happens, and choose what to improve.
On this page 7 sections
A page can pass every automated check and still be confusing. A critique helps explain why. The visual overlay adds a way to locate detected problems on the page, such as text that is hard to read.
This walkthrough uses a checkout example: the payment button draws attention before the total, and the shipping cost is too faint. You will read the findings, choose a fix, and check the result.
Before you start
- Install Impeccable in your coding tool. See getting started if needed.
- Choose a page and a task. Use its source path or a URL your agent can open. Say what someone needs to accomplish and what is still unfinished.
- For the overlay, use the Chrome extension or an agent with browser tools that support it. The review can still explain findings when an overlay is unavailable.
1. Ask for a critique
In your agent chat, run:
/impeccable critique the checkout page. Customers need to check the full total before paying.Impeccable combines two kinds of evidence:
- Design review: how the page guides someone through the task, what feels generic or inconsistent, and what deserves attention.
- Automated checks: known patterns found in source or the rendered page, with locations and explanations.
The combined report gives you strengths to preserve, priority issues, usability scores, and questions that may affect the work. It also says which checks ran and which were unavailable. Critique leaves the design unchanged.
Why does critique use separate assessments?
The design review runs independently of the detector so its findings do not steer the first judgment. When the coding tool supports separate agents, Impeccable uses them, asking for permission where required. A run in one shared context should identify that limitation in its report.
The assessments are combined afterward. Agreement can strengthen a finding, but a detector warning still needs to make sense for your page.
2. Read the priority issues
Start with the problems that affect the main task. For this checkout, two findings could read:
- Design review: the payment button appears before the total. Show the full amount before asking someone to pay, and include it in the button label.
- Detector: the shipping-cost text has low contrast. Make the charge readable so it is not easy to miss.
The detector can identify the contrast problem. Recognizing that the page asks for payment too early takes a review of the task and reading order. Neither finding replaces the other.
3. Locate detected problems on the page
With the Chrome extension installed, open your page, click the Impeccable extension icon, then choose Scan page. Use Show overlays if the findings are hidden. The outlines and labels connect detected patterns to elements on the page.
If your agent can create an overlay during critique, its report will say where to find it. Browser restrictions can prevent this, even when the agent can inspect the page. If it could not create one, use the source locations and findings in the report.
Try the overlay on a deliberately flawed page
This existing demo runs the browser detector on an intentionally overdone landing page. Its example copy and claims are fictional. The labels are real detector output; they are not a full design critique.
Open the demo in a full page to inspect it with more room.
4. Ask for the changes you want
Answer any questions that could change the solution, then give the agent a focused request. For the illustrated checkout:
Show the total above the payment button and include that amount in its label. Make the shipping cost readable. Keep the products, prices, and payment behavior unchanged.You can describe the fix in ordinary language. Use Live Mode when you want to compare layouts, or polish for a broader refinement pass.
5. Check the result
Reload the page and choose Scan page again. Confirm that the specific detector finding is resolved. Then hide the overlays and try the task: can you read every charge, confirm the total, and use the payment control? Check narrow screens and keyboard use too.
If you changed the flow or layout substantially, run critique again on the same target. Look for better task completion and clearer decisions. A lower finding count or a higher score is supporting evidence, not the finish line.
How should I use the scores and saved reviews?
Usability checks are scored from 0 to 4. Checks that do not apply are marked n/a, and the total adjusts. Read the reasons alongside the scores; do not compare totals with different maximums as if they used the same checks.
Impeccable saves critique reports under .impeccable/critique/ and can show a trend for the same target. The report should say if saving failed. Simulated user perspectives can suggest what to investigate, but they do not replace testing with real people.
If the results are confusing
- No detector findings, but the page still feels wrong: use the critique’s design reasoning. Task order, product fit, and character are not fully captured by pattern checks.
- A warning seems intentional: inspect its effect and explain the decision. Configuration & ignores covers narrow detector exceptions; hiding the overlay only changes what you see.
- No overlay appears: check the extension’s scan message or the agent’s run notes. Browser restrictions or an injection failure may prevent it. You can still work from source locations and the written review.
Use audit to investigate implementation quality, including accessibility, performance, and edge cases. The critique command guide covers the review itself.