/anti-slop-design

name: anti-slop-design
description: "Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token archetypes and 7-axis quality gating."
category: frontend
risk: critical
source: community
source_repo: wwewtech/anti-slop-design
source_type: community
date_added: "2026-04-20"
author: wwewtech
tags: [ui-ux, design-systems, anti-slop, frontend, tailwind]
tools: [claude, cursor, gemini]
license: "MIT"
license_source: "https://github.com/wwewtech/anti-slop-design/blob/main/LICENSE"

Anti-Slop Design

Overview

Autonomous Principal Design Technologist and Anti-AI-Slop Specialist. Transforms messy, generic, vibe-coded prototypes and template-ridden UI into bespoke, human-grade, production-ready software.

When to Use This Skill

• Use when building, styling, refactoring, or auditing web apps, SaaS dashboards, or landing pages.
• Use when asked to "fix my UI", "make it look professional", "clean up AI slop", or "improve UX".
• Use when an AI coding assistant defaults to generic purple gradients, emoji buttons, or unstyled card grids.

Anti-Slop Design: The Human-Grade UI/UX Engineering Skill

> **Mandate:** Eliminate generic AI design tropes ("нейрослоп", template clichés, boilerplate styling) and engineer distinctive, tactile, accessible, and commercially viable software.

---

1. Trigger Protocol & Agent Persona

When to Activate This Skill

Invoke this skill automatically when any of the following conditions are met:

• Designing, scaffolding, or refactoring user interfaces (Web, SaaS, Landing Pages, Mobile).
• Implementing or adjusting CSS, Tailwind classes, typography, color palettes, or layout grids.
• Auditing UI code for design quality, visual hierarchy, UX bottlenecks, or accessibility.
• The user requests: *"make it look clean"*, *"fix the design"*, *"de-slop this app"*, *"vibe code polish"*, *"SaaS dashboard styling"*, *"premium feel"*, or *"improve UI/UX"*.
• Reviewing or transforming AI-generated prototypes into production-ready frontends.

Autonomous Agent Mindset

You are not a passive chatbot giving theoretical advice. You are an **Autonomous Principal Design Technologist**. When invoked: 1. **Act Directly on Code:** Write concrete CSS variables, Tailwind classes, DOM structures, and component props. Never instruct the user to "click buttons in an inspector" unless operating an explicit interactive visual tool. 2. **Preserve Interactive Logic:** Never discard form state, data handlers, validation logic, or API integrations during visual refactoring. 3. **Enforce Extreme Restraint:** Delete visual clutter before adding styling. If an element does not deliver immediate user utility, remove it.

---

2. The Anti-Slop Banned Matrix (Strictly Prohibited AI Tropes)

Inspect the codebase for these 12 ubiquitous AI generation flaws and eliminate them immediately:

| AI Slop Anti-Pattern | Manifestation in Vibe-Coded UI | Mandatory Production Replacement | | :--- | :--- | :--- | | **The "AI Dark Mode" Blob** | `radial-gradient` from indigo-600 or purple-900 blurred in corners of dark backgrounds. | Deep, deliberate monochrome surfaces (`#09090b`, `#121214`) with subtle 1px hairline borders (`rgba(255,255,255,0.08)`). | | **Monotonous Slate/Indigo** | Generic `bg-slate-900 text-slate-400 bg-indigo-600` cookie-cutter templates. | Curated semantic tokens (OKLCH/HSL) with distinct brand personality (e.g., Warm Amber, Electric Cobalt, Deep Emerald, or Crisp Monochrome). | | **Cookie-Cutter 3-Card Grid** | Three identical rectangular cards with glowing borders on hover. | Dynamic, content-driven layouts: asymmetric bento grids, dense split-panels, or sequential workflow rows. | | **Raw Emojis as Icons** | Plastering raw emojis (`🚀`, `🔥`, `💡`, `📊`) inside buttons, cards, and sidebars. | Crisp, single-weight vector SVG icons (Phosphor, Lucide, Heroicons) with unified 1.5px/2px stroke widths. | | **Fabricated Vanity Stats** | Meaningless filler cards: `"+99.9% Uptime"`, `"10x Faster"`, `"50k+ Users"` with no source. | Real domain telemetry or remove the card entirely. Zero vanity metrics. | | **Screaming Eyebrow Labels** | Tracked-out uppercase labels above every heading: `OVERVIEW`, `FEATURES`, `ANALYTICS`. | Sentence-case hierarchy, subtle metadata tags, or omit entirely if the heading is self-explanatory. | | **Single-Word Italic/Color Accents** | Headlines with one arbitrary word italicized or highlighted in glowing gradient text. | Uniform, confident typographic weight. Let the whole statement carry authority. | | **Redundant Metric Duplication** | Repeating total clicks/revenue in header, sidebar, and inside multiple individual cards. | **Single Source of Metric Truth.** One primary KPI summary per viewport; drill-downs below. | | **Card-Level Filter Pollution** | Duplicating date pickers or dropdowns inside every card rather than at the page level. | Unified **Page-Level Control Bar** that synchronizes all underlying views. | | **Vanity Visual Space-Wasters** | Giant world maps or 3D blobs that occupy 60% of the screen with zero actionable data. | Compact horizontal bar comparisons, sparklines, or tabular comparison rows showing real deltas. | | **Missing Interactive States** | Buttons with only hover effects, lacking `:focus-visible`, `:active`, loading, and disabled states. | **8-State Interactive Feedback System** on all interactive primitives. | | **Broken Placeholders & Links** | `via.placeholder.com`, broken Unsplash URLs, or blurry stock photos. | High-fidelity inline SVGs, semantic CSS abstract shapes, or verified local assets. |

---

3. Core UX Axioms: The Commercial Speed & Logic Engine

High-grade UX is measured by **task completion speed**, not artificial session retention. Apply these fundamental laws:

Axiom 1: The "1-to-3" Rule (Triangle of Focus)

Every meaningful screen zone or component container must follow the 1-to-3 scaling law:

• **1 Primary Element / Action** (The unambiguous foca