Files
pbakaus_impeccable/site/components/SlopPatternPreview.astro
T
Paul Bakaus ead6ddabe5 Preserve experimental Live app-server workstream
Snapshot the current app-server implementation, shared Live optimizations, generated harness output, and in-progress site work before restoring polling as the primary runtime path.

Prepared with Codex assistance under maintainer direction.
2026-07-15 16:07:34 -07:00

100 lines
4.3 KiB
Plaintext

<section class="slop-teaser-section slop-pattern-section" id="slop" aria-labelledby="slop-pattern-title">
<header class="slop-pattern-head">
<div>
<h2 id="slop-pattern-title" class="slop-teaser-title">AI has a house style. Impeccable knows the tells.</h2>
<p class="slop-teaser-body">
The defaults move. The pattern is the same: the model reaches for whatever currently signals
“taste” without asking whether it belongs. Impeccable catches those reflexes before they become your design.
</p>
</div>
<div class="slop-pattern-actions">
<span class="slop-pattern-count"><strong>59</strong> detector checks</span>
<a class="ks-button ks-button-secondary" href="/slop">
Open the full gallery
<span class="ks-button-arrow" aria-hidden="true">
<svg viewBox="0 0 16 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
<path d="M0 4h14M10 0l4 4-4 4"/>
</svg>
</span>
</a>
</div>
</header>
<div class="slop-pattern-board">
<article class="slop-pattern-item slop-pattern-item--wide">
<div class="slop-pattern-specimen slop-pattern-specimen--serif" aria-hidden="true">
<span class="slop-pattern-kicker">A quieter way to work</span>
<span class="slop-pattern-serif-line">Beautifully <em>crafted</em><br />for modern teams.</span>
</div>
<div class="slop-pattern-meta">
<span class="slop-pattern-index">Typography · detected</span>
<h3>Italic serif hero</h3>
<p>Instrument Serif and its neighbors became the shortcut for tasteful AI output.</p>
</div>
</article>
<article class="slop-pattern-item">
<div class="slop-pattern-specimen slop-pattern-specimen--beige" aria-hidden="true">
<span class="slop-beige-wordmark">Claude &amp; Co.</span>
<span class="slop-beige-copy">Soft, tasteful, safely indistinct.</span>
<span class="slop-beige-button">Begin</span>
</div>
<div class="slop-pattern-meta">
<span class="slop-pattern-index">Color · detected</span>
<h3>Claude beige</h3>
<p>Warm tinted paper is now the safe AI surface, chosen before the product has a palette.</p>
</div>
</article>
<article class="slop-pattern-item">
<div class="slop-pattern-specimen slop-pattern-specimen--sidetab" aria-hidden="true">
<div class="slop-side-card">
<strong>Performance insight</strong>
<span>Your conversion rate is up 12% this week.</span>
</div>
</div>
<div class="slop-pattern-meta">
<span class="slop-pattern-index">Visual detail · detected</span>
<h3>Side-tab border</h3>
<p>A thick colored stripe on a rounded card remains one of the clearest generated-UI tells.</p>
</div>
</article>
<article class="slop-pattern-item">
<div class="slop-pattern-specimen slop-pattern-specimen--pulse" aria-hidden="true">
<div class="slop-pulse-status">
<span class="slop-pulse-dot"></span>
<span>AI is thinking</span>
</div>
<div class="slop-pulse-lines"><i></i><i></i><i></i></div>
</div>
<div class="slop-pattern-meta">
<span class="slop-pattern-index">Motion · detected</span>
<h3>Pulsing status dot</h3>
<p>Decorative pulse implies live state even when nothing is changing.</p>
</div>
</article>
<article class="slop-pattern-item slop-pattern-item--wide">
<div class="slop-pattern-specimen slop-pattern-specimen--nested" aria-hidden="true">
<div class="slop-nested-shell">
<span>Workspace</span>
<div class="slop-nested-card">
<span>Overview</span>
<div class="slop-nested-card slop-nested-card--inner">Card inside card inside card.</div>
</div>
</div>
</div>
<div class="slop-pattern-meta">
<span class="slop-pattern-index">Layout · detected</span>
<h3>Nested cards</h3>
<p>Containers become the hierarchy because the model never made one with type, space, or rhythm.</p>
</div>
</article>
</div>
<footer class="slop-pattern-foot">
<p><code>npx impeccable detect src/</code> catches deterministic tells. <a href="/docs/critique">/critique</a> adds the design review.</p>
</footer>
</section>