anti-slop-design
Helps your agent create user interfaces with a unique, high-quality visual style. It avoids generic designs and improves the overall look of the software.
What it does
This AI agent helps improve the design of websites and apps. It removes generic and poor design elements created by other AIs, making the interface more professional, user-friendly, and human-like.
When to use it
- ✓When you want a website or app to look more professional.
- ✓When a website or app's design feels generic or messy.
- ✓When refining or fixing the look of a coding project.
Example of what to ask your AI
“Turn this AI prototype into a professional, user-friendly design.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It analyzes the current design, identifies common bad AI design patterns, and replaces them with cleaner, more effective design solutions. It focuses on making things clear and useful for the user.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill anti-slop-designOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/anti-slop-design/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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:
- 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.
- Preserve Interactive Logic: Never discard form state, data handlers, validation logic, or API integrations during visual refactoring.
- 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. |
…
FAQ
What is design 'slop'?
'Slop' is a term used to describe generic, messy, or low-quality designs that are sometimes created by AI tools without human oversight.
What are 'token archetypes'?
These are basic, well-defined design elements like colors, fonts, and spacing that are used consistently to create a professional and cohesive look.
What does '7-axis quality gating' mean?
It's a multi-step checking process (seven 'axes' or criteria) to ensure the design meets high quality standards before it's finalized.
Details
Original description by the author
Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token archetypes and 7-axis quality gating.
Popularity
- GitHub stars
- 48k
- Ranking position
- #2141
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC