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.	Hig