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: AI & Agents
source: antigravity
tags: [api, claude, ai, agent, workflow, template, design, image, tailwind, aws]
url: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/anti-slop-design
---


# 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