Eliminate AI Design Slop and Ship Production-Ready UI

Anti-Slop Design puts the assistant in the role of an "Autonomous Principal Design Technologist" that acts directly on frontend code - CSS custom properties, Tailwind classes, DOM structure, component props - rather than describing changes for a human to make, and explicitly preserves form state, data handlers, and API integrations during any visual refactor. It is built around a banned matrix of 12 specific AI-slop patterns (blurred indigo/purple radial gradient blobs, cookie-cutter 3-card grids, raw emojis used as icons, fabricated vanity stats like "10x Faster," screaming uppercase eyebrow labels, single-word italic accent headlines, redundant metric duplication, card-level filter pollution, giant decorative maps or 3D blobs, missing interactive states, and broken placeholder images/links), each paired with a named production replacement. Four core UX axioms constrain layout: the "1-to-3" rule (one primary element, max three secondary), an 85%-usage prioritization law for surfacing the most common action, a strict ban on duplicate brand marks/CTAs/filter bars, and mobile-style vertical linearity even on desktop. Eight "cures" cover visual-DNA token extraction from a reference screenshot, bespoke SVG/HTML assets instead of placeholders, typography rules (max 2 font families, tabular numbers, 65-75ch line length), a strict 4px/8pt spacing grid with a nested corner-radius formula, cognitive de-cluttering, and four ready-made layout scaffolds (SaaS shell, high-density dashboard, conversion landing page). Four token archetypes - Quiet Luxury SaaS, Technical Dense Terminal, Editorial and Refined, and Warm Tactile - each ship as a complete CSS custom-property block for background, border, accent, and text tokens. Every interactive element must implement an 8-state feedback system (default, hover, focus-visible, active/press, disabled, loading, error, success), with named animation timing (120-180ms for dropdowns, 200-250ms for modals, 0ms for actions used 100+ times a day) and a specific tactile press effect:

.btn-primary:active {
  transform: scale(0.97);
}

The skill runs a fixed 5-phase execution loop (diagnostic audit, archetype/token setup, macro-layout, component craft, quality gate) and ends every task at a mandatory 7-axis quality gate - anti-slop purity, UX speed/1-to-3, typographic discipline, spacing/geometry, micro-interactions, accessibility (WCAG 2.1 AA), and mobile/responsive linearity - where each axis is scored 1-5 and every axis must reach at least 4 before the code is considered done; a failing score sends the work back to the layout phase.

Use it when building, styling, refactoring, or auditing web apps, SaaS dashboards, or landing pages, or when a user asks to "fix my UI," "de-slop this app," or otherwise clean up generic AI-generated frontend output. Its own limitations section says its rules are opinionated and should defer to an already-mandated brand design system, that the 7-axis gate is a heuristic checklist and not a substitute for user research, usability testing, or brand/legal review, and that it does not replace accessibility audits, performance profiling, or backend/API design work; its archetype tokens and Tailwind examples assume a web stack, so native mobile or desktop toolkits need different patterns.

Input is an existing frontend codebase or a request to design one, optionally with a reference screenshot or style direction from which the skill extracts five foundation tokens (canvas background, elevated surface, primary accent, text hierarchy, hairline border) and a spacing density, without copying visible bugs like misaligned text. Output is production code: CSS custom properties for the chosen archetype, a layout built on one of the four proven scaffolds, replacement SVG icons and inline HTML mockups instead of placeholder images, and components implementing all 8 interactive states, delivered only after passing the 7-axis quality gate.

Its metadata lists Claude, Cursor, and Gemini as supported tools and tags the skill for UI/UX, design systems, frontend, and Tailwind; it names specific icon sets (Phosphor, Lucide, Heroicons) and typefaces (Inter, Space Grotesk, Plus Jakarta Sans, Playfair Display, JetBrains Mono, Fira Code) as its default choices across the four archetypes.

Frontend developers and teams using AI coding assistants who keep getting generic purple gradients, emoji buttons, and unstyled card grids, and who want a disciplined, checkable path to a distinctive, accessible interface rather than one more round of unstructured styling requests. The skill is credited to author wwewtech under an MIT license.