1---
2title: Critique with the visual overlay
3tagline: "Use /critique plus the browser overlay to review a live page with ground truth."
4order: 2
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 /critique
21
22From your harness, run:
23
24```
25/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 `.impeccable.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: 25 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.
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 three 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 `/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.
623. **Standalone CLI**: `npx impeccable live` starts a local server that serves the detector script. You inject it into any page by adding a `<script>` tag.
63
64For 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.
65
66## Step 3. Merge the two assessments
67
68Back in your harness, `/critique` has finished and produced a combined report. It looks something like:
69
70```
71AI slop verdict: FAIL
72 Detected tells: gradient-text (2), ai-color-palette (1),
73 nested-cards (1), side-tab (3)
74
75Heuristic scores (avg 2.8/4):
76 Visibility of status: 3 (good)
77 Match between system and real world: 2 (partial)
78 Consistency and standards: 2 (partial)
79 ...
80
81Cognitive load: 3/8 failures (moderate)
82 Visible options at primary decision: 6 (flag)
83 Decision points stacked at top: yes (flag)
84 Progressive disclosure: absent on advanced pricing toggles
85
86What's working:
87 - Clear price hierarchy
88 - Strong headline
89
90Priority issues:
91 1. Hero uses gradient text on the main price
92 Why: AI tell, reduces contrast, hurts scannability
93 Fix: solid ink color at one weight heavier
94 2. Feature comparison table has 4 nested card levels
95 Why: visual noise, unclear hierarchy
96 Fix: flatten to a table with zebra striping
97
98Questions to answer:
99 - Is the free tier a real product or a funnel?
100 - What does a user feel when they land here from an ad vs from search?
101```
102
103## Step 4. Fix the findings
104
105The 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:
106
1071. Keep the overlay open in one tab.
1082. Make fixes in code (or ask the model to fix everything).
1093. Reload. The overlay re-scans and resolved findings disappear.
110
111This 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.
112
113## Step 5. Re-run /critique when you are done
114
115After you have worked through the priority list, run `/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.
116
117If 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).
118
119## What to try next
120
121- `/audit the same page` to catch the implementation issues critique does not cover (accessibility, performance, theming).
122- `/polish` if the critique report is clean and you want the last-mile refinement pass.
123- `/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.