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 @@

What's New

-
+
+

Highlights since v3.0 April 10 – 30, 2026

+ +
+ +
+ Full version history +
+
v3.0.6 @@ -1044,6 +1058,9 @@
  • Pin your favorites back as shortcuts. Run /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.
  • +
    +
    +
    View older releases @@ -1166,7 +1183,6 @@
    - diff --git a/public/live-mode/index.html b/public/live-mode/index.html index 1a76f9ded..1082b269b 100644 --- a/public/live-mode/index.html +++ b/public/live-mode/index.html @@ -35,9 +35,9 @@ Slop Live - + - 21k + 23k diff --git a/public/privacy.html b/public/privacy.html index 21421ef0e..44b2853aa 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -35,9 +35,9 @@ Docs Slop - + - 21k + 23k diff --git a/public/slop/index.html b/public/slop/index.html new file mode 100644 index 000000000..2c2337624 --- /dev/null +++ b/public/slop/index.html @@ -0,0 +1,937 @@ + + + + + + Slop | Impeccable + + + + + + + + + + + + + + +
    + +
    + + +
    + +
    +
    +

    The visible tells of AI design

    +

    Slop

    +

    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.

    +
    + +
    +

    01 See it

    +
    +
    + + + + Live on a synthetic slop page +
    + +
    +

    Hover or tap any outlined element to see which rule fired.

    +
    + + + +
    +
    +

    03 The catalog

    +

    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.

    +
    + +
    + + How to read this + + +
    +

    Each rule shows how it is detected:

    +
    +
    CLI
    Deterministic. Runs from npx impeccable detect on files, no browser required.
    +
    Browser
    Deterministic, but needs real browser layout. Runs via the browser extension or Puppeteer, not the plain CLI.
    +
    LLM only
    No deterministic detector. Caught by /impeccable critique during its LLM design review.
    +
    +
    +
    + +
    + +
    +
    +

    Visual Details

    +

    6 rules

    +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    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 +
    +
    + +
    + +
    +
    + AI slop + LLM only +
    +

    Glassmorphism everywhere

    +

    Blur effects, glass cards, and glow borders used as decoration rather than to solve a real layering problem.

    + See in /impeccable +
    +
    + +
    + +
    +
    + AI slop + LLM only +
    +

    Reaching for modals by reflex

    +

    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 +
    +
    + +
    + +
    +
    + AI slop + LLM only +
    +

    Rounded rectangles with generic drop shadows

    +

    The safest, most forgettable shape on the web. Could be the output of any AI. Commit to a stronger visual treatment.

    + See in /impeccable +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Side-tab accent border

    +

    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 +
    +
    + +
    + +
    +
    + AI slop + LLM only +
    +

    Sparklines as decoration

    +

    Tiny charts that look sophisticated but convey no meaningful information. If the data matters, give it room.

    + See in /impeccable +
    +
    +
    +
    +
    +
    +

    Typography

    +

    6 rules

    +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Flat type hierarchy

    +

    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 +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Icon tile stacked above heading

    +

    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 +
    +
    + +
    + +
    +
    + AI slop + LLM only +
    +

    Monospace as "technical" shorthand

    +

    Using a monospace typeface to signal "developer / technical" vibes. Reach for real type choices instead of a lazy stereotype.

    + See in /impeccable +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Overused font

    +

    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 +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Single font for everything

    +

    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 +
    +
    + +
    + +
    +
    + Quality + CLI +
    +

    All-caps body text

    +

    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 +
    +
    +
    +
    +
    +
    +

    Color & Contrast

    +

    6 rules

    +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    AI color palette

    +

    Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.

    + See in /impeccable +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Dark mode with glowing accents

    +

    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 +
    +
    + +
    + +
    +
    + AI slop + LLM only +
    +

    Defaulting to dark mode for "safety"

    +

    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 +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Gradient text

    +

    Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.

    + See in /impeccable +
    +
    + +
    + +
    +
    + Quality + CLI +
    +

    Gray text on colored background

    +

    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 +
    +
    + +
    + +
    +
    + Quality + CLI +
    +

    Pure black background

    +

    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 +
    +
    +
    +
    +
    +
    +

    Layout & Space

    +

    7 rules

    +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Everything centered

    +

    Every text element is center-aligned. Left-aligned text with asymmetric layouts feels more designed. Center only hero sections and CTAs.

    + See in /impeccable +
    +
    + +
    + +
    +
    + AI slop + LLM only +
    +

    Hero metric layout

    +

    Big number, small label, three supporting stats, gradient accent. Used everywhere, trusted nowhere.

    + See in /impeccable +
    +
    + +
    + +
    +
    + AI slop + LLM only +
    +

    Identical card grids

    +

    Same-sized cards with icon + heading + text repeated endlessly. The default AI homepage layout.

    + See in /impeccable +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Monotonous spacing

    +

    The same spacing value used everywhere — no rhythm, no variation. Use tight groupings for related items and generous separations between sections.

    + See in /impeccable +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Nested cards

    +

    Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.

    + See in /impeccable +
    +
    + +
    + +
    +
    + AI slop + LLM only +
    +

    Wrapping everything in cards

    +

    Not every piece of content needs a bordered container. Spacing and alignment create visual grouping without the overhead of a card.

    + See in /impeccable +
    +
    + +
    + +
    +
    + Quality + Browser +
    +

    Line length too long

    +

    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 +
    +
    +
    +
    +
    +
    +

    Motion

    +

    2 rules

    +
    +
    + +
    + +
    +
    + AI slop + CLI +
    +

    Bounce or elastic easing

    +

    Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.

    + See in /impeccable +
    +
    + +
    + +
    +
    + Quality + CLI +
    +

    Layout property animation

    +

    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 +
    +
    +
    +
    +
    +
    +

    Interaction

    +

    2 rules

    +
    +
    + +
    + +
    +
    + Quality + LLM only +
    +

    Every button is a primary button

    +

    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 +
    +
    + +
    + +
    +
    + Quality + LLM only +
    +

    Redundant information

    +

    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 +
    +
    +
    +
    +
    +
    +

    Responsive

    +

    1 rule

    +
    +
    + +
    + +
    +
    + Quality + LLM only +
    +

    Amputating features on mobile

    +

    Hiding critical functionality on mobile because it is inconvenient. Adapt the interface to the context, do not strip it.

    + See in /impeccable +
    +
    +
    +
    +
    +
    +

    General quality

    +

    7 rules

    +
    +
    + +
    + +
    +
    + Quality + Browser +
    +

    Cramped padding

    +

    Text is too close to the edge of its container. Add at least 8px (ideally 12-16px) of padding inside bordered or colored containers.

    + +
    +
    + +
    + +
    +
    + Quality + CLI +
    +

    Justified text

    +

    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.

    + +
    +
    + +
    + +
    +
    + Quality + CLI +
    +

    Low contrast text

    +

    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.

    + +
    +
    + +
    + +
    +
    + Quality + CLI +
    +

    Skipped heading level

    +

    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.

    + +
    +
    + +
    + +
    +
    + Quality + CLI +
    +

    Tight line height

    +

    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.

    + +
    +
    + +
    + +
    +
    + Quality + CLI +
    +

    Tiny body text

    +

    Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.

    + +
    +
    + +
    + +
    +
    + Quality + CLI +
    +

    Wide letter spacing on body text

    +

    Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.

    + +
    +
    +
    +
    +
    +
    + +
    +

    04 Run it yourself

    +
    +
    +

    Inside /impeccable critique

    +

    /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 live

    +

    Starts 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.

    +
    + +
    +
    +
    +
    +
    +
    + + +