网页 综合 更新时间 2026-11-14 16:00:06

Review with a visual overlay | Impeccable

自动蜘蛛 impeccable.style 正文约 3584 字
Review with a visual overlay | Impeccable
Find the problem, see where it happens, and choose what to improve.
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.
In your agent chat, run:
Impeccable combines two kinds of evidence:
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.
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.
Start with the problems that affect the main task. For this checkout, two findings could read:
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.
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.
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.
Answer any questions that could change the solution, then give the agent a focused request. For the illustrated checkout:
You can describe the fix in ordinary language. Use Live Mode when you want to compare layouts, or polish for a broader refinement pass.
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.
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.
Use audit to investigate implementation quality, including accessibility, performance, and edge cases. The critique command guide covers the review itself.
访问原文 返回搜索 https://impeccable.style/tutorials/critique-with-overlay
本页为82搜索生成的网页快照,内容来自站内索引;演示数据的原文链接仅作示例。