1---
2title: Critique with the visual overlay
3tagline: "Use /impeccable critique plus the browser overlay to review a live page with ground truth."
4order: 4
5description: "Run a full design critique that combines LLM assessment, the automated detector, and a live browser overlay so you can see exactly which elements trigger which anti-patterns on the page you're looking at."
6---
7
8## What you'll build
9
10You will run a complete design critique against a live page in your browser, with every flagged anti-pattern highlighted directly on the element that caused it. No screenshots, no guesswork, no paragraph of findings you have to map back to the code.
11
12Total time: about ten minutes.
13
14## Prerequisites
15
16- Impeccable installed in your project (see [getting started](/tutorials/getting-started) if you have not).
17- A harness with browser automation available (Claude Code with the Chrome extension, or similar).
18- A page you want to critique, either local (`localhost:3000/pricing`) or deployed.
19
20## Step 1. Run /impeccable critique
21
22From your harness, run:
23
24```
25/impeccable critique the pricing page at localhost:3000/pricing
26```
27
28The skill kicks off two independent assessments in parallel. They run in separate sub-agents so one does not bias the other.
29
30### What the LLM assessment does
31
32The first assessment reads your source code and, if browser automation is available, opens the live page in a new tab. It walks the full impeccable skill DO/DON'T catalog and scores the page against Nielsen's 10 heuristics, the 8-item cognitive load checklist, and the brand fit from your `PRODUCT.md`.
33
34It labels the tab it opens with `[LLM]` in the title so you can tell which one is which.
35
36### What the automated detector does
37
38The second assessment runs `npx impeccable detect` against the page. This is deterministic: around thirty specific pattern checks that fire or do not fire. Gradient text, purple palettes, side-tab borders, nested cards, line length problems, low contrast, tiny body text, and the rest. The [full catalog](/anti-patterns) lists every rule and which layer (CLI, browser, or LLM-only) catches it.
39
40You get back a JSON list of every finding with its element selector, the rule that fired, and a short description.
41
42## Step 2. Open the visual overlay
43
44Impeccable ships with a visual mode that highlights every detected anti-pattern directly on the page. Here is what it looks like running on a deliberately-bad synthwave landing page:
45
46<div class="tutorial-embed">
47 <div class="tutorial-embed-header">
48 <span class="tutorial-embed-dot red"></span>
49 <span class="tutorial-embed-dot yellow"></span>
50 <span class="tutorial-embed-dot green"></span>
51 <span class="tutorial-embed-title">Live detection overlay</span>
52 </div>
53 <iframe src="/antipattern-examples/visual-mode-demo.html" class="tutorial-embed-iframe" loading="lazy" title="Impeccable visual overlay running on a demo page"></iframe>
54</div>
55
56Every outlined element has a floating label naming the rule that fired. Hover an outline to see the full finding. This is exactly what you will see on your own page.
57
58You have two ways to open it:
59
601. **[Chrome extension](https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf)**: one-click activation on any page. Click the Impeccable icon in the toolbar and every anti-pattern gets highlighted instantly.
612. **Inside `/impeccable critique`**: the skill opens a browser tab labeled `[Human]` with the detector active during the browser portion of the assessment. You do not need to do anything extra.
62
63For this tutorial, the easiest option is the Chrome extension. Install it, navigate to your pricing page, and click the Impeccable icon. You will see the overlay appear immediately on the live page.
64
65## Step 3. Merge the two assessments
66
67Back in your harness, `/impeccable critique` has finished and produced a combined report. It looks something like:
68
69```
70AI slop verdict: FAIL
71 Detected tells: gradient-text (2), ai-color-palette (1),
72 nested-cards (1), side-tab (3)
73
74Heuristic scores (avg 2.8/4):
75 Visibility of status: 3 (good)
76 Match between system and real world: 2 (partial)
77 Consistency and standards: 2 (partial)
78 ...
79
80Cognitive load: 3/8 failures (moderate)
81 Visible options at primary decision: 6 (flag)
82 Decision points stacked at top: yes (flag)
83 Progressive disclosure: absent on advanced pricing toggles
84
85What's working:
86 - Clear price hierarchy
87 - Strong headline
88
89Priority issues:
90 1. Hero uses gradient text on the main price
91 Why: AI tell, reduces contrast, hurts scannability
92 Fix: solid ink color at one weight heavier
93 2. Feature comparison table has 4 nested card levels
94 Why: visual noise, unclear hierarchy
95 Fix: flatten to a table with zebra striping
96
97Questions to answer:
98 - Is the free tier a real product or a funnel?
99 - What does a user feel when they land here from an ad vs from search?
100```
101
102## Step 4. Fix the findings
103
104The report gives you a priority list. You can work through them one at a time, ask the model to fix them all at once, or anything in between. What matters is using the overlay to verify:
105
1061. Keep the overlay open in one tab.
1072. Make fixes in code (or ask the model to fix everything).
1083. Reload. The overlay re-scans and resolved findings disappear.
109
110This feedback loop is the reason the overlay matters. You see fixes land in real time, and you never ship a "fix" that did not actually satisfy the rule.
111
112## Step 5. Re-run when you are done
113
114After you have worked through the priority list, run `/impeccable critique` again. The goal is a clean AI slop verdict and at least a 3.5 average on the heuristics. Cognitive load should be below 2 failures.
115
116If something still fires, fix it or write a suppression comment explaining why the rule does not apply in your context (the detector respects a small set of opt-out pragmas, but use them sparingly).
117
118## What to try next
119
120- [Iterate on the critique findings with Live Mode](/tutorials/iterate-live). Pick the element critique flagged, drop a comment, get three redirections hot-swapped in place, and write the accepted one back to source.
121- `/impeccable audit the same page` to catch the implementation issues critique does not cover (accessibility, performance, theming).
122- `/impeccable polish` if the critique report is clean and you want the last-mile refinement pass.
123- `/impeccable distill` if critique flagged "too busy" or "cognitive load". Distill removes what should not be there.
124
125## Common issues
126
127- **The overlay shows no findings but critique says there are problems**. The detector catches deterministic patterns. Critique catches judgment calls. They are complementary, not redundant.
128- **The LLM assessment and the detector disagree**. That is normal. The LLM is subjective. The detector is deterministic. When they disagree, look at both and make a call.
129- **The overlay breaks the page layout**. Rare, but some CSS can interact with the injected overlay styles. Use the [Chrome extension](https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf) for the most reliable experience, or run `npx impeccable detect` from the CLI and apply findings manually.