Every file here is the unedited stdout of the command named, run once on the date given. That date is 2026-11-11; 6 of the 10 commands are model-backed and ran through the claude agent provider. A different run can answer differently. The manifest marks antislop as rerun on that date after a first attempt failed.
One run of every capability against one slop card
Run
Command
Exit
Seconds
Output
route
unslopper route "this landing page looks AI generated, what is wrong with it"
unslopper texture --name paper --subject "a small press publishing poetry" --ground "#EFE8D9" --light "#2A2420" --signal "#B5472A" --agent-provider claude
The card is tests/fixtures/audit-slop-card.html, the lesson 3 feature card for an imaginary coding agent. Each frame is the recorded file with its remote font links removed, because this site loads nothing from outside; the headline falls back to a system serif where the file asked for Instrument Serif.
<p class="copy"> (line 36)"powerful" in "Our powerful AI-driven planning engine lets you seamlessly see the plan before any changes are ma..."
<p class="copy"> (line 36)"AI-driven" in "Our powerful AI-driven planning engine lets you seamlessly see the plan before any changes are ma..."
<p class="copy"> (line 36)"seamlessly" in "Our powerful AI-driven planning engine lets you seamlessly see the plan before any changes are ma..."
<p class="copy"> (line 36)"empowering" in "Our powerful AI-driven planning engine lets you seamlessly see the plan before any changes are ma..."
Fixes first: Delete filler badges, Drop redundant labels, Unitalicize random words, Mono only where needed, Make headlines specific, Show the actual product, Group with spacing, Use a design system, Add an accent colour, Improve text contrast, Wrap headlines properly.
A template feature card: purple-to-blue gradient, Instrument Serif with arbitrary italics, a mono eyebrow with numbering and a NEW pill, and filler copy. Almost nothing on it is a choice.
This is the standard purple, blue and cyan diagonal. None of its colours come from a planning or coding subject, and it sets the default tone for the whole card.
Verbose, redundant textContent
Default at p.copy (line 36)
"Our powerful AI-driven planning engine lets you seamlessly see the plan before any changes are made, empowering you to edit, reorder, or reject it with confidence."
The paragraph repeats the headline's 'plans first' idea and wraps it in stacked buzzwords. Its only useful content is 'edit, reorder, or reject'.
1px solid rgba(255,255,255,.28/.3/.35) on the card, the pill inside it and both buttons inside it
Bordered boxes are nested inside a bordered box. Both CTAs carry the same treatment, so neither reads as primary.
Overusing dividersSurface
Default at hr (lines 34, 37)
two <hr> with border-top 1px rgba(255,255,255,.25)
Two hairlines split a card of five short elements. Spacing alone would separate them.
SquirclesSurface
Default at .box radius 22px with 22px padding; .ctas span radius 12px; .pill radius 999px
border-radius:22px outer, 12px and 999px inner
Every element gets a soft radius, and the radii don't form a scale. The inner radius should be 22 − 22 = 0, so the nested 12px corners are not concentric with the card.
Fixes first: Drop redundant labels, Delete filler badges, Unitalicize random words.
Scan 14 of 20 before, 0 of 20 after; 15 planned changes; written: yes.
Subtract
Delete filler badges Removed the NEW pill and its styles.
Drop redundant labels Removed the '02 · PLAN' eyebrow and the all-caps 'INTELLIGENT · AUTONOMOUS · SAFE' subtitle.
Unitalicize random words Removed the <em> italics from the headline and dropped Instrument Serif.
Mono only where needed Mono now appears only in the file-path block; the eyebrow that used mono is gone.
Remove embellishments Removed the decorative → arrows from the action labels and the ← from the path line.
Focus
Make headlines specific Replaced 'Plans first. Acts second.' with 'See the plan before any file changes' and cut the body copy to the edit/reorder/reject facts without powerful/AI-driven/seamlessly/empowering.
Show the actual product Turned the breadcrumb into a code block showing the real files the plan touches.
Emphasize the CTA Made 'Get started' the one solid accent button and turned 'Learn more' into a quiet underlined link.
Wrap headlines properly Gave the heading text-wrap: balance and max-width: 22ch.
Systematize
Use a design system Added tokens for 6 colours, 2 fonts, a 4/8/12/16/24 spacing scale and a radius, and replaced the 8 white alpha values with them.
Add an accent colour Replaced the purple-to-cyan gradient with a calm ground and used the brand purple #6E4CF5 only on the primary action.
Group with spacing Removed both <hr> dividers and every border, so spacing alone now separates text, the code block and the actions.
Improve text contrast Replaced low-opacity white-on-gradient text with solid ink (17:1) and ink-soft (8.6:1); white on the accent is 5.8:1.
Inner radius = outer - padding Nested elements no longer try to sit concentric with the card corners; they now take small radii from the spacing scale.
Use tabular nums Turned on tabular-nums in the code block, which holds the '3 relevant' count.
What to check by hand
The page had no <a> or href values. Both actions were plain <span>s and still are, so 'Get started' and 'Learn more' need real links before they work.
I rewrote the copy as 'Edit it, reorder it or reject it with confidence.', built only from the original sentence. Check the headline 'See the plan before any file changes' against the brand voice.
The accent is the brand purple #6E4CF5. I dropped the blue and cyan from the gradient. Bring one back if they are required brand colours.
The page has no list or data feed, so I designed no loading, empty or error states and added no motion.
The page has no list or data feed, so I designed no loading, empty or error states. It has no motion either, and I added none.
The unified diff
--- a/card.html
+++ b/card.html
@@ -5,37 +5,43 @@
<title>Feature card, default AI output</title>
<!-- The slop card from lesson 3 of docs/unslop-school.html, without the course's numbered callout dots. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400&display=swap">
<style>
:root{
+ /* colour */
+ --ink:#16141F; /* text, 17:1 on --paper */
+ --ink-soft:#4A4658; /* secondary text, 8.6:1 on --paper */
+ --paper:#F6F5FA; /* ground */
+ --surface:#FFFFFF; /* card */
+ --accent:#6E4CF5; /* brand purple; white on it is 5.8:1 */
+ --code-bg:#ECEAF4;
+ /* type */
--display:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
--mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+ /* spacing */
+ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
+ /* radius */
+ --r-outer:20px;
}
-.slop{background:linear-gradient(135deg,#6E4CF5 0%,#3B82F6 55%,#22D3EE 100%);padding:22px;color:#fff;position:relative}-.slop .box{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);border-radius:22px;padding:22px}-.slop .eb{font:500 11px/1 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.7)}-.slop .pill{display:inline-block;font:600 10px/1 var(--display);letter-spacing:.08em;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);margin-left:8px;vertical-align:middle}-.slop h5{font:400 30px/1.1 "Instrument Serif",Georgia,serif;letter-spacing:-.03em;margin:14px 0 8px}-.slop h5 em{font-style:italic}-.slop .sub{font:600 11px/1.4 var(--display);letter-spacing:.12em;opacity:.75}-.slop hr{border:0;border-top:1px solid rgba(255,255,255,.25);margin:14px 0}-.slop .crumb{font:400 12px/1.5 var(--mono);opacity:.8}-.slop .copy{font:400 13px/1.5 var(--display);opacity:.72;margin-top:10px}-.slop .ctas{display:flex;gap:8px;margin-top:14px}-.slop .ctas span{font:600 12px var(--display);padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
+.slop{background:var(--paper);padding:var(--s5);color:var(--ink);font-family:var(--display)}
+.slop .box{background:var(--surface);border-radius:var(--r-outer);padding:var(--s5);max-width:44ch}
+.slop h5{font:700 26px/1.15 var(--display);letter-spacing:-.02em;margin:0;text-wrap:balance;max-width:22ch}
+.slop .copy{font:400 15px/1.5 var(--display);color:var(--ink-soft);margin:var(--s2) 0 0}
+.slop .crumb{font:400 13px/1.5 var(--mono);font-variant-numeric:tabular-nums;background:var(--code-bg);color:var(--ink);
+ /* not corner-hugging (card padding exceeds outer radius), so a small radius from the same scale */
+ border-radius:var(--s1);padding:var(--s3) var(--s4);margin:var(--s4) 0 0;white-space:pre-wrap}
+.slop .ctas{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5)}
+.slop .ctas .cta{font:700 14px/1 var(--display);padding:var(--s3) var(--s4);border-radius:var(--s2);background:var(--accent);color:#fff;cursor:pointer}
+.slop .ctas .sec{font:500 14px/1 var(--display);color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
</style>
</head>
<body>
<div class="slop" id="cardSlop">
<div class="box">
- <div class="eb">02 · PLAN<span class="pill">NEW</span></div>- <h5>Plans <em>first</em>. Acts <em>second</em>.</h5>- <div class="sub">INTELLIGENT · AUTONOMOUS · SAFE</div>- <hr>- <div class="crumb">src/auth/refresh.py → tests/auth/ ← 3 relevant</div>- <p class="copy">Our powerful AI-driven planning engine lets you seamlessly see the plan before any changes are made, empowering you to edit, reorder, or reject it with confidence.</p>- <hr>- <div class="ctas"><span>Learn more →</span><span>Get started →</span></div>
+ <h5>See the plan before any file changes</h5>
+ <p class="copy">Edit it, reorder it or reject it with confidence.</p>
+ <pre class="crumb">src/auth/refresh.py → tests/auth/ (3 relevant)</pre>
+ <div class="ctas"><span class="cta">Get started</span><span class="sec">Learn more</span></div>
</div>
</div>
</body>
Audit 15 of 20 before, 0 of 20 after; written: yes.
audit ran: 15/20, Pure default output. Textbook default output: a purple-to-blue glass card that stacks almost every AI tell and still never says what the feature does.
direct ran: Brief: A single feature card that presents one product feature. The page names no product, subject or audience, so a designer would first need to know what the feature belongs to and who it is for. Applied ground #1C2A30, light #E4E8E3, signal #FF6A1F; Big Shoulders Stencil Display with Barlow. 7 edits.
texture skipped: Skipped: --with-texture was not asked for.
polish ran: 1 edits: Touch targets: gave both CTA controls an invisible ::after hit area at least 44×44px, so they look the same at rest
audit ran: 0/20, No defaults showing. A clean, committed card: specific headline, useful copy, one accent CTA, and the mono and file paths sit inside a real plan preview, so nothing here reads as a default.
The three-line summary
Score 15/20 before, 0/20 after.
Biggest moves: 15 fixes (Delete filler badges, Drop redundant labels, Unitalicize random words); a committed direction (#1C2A30/#E4E8E3/#FF6A1F, Big Shoulders Stencil Display); 1 polish edits.
Check by hand: The CTAs were already plain <span> elements with no href, so there were no links to preserve. They are still spans, now marked up as a primary button and a secondary link-style label; I rewrote the copy to 'Edit, reorder or reject the plan. Nothing runs until you approve it.' The second sentence restates 'see the plan before any changes are made' and adds no new claim, but please check the wording; open the result in a browser, confirm the signal colour sits on one element, and read the copy aloud.
The unified diff
--- a/card.html
+++ b/card.html
@@ -5,37 +5,53 @@
<title>Feature card, default AI output</title>
<!-- The slop card from lesson 3 of docs/unslop-school.html, without the course's numbered callout dots. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@700&family=Barlow:wght@400;500;700&family=JetBrains+Mono:wght@400&display=swap">
<style>
:root{
- --display:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
+ --ground: #1C2A30;
+ --light: #E4E8E3;
+ --signal: #FF6A1F;
+ --font-display: 'Big Shoulders Stencil Display', 'Arial Narrow', sans-serif;
+ --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
+ /* colour: legacy names mapped onto the harbour tokens */
+ --surface:color-mix(in oklch, var(--ground), var(--light) 7%);
+ --ink:var(--light);
+ --muted:color-mix(in oklch, var(--light) 78%, var(--ground));
+ --accent:var(--signal);
+ /* type */
+ --display:var(--font-display);
+ --body:var(--font-body);
--mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+ /* spacing scale */
+ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
+ /* radius */
+ --r-card:20px;
}
-.slop{background:linear-gradient(135deg,#6E4CF5 0%,#3B82F6 55%,#22D3EE 100%);padding:22px;color:#fff;position:relative}-.slop .box{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);border-radius:22px;padding:22px}-.slop .eb{font:500 11px/1 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.7)}-.slop .pill{display:inline-block;font:600 10px/1 var(--display);letter-spacing:.08em;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);margin-left:8px;vertical-align:middle}-.slop h5{font:400 30px/1.1 "Instrument Serif",Georgia,serif;letter-spacing:-.03em;margin:14px 0 8px}-.slop h5 em{font-style:italic}-.slop .sub{font:600 11px/1.4 var(--display);letter-spacing:.12em;opacity:.75}-.slop hr{border:0;border-top:1px solid rgba(255,255,255,.25);margin:14px 0}-.slop .crumb{font:400 12px/1.5 var(--mono);opacity:.8}-.slop .copy{font:400 13px/1.5 var(--display);opacity:.72;margin-top:10px}-.slop .ctas{display:flex;gap:8px;margin-top:14px}-.slop .ctas span{font:600 12px var(--display);padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
+.slop{background:var(--ground);padding:var(--s5);color:var(--ink);font-family:var(--body)}
+.slop .box{background:var(--surface);border-radius:var(--r-card);padding:var(--s5)}
+.slop h5{font:700 24px/1.2 var(--display);letter-spacing:-.01em;margin:0 0 var(--s2);text-wrap:balance;max-width:24ch}
+.slop .copy{font:400 15px/1.5 var(--body);color:var(--muted);margin:0;max-width:52ch}
+/* the plan preview is real output, so mono belongs here; inner radius = 20 - 24 padding -> clamp to a small radius */
+.slop .crumb{font:400 13px/1.6 var(--mono);color:var(--ink);background:var(--ground);border-radius:var(--s1);padding:var(--s3) var(--s4);margin:var(--s4) 0 0;list-style:none;font-variant-numeric:tabular-nums}
+.slop .crumb li span{color:var(--muted)}
+.slop .ctas{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5)}
+.slop .ctas span{font:500 14px/1 var(--body);color:var(--light);cursor:pointer}
+/* hit area: grow each control to at least 44x44 without changing how it looks */
+.slop .ctas span{position:relative}
+.slop .ctas span::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
+.slop .ctas span.cta{font-weight:700;color:var(--ground);background:var(--accent);padding:var(--s3) var(--s4);border-radius:var(--s2)}
</style>
</head>
<body>
<div class="slop" id="cardSlop">
<div class="box">
- <div class="eb">02 · PLAN<span class="pill">NEW</span></div>- <h5>Plans <em>first</em>. Acts <em>second</em>.</h5>- <div class="sub">INTELLIGENT · AUTONOMOUS · SAFE</div>- <hr>- <div class="crumb">src/auth/refresh.py → tests/auth/ ← 3 relevant</div>- <p class="copy">Our powerful AI-driven planning engine lets you seamlessly see the plan before any changes are made, empowering you to edit, reorder, or reject it with confidence.</p>- <hr>- <div class="ctas"><span>Learn more →</span><span>Get started →</span></div>
+ <h5>See the plan before any file changes</h5>
+ <p class="copy">Edit, reorder or reject the plan. Nothing runs until you approve it.</p>
+ <ul class="crumb" aria-label="Example plan">
+ <li>src/auth/refresh.py</li>
+ <li>tests/auth/ <span>· 3 relevant</span></li>
+ </ul>
+ <div class="ctas"><span class="cta">Get started</span><span>Learn more</span></div>
</div>
</div>
</body>
direct
unslopper direct "a silent retreat in Kyoto, golden hour on water" --directions 1 --agent-provider claude2026-11-11, 21.5 s, exit 0 direct.json
Brief: a silent retreat in Kyoto, golden hour on water
The last ten minutes of sun on a temple pond in Arashiyama, seen from a cedar veranda as one streak of light crosses the dark water.
signal setting-sun persimmon #E8963Aoklch(74.1% 0.143 64.9)
Light on ground #EFE6D2 on #14211F: 13.35 to 1, passes AA body, AA large, AAA body.
Type: Shippori Mincho B1 for display, Zen Kaku Gothic New for body. Shippori Mincho has the brush-cut strokes of the carved wooden plaques at temple gates, and Zen Kaku Gothic New has the quiet, even voice of a printed schedule card in a shukubō room. Together they read like the retreat's own signage, not like a website. The ink-green ground is the pond under the maples, the paper white is the shoji screens behind the guest, and persimmon appears only once per screen, as the single line of sun on the water.
Hero: A wide, low photograph from inside a darkened tatami room. Through an open shoji, a cedar engawa veranda runs out to the edge of a still pond, which is almost black-green under the maple shade. One cushion sits on the boards. A single horizontal streak of persimmon sunlight crosses the water and catches the rim of a celadon tea bowl on the cushion. The retreat's name is set small in shoji-paper white, vertical, in the upper left shadow.
unslopper texture --name paper --subject "a small press publishing poetry" --ground "#EFE8D9" --light "#2A2420" --signal "#B5472A" --agent-provider claude2026-11-11, 41.2 s, exit 0 texture.json
ground #EFE8D9
light #2A2420
signal #B5472A
Recommended for the subject
Paper texture A small press makes books, so the ground should feel like the sheet the poems are printed on: warm stock with fine fibres and tooth.
Halftone Halftone dots point back to printing and zines. Kept faint in the ink colour, it suits a press that sees itself as part of a print tradition.
Stippled gradients Hand-placed dots that thin out read as handmade and patient, which fits a small press's attention to the craft of the page.
Drawn: Paper texture, as canvas, 1097 bytes.
Paper texture, drawn live in #EFE8D9, #2A2420 and #B5472A
#2A2420 on the plain #EFE8D9 ground comes out at about 12.5:1. The fibres are the text colour at 7% alpha, the grain shifts lightness by only ±7 levels, and the shadow wash is at most 5%. The darkest areas stay near the ground's lightness and still clear 10:1, well above WCAG AA's 4.5:1, so no scrim is needed.
The code is a canvas drawing with its own seeded random, so it draws the same every load. Its script runs here from assets/texture-artifact.js, moved out of the inline tag unchanged because this page allows no inline scripts.
Warning: none.
The code
<canvas class="texture" width="640" height="400"></canvas>
<script>
(function(){
var cv=document.querySelector("canvas.texture"),c=cv.getContext("2d"),W=cv.width,H=cv.height;
var s=20240917;function r(){s|=0;s=s+0x6D2B79F5|0;var t=Math.imul(s^s>>>15,1|s);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296}
c.fillStyle="#EFE8D9";c.fillRect(0,0,W,H);
var g=c.createRadialGradient(W*.2,H*.15,0,W*.2,H*.15,W*.6);g.addColorStop(0,"rgba(255,252,244,.4)");g.addColorStop(1,"rgba(255,252,244,0)");c.fillStyle=g;c.fillRect(0,0,W,H);
g=c.createRadialGradient(W*.85,H*.9,0,W*.85,H*.9,W*.6);g.addColorStop(0,"rgba(42,36,32,.05)");g.addColorStop(1,"rgba(42,36,32,0)");c.fillStyle=g;c.fillRect(0,0,W,H);
c.lineWidth=.8;
for(var i=0;i<1400;i++){var x=r()*W,y=r()*H;c.strokeStyle=r()<.03?"rgba(181,71,42,.06)":"rgba(42,36,32,.07)";c.beginPath();c.moveTo(x,y);c.quadraticCurveTo(x+(r()-.5)*20,y+(r()-.5)*6,x+(r()-.5)*44,y+(r()-.5)*8);c.stroke()}
var d=c.getImageData(0,0,W,H),p=d.data;
for(var j=0;j<p.length;j+=4){var n=(r()-.5)*14;p[j]+=n;p[j+1]+=n;p[j+2]+=n}
c.putImageData(d,0,0);
})();
</script>
Mode teach, term Tabular numbers. Next term: Kerning.
Tabular numbers are digits that all take up the same width, so a 1 is as wide as an 8. That makes columns of prices line up neatly and stops a changing counter or timer from wobbling sideways.
AI mockups almost always leave prices, tables and timers on the font's default proportional digits, because nothing in a typical prompt asks for anything else. The mistake only shows once real numbers stack in a column or start ticking, which a static mockup rarely tests.
Use tabular numbers (font-variant-numeric: tabular-nums) on every price, table column, counter and timer so the digits line up and don't jitter.
route
unslopper route "this landing page looks AI generated, what is wrong with it"2026-11-11, 0.5 s, exit 0 route.json
Job: this landing page looks AI generated, what is wrong with it
Capability audit, skill design-slop-audit, start from unslopper audit page.html.
The job says 'looks ai'. You need to say why a design reads as generated, with evidence and a score, including screenshots.
Topic indicators: 20 items, the same data the scan, the audit and the course read.
The 20 items
Instrument SerifType An elegant italic display serif that became the go-to tasteful choice in 2025. It is a fine typeface, and now it is a signature of generated pages. Fixes 5.
Excessive italicsType Random words in a headline set in italics for flavor, as in Plans <em>first</em>. Acts <em>second</em>. Fixes 3.
Negative kerningType Tight negative letter-spacing applied to every heading, sometimes to body text, so letters start to collide. Fixes 5, 17.
Excessive mono fontsType Monospace used for labels, captions, nav and stats to look technical. Fixes 4.
ALL CAPS subtitlesType Small uppercase lines of adjectives under a headline. Hard to read and rarely read. Fixes 2.
Periods in titlesType Short staccato headlines with full stops. Fast. Confident. Generic. Fixes 9, 16.
Gradient backgroundsSurface The purple to blue diagonal, the most recognizable AI background there is. Fixes 5, 11.
Color shades and opacitiesSurface Many tints of one hue at 10, 20 and 40 percent opacity, stacked until hierarchy turns to mud. Fixes 5, 11, 15.
SquirclesSurface Large soft corner radii on every card, button and image, with nested corners that do not line up. Fixes 14.
Containers with bordersSurface Every block boxed in a thin border, often inside another bordered box. Fixes 8.
Overusing dividersSurface Hairline rules between every section and inside every card. Fixes 8.
DitheringSurface Pixel dither patterns added for retro texture, regardless of the brand. Fixes 13.
ASCII imagesSurface Pictures drawn from characters, used as a shortcut to look technical. Fixes 13, 6.
Tags and pillsStructure Rounded badges on headings and cards that carry no real information. Fixes 1.
EyebrowsStructure A tiny uppercase label above every heading, usually repeating it. Fixes 2.
Section numberingStructure 01, 02, 03 on content that has no real order. Fixes 2.
Code breadcrumbsStructure File paths, arrows and comment syntax used as decoration on marketing pages. Fixes 4, 6.
Verbose, redundant textContent Copy that restates the headline, stacks adjectives and says seamlessly. Fixes 9, 2.
Over-the-top detailed UIContent Fake dashboards crammed with tiny charts, numbers and status dots to look impressive. Fixes 6, 7.
Overly detailed diagramsContent Flowcharts with more boxes, arrows and glows than the idea needs. Fixes 13.
Which capability for which job
The table unslopper route reads. Each row names the capability, the Agent Skill that teaches the same method by hand, and a command to start from.
When
Capability
Skill
Start from
The whole pass on one file: audit, fix, direct, texture, polish, re-audit.
One router and six method skills. Each prefers the tool when it is installed and carries the method for doing the job by hand when it is not.
unslopper
Remove AI design defaults from visual work with the unslopper smart tool: scan or audit HTML, CSS, a URL or a screenshot against twenty slop indicators, apply the fixes as a diff, turn a brief into a three-colour direction with CSS tokens, generate textured backgrounds, teach the twenty design terms, or run the whole pass on one file. Use when a design a model produced looks generic, when asked to "unslop", "de-slop" or "make this look less AI", when a page needs a visual direction or palette, or when someone needs design vocabulary. Drive it as `unslopper` from the command line or `unslopper.lib` from Python. Triggers on "unslopper", "design slop", "AI slop design", "unslop this page", "unslop this design".
Takes any HTML or CSS design through the whole de-sloppping method, end to end: audit against the twenty AI design defaults, apply the four fixing moves, commit to a three-colour direction when there is none, add a textured background when the page is flat, polish the craft and the copy, then re-audit and report the before and after score. Use when asked to make a page "not look AI-generated", "unslop this design", "clean up this landing page", or to run the visual twin of a writing antislop pass. Prefers the `unslopper antislop` command when it is installed and runs the same method by hand otherwise.
Reviews a visual design (a screenshot, an HTML or CSS file, or a live URL) against twenty indicators of AI design defaults and reports which show, with evidence, whether each looks deliberate or default, a score out of twenty and the three fixes to make first. Read-only, so it is safe to run on anything. Use when asked whether a design looks AI-generated, to audit or review a landing page or mockup for slop, or before fixing one. Triggers on "design slop", "this design looks AI generated", "audit this design for AI defaults", "AI slop page".
Teach a non-designer the twenty design terms they need to direct AI design work (kerning, tracking, leading, x-height, tabular numbers, line length, widow, optical centre, touch target, safe area, affordance, combobox, progressive disclosure, layout shift, OKLCH, optimistic update, origin-aware animation, stagger, interruptible animation, shared element transition), one short turn at a time, with a wrong-versus-right demo, a quiz and a sentence to paste into a prompt. Use when someone says "teach me design terms", "quiz me on design terms", or "name the design terms behind what is wrong in this screenshot". Prefers `unslopper tutor` when installed and runs the lesson by hand from references/terms.md otherwise.
Turns a short product or brand brief into a committed visual direction before any layout is built: one concrete scene, three colours with roles (ground, light, signal) that pass WCAG AA, a display and body face from Google Fonts the subject would use on its own signage, one hero image idea, and a :root block of CSS tokens. Use before asking a model to design a page, when a page has no committed visual direction, or when a product, brand or page needs its colours and type chosen for it. Triggers when a product, brand or page needs a colour palette, a visual direction, brand colours, a colour scheme, a type pairing or design tokens chosen for it.
Replaces a flat fill or a purple gradient with a textured background from the subject's own world, as self-contained CSS or a small seeded canvas script in the design's palette, under 3 KB, with text on top kept at WCAG AA. Knows the course's twenty-two textures (felt, fluted glass, blueprint grids, paper, halftone, contour lines, water ripples and the rest), recommends two or three for a subject and says why, and warns when dithering, ASCII or a gradient is used as decoration. Use when a page background is flat, when a design shows the purple-to-blue gradient, when someone asks for a background texture, grain, noise, pattern or a textured hero. Triggers on "background texture", "textured background", "grainy gradient", "noise texture", "background pattern".
Removes AI design defaults from an existing HTML or CSS page or component by applying twenty fixes in four moves (Subtract, Focus, Systematize, Respond) while keeping the content, brand colours, layout intent and every link and form. Shows a diff before writing. Use when a page or component "looks AI generated", "reads as design slop", needs "unslopping", or a design audit scored it three or more out of twenty.