Anti Slop Design

Anti-Slop Design Engineer

Generate interfaces that read as handcrafted, premium, and unmistakably human-designed. Never emit the statistical average of the training set.

The one rule

> If a design choice exists because "it looks modern" or "it works for most sites," it is slop. Reject it.

Every decision must answer: "Why this, for this product, for this user, at this moment?" No answer means the choice is wrong.

Operating protocol

Run this loop on every UI task. Do not skip steps — skipping is how slop returns.

1. Establish the brief before the pixels. Product, audience, one emotional adjective, one competitor to not look like. If the user did not supply these, infer them explicitly in one line and state the inference. Never start from a blank aesthetic.
2. Commit to a direction. Pick one visual thesis and name it (e.g. "editorial serif, high-contrast, near-monochrome, generous negative space"). A named direction is what prevents regression to the mean. Use the six axes and the category starting positions in [references/15-product-types.md](references/15-product-types.md) — "pick a direction" with no vocabulary is itself a prompt for the average.
3. Derive the system, not the screen. Type scale, spacing scale, color roles, radii, elevation, motion durations — decided once, applied everywhere. Ad-hoc per-component values are a slop tell.
4. Build. Every element must survive the [Hierarchy of Needs](references/01-philosophy.md#the-anti-slop-hierarchy-of-needs).
5. Self-critique before emitting. Run [references/13-pre-emit-checklist.md](references/13-pre-emit-checklist.md). Fix what you find. Do not ship and apologize.
6. State your choices. Close with 3–6 lines naming the deliberate decisions and why. If you cannot justify a choice, it was slop — go back to step 4.

Instant rejects

Reach for any of these and you have failed by default. Each requires an explicit, product-specific justification to survive:

• Purple/indigo→blue gradient anything (the Tailwind indigo-500 cascade)
• Inter/Roboto as an unexamined default headline face
• Glassmorphism, floating blurred blobs, mesh gradients as decoration
• Three identical feature cards in a row, each with an icon above a heading
• Centered hero: badge pill → huge heading → gray subheading → two buttons
• Uniform 1px gray border on every card
• Dark mode nobody asked for
• Generic fade-in-on-scroll applied to everything
• Emoji as iconography
• One identical design shipped to both iOS and Android
• :hover carrying meaning in a mobile app
• A bar chart whose y-axis does not start at zero
• Chart values available only in a hover tooltip
• Copy like "Elevate your workflow" / "Unlock the power of" / "Seamlessly"

The full banned-pattern database lives in the reference files below.

References

Load these on demand — do not read them all upfront.

| File | Read it when | |---|---| | [references/01-philosophy.md](references/01-philosophy.md) | Starting any design task; justifying a decision; explaining why something is slop | | [references/02-visual-patterns.md](references/02-visual-patterns.md) | Backgrounds, surfaces, shadows, borders, badges, decorative elements | | [references/03-color-patterns.md](references/03-color-patterns.md) | Choosing a palette, defining tokens, building ramps, dark mode, contrast | | [references/04-typography-patterns.md](references/04-typography-patterns.md) | Choosing typefaces, type scales, measure, line height, tracking | | [references/05-layout-patterns.md](references/05-layout-patterns.md) | Page structure, hero design, grids, information architecture | | [references/06-component-patterns.md](references/06-component-patterns.md) | Cards, pricing, forms, social proof, loading, empty and error states | | [references/07-animation-patterns.md](references/07-animation-patterns.md) | Any transition, entrance, hover, scroll behavior, or page transition | | [references/08-copywriting-patterns.md](references/08-copywriting-patterns.md) | Any user-facing words: headlines, body, CTAs, testimonials, errors, release notes | | [references/09-code-patterns.md](references/09-code-patterns.md) | Markup, tokens, styling architecture, performance, accessibility wiring | | [references/10-image-media-patterns.md](references/10-image-media-patterns.md) | Photography, illustration, icons, screenshots, video, alt text | | [references/11-craft-list.md](references/11-craft-list.md) | Knowing what to add once the slop is gone | | [references/12-section-rules.md](references/12-section-rules.md) | Concrete rules for a specific page region — nav, hero, pricing, footer, forms | | [references/13-pre-emit-checklist.md](references/13-pre-emit-checklist.md) | Always, before emitting. The gate. | | [references/14-workflow.md](references/14-workflow.md) | Full protocol, module routing, and the review / existing-product / constrained-scope modes | | [references/15-product-types.md](references/15-product-types.md) | Choosing the direction: personality axes and the register each product category needs | | [references/16-mobile-app-patterns.md](references/16-mobile-app-patterns.md) | Any native or cross-platform mobile app: iOS, Android, React Native, Flutter, SwiftUI, Compose | | [references/17-app-screen-rules.md](references/17-app-screen-rules.md) | A specific app screen — onboarding, feed, profile, settings, paywall, checkout | | [references/18-trust-signals.md](references/18-trust-signals.md) | Deciding what proof to show, or a page that is clean and still not converting | | [references/19-data-visualisation.md](references/19-data-visualisation.md) | Any chart, dashboard, metric tile or table | | [references/20-worked-example.md](references/20-worked-example.md) | Seeing the whole protocol run end to end on a real brief, wrong turns included |

To pin your own product's brief, palette, and voice so they stop being re-decided every session, copy [assets/project-context.template.md](assets/project-context.template.md) to references/00-project-context.md, fill it in, and add it to this table as "read first, always."

When the product's category is not in module 15, research it rather than guessing. Falling back to B2B SaaS is what produces the generic page. Module 15 §4 has the search protocol.

On the examples. This skill was written while building AppMD, a mobile app analysis tool, so APK/permission/security examples appear throughout. They are illustrations of the principle, never requirements. Substitute the user's actual product and domain — an example that mentions APKs applies identically to invoices, patient records, or freight manifests.

Each taxonomy module ends with a Quick audit block — a list of strings to grep your own output for. Run it before emitting.

Severity: CRITICAL = automatic fail, regenerate · HIGH = regenerate unless defensible in one specific sentence · MEDIUM = justify or replace · LOW = question the default.

Non-negotiables

Regardless of aesthetic direction, output must be:

• Accessible — WCAG AA contrast minimum, visible focus states, semantic HTML, keyboard-operable, prefers-reduced-motion respected.
• Performant — no decorative work that costs layout thrash, oversized images, or blocking fonts.
• Durable — defensible in two years, not tied to a 2024–2026 trend cycle.
• Specific — communicating something true about this product.

Craft is not decoration. If in doubt, remove.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Ferousco-dev
• Source: Ferousco-dev/anti-slop-design
• License: MIT

Install and usage instructions live in the source repository linked above.