Border accent on rounded element
+Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.
+ See in /impeccable +diff --git a/content/site/partials/header.html b/content/site/partials/header.html index c2f496acf..131c29604 100644 --- a/content/site/partials/header.html +++ b/content/site/partials/header.html @@ -12,9 +12,9 @@ Slop Live - + - 21k + 23k diff --git a/public/cases/neo-mirai/index.html b/public/cases/neo-mirai/index.html index 11721f8ee..55d24bf40 100644 --- a/public/cases/neo-mirai/index.html +++ b/public/cases/neo-mirai/index.html @@ -28,9 +28,9 @@ Slop Live - + - 21k + 23k diff --git a/public/css/workflow.css b/public/css/workflow.css index 2e82d78d7..d2cf720eb 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -1187,9 +1187,29 @@ color: var(--color-ink); } +/* Changelog: highlight reel */ +.changelog-highlights { + padding-bottom: var(--spacing-md); + border-bottom: 1px solid var(--color-mist); +} +.changelog-highlights-label { + font-family: var(--font-mono); + font-size: 1.125rem; + font-weight: 600; + color: var(--color-ink); + margin: 0 0 var(--spacing-sm); +} +.changelog-highlights-label .changelog-date { + margin-left: var(--spacing-xs); +} + /* Changelog: collapsible older entries */ .changelog-older { - margin-top: var(--spacing-sm); + margin-top: 0; +} +.changelog-older + .changelog-older { + margin-top: 0; + border-top: 1px solid var(--color-mist); } .changelog-older-toggle { diff --git a/public/designing/index.html b/public/designing/index.html index 948ce9b7d..8f2e1eea8 100644 --- a/public/designing/index.html +++ b/public/designing/index.html @@ -30,9 +30,9 @@ Slop Live - + - 21k + 23k diff --git a/public/index.html b/public/index.html index a89faaed1..436864c07 100644 --- a/public/index.html +++ b/public/index.html @@ -63,9 +63,9 @@ Slop Live - + - 22k + 23k @@ -932,7 +932,21 @@
Highlights since v3.0 April 10 – 30, 2026
+<a> and <button> elements. Brand exceptions for Vercel, Next.js, and GitHub on their own domains./impeccable teach and /impeccable document./impeccable entry in the menu, shared design vocabulary, and /impeccable pin to promote favorites back as standalone shortcuts./impeccable pin audit and /audit becomes a standalone command again, without reversing the consolidation. Under the hood it writes a lightweight redirect skill that delegates to /impeccable audit, so updates to the parent skill flow through automatically. /impeccable unpin audit removes it.The visible tells of AI design
+37 patterns that mark an interface as AI-generated, and the detection overlay that catches them in place. Watch it flag them live, try it on 11 synthetic specimens, or browse the full catalog. 25 rules run deterministically (npx impeccable detect or the browser extension); 12 need /impeccable critique's LLM review pass.
Hover or tap any outlined element to see which rule fired.
+These 11 synthetic slop pages ship with the detector script baked in. Click any to see the overlay running on a real page, then hover the outlined elements.
+
+ The AI color palette: purple-to-blue gradients on everything. Buttons, text, backgrounds, orbs. The new "make it pop."
+
+ Glassmorphism, neon glows, blurred orbs, monospace everything. Looks like a hackathon project, not a product.
+
+ When in doubt, animate everything. Bouncing buttons, wiggling icons, gradient text, floating badges. Motion without meaning.
+
+ A thick colored border on one side of a rounded card. The single most recognizable tell of AI-generated UI.
+
+ Cards inside cards inside cards. Five levels of nesting, each with its own padding and shadow.
+
+ The same hero-metric-features template repeated with different colors. When every section looks the same, nothing stands out.
+
+ One font for everything. Headings, body, labels, buttons. No typographic hierarchy, no personality, no design.
+Icon containers larger than the content they introduce. When the decoration is bigger than the message, priorities are backwards.
+
+ Gray text on colored backgrounds, low-contrast labels, unreadable combinations. Looking good and being readable should not conflict.
+
+ Label, sublabel, helper text, and hint text all saying the same thing in slightly different words. Say it once, say it well.
+
+ Complex settings crammed into a modal. If it needs a scroll bar and three columns, it deserves its own page.
+Every pattern /impeccable teaches against. AI slop rules flag the tells of AI-generated UIs; Quality rules flag general design mistakes that hurt regardless of who wrote them.
+Each rule shows how it is detected:
+npx impeccable detect on files, no browser required.6 rules
+Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.
+ See in /impeccable +Blur effects, glass cards, and glow borders used as decoration rather than to solve a real layering problem.
+ See in /impeccable +Modals interrupt the user and are lazy as a design default. Use them only when there is truly no better place for the interaction.
+ See in /impeccable +The safest, most forgettable shape on the web. Could be the output of any AI. Commit to a stronger visual treatment.
+ See in /impeccable +Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.
+ See in /impeccable +Tiny charts that look sophisticated but convey no meaningful information. If the data matters, give it room.
+ See in /impeccable +6 rules
+Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).
+ See in /impeccable +A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.
+ See in /impeccable +Using a monospace typeface to signal "developer / technical" vibes. Reach for real type choices instead of a lazy stereotype.
+ See in /impeccable +Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.
+ See in /impeccable +Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.
+ See in /impeccable +Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.
+ See in /impeccable +6 rules
+Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.
+ See in /impeccable +Dark backgrounds with colored box-shadow glows are the default "cool" look of AI-generated UIs. Use subtle, purposeful lighting instead — or skip the dark theme entirely.
+ See in /impeccable +Defaulting to light mode to be safe is the inverse of defaulting to dark mode to look cool. Either way you are retreating from a decision.
+ See in /impeccable +Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.
+ See in /impeccable +Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.
+ See in /impeccable +Pure #000000 as a background color looks harsh and unnatural. Tint it slightly toward your brand hue (e.g., oklch(12% 0.01 250)) for a more refined feel.
+ See in /impeccable +7 rules
+Every text element is center-aligned. Left-aligned text with asymmetric layouts feels more designed. Center only hero sections and CTAs.
+ See in /impeccable +Big number, small label, three supporting stats, gradient accent. Used everywhere, trusted nowhere.
+ See in /impeccable +Same-sized cards with icon + heading + text repeated endlessly. The default AI homepage layout.
+ See in /impeccable +The same spacing value used everywhere — no rhythm, no variation. Use tight groupings for related items and generous separations between sections.
+ See in /impeccable +Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.
+ See in /impeccable +Not every piece of content needs a bordered container. Spacing and alignment create visual grouping without the overhead of a card.
+ See in /impeccable +Text lines wider than ~80 characters are hard to read. The eye loses its place tracking back to the start of the next line. Add a max-width (65ch to 75ch) to text containers.
+ See in /impeccable +2 rules
+Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.
+ See in /impeccable +Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.
+ See in /impeccable +2 rules
+When every button looks equally important, nothing reads as the primary action. Use ghost buttons, text links, and secondary styles to build hierarchy.
+ See in /impeccable +Intros that restate the heading. Section labels that repeat the page title. Cards that echo their own caption. Make every word earn its place.
+ See in /impeccable +1 rule
+Hiding critical functionality on mobile because it is inconvenient. Adapt the interface to the context, do not strip it.
+ See in /impeccable +7 rules
+Text is too close to the edge of its container. Add at least 8px (ideally 12-16px) of padding inside bordered or colored containers.
+ +Justified text without hyphenation creates uneven word spacing ("rivers of white"). Use text-align: left for body text, or enable hyphens: auto if you must justify.
+ +Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.
+ +Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.
+ +Line height below 1.3x the font size makes multi-line text hard to read. Use 1.5 to 1.7 for body text so lines have room to breathe.
+ +Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.
+ +Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.
+ +Inside /impeccable critique
+The design review command opens the overlay automatically during its browser assessment pass. Deterministic findings highlighted in place while the LLM runs its separate heuristic review.
+Standalone CLI
+npx impeccable liveStarts a local server that serves the detector script. Inject it into any page via a <script> tag to see the overlay. Works on your own dev server, a staging URL, or anyone's live page.
Easiest
+One-click activation on any tab. Install from Chrome Web Store →
+