How to Clean AI Slop from Web Interfaces with kill-ai-slop

Every time someone generates an interface through Claude or Cursor without a clear design system, the output is the same template. Purple-indigo gradients, glowing card borders, emojis scattered across the screen, UPPERCASE in metric counters, and a mascot in the corner.

Machines generate these elements when they lack taste but need to create the appearance of complex work. We've become so accustomed to this visual noise on Product Hunt and in fresh pet projects that we've stopped noticing it.

A project kill-ai-slop recently appeared on GitHub that declared war on this digital tastelessness. The author compiled 33 characteristic signs of generated design, organized them, and wrote a tool for automatic code cleanup.

Two Parts of One Project

The repository tackles the problem at two levels: theoretical and practical.

On one hand, it's an interactive reference deployed on a separate website. It contains 33 specific machine design patterns. Each example includes an interactive before-and-after demo in pure HTML, demonstrating how to transform a cluttered block into clean markup.

On the other hand, the project includes a ready-made skill for coding assistants and a standalone scanner. The utility traverses the source tree, identifies generated code markers, explains the root cause, and suggests a clean fix.

What Exactly the Scanner Considers Junk

The project's database contains no abstract complaints—all rules stem from actual snippets that generative models inject into CSS and markup by default.

The scanner looks for characteristic markers:

• Blurred color blobs and gradient glows behind cards (the blur effect with purple hues)
• Meaningless status badges above every heading
• Emojis everywhere instead of proper typography or vector icons
• Copy loaded with corporate buzzwords like "unlock the power of your data"

The project site itself is designed as the complete opposite of these patterns. It uses a paper and ink concept: a strict grid, a single accent red for annotations, thin dividers, and zero dependency on heavy client-side scripts.

How to Run the Check on Your Own

You can check the project without installing bulky packages. The scanner is written in pure Node.js and doesn't pull in a dependency tree.

To run the scan, just execute the command in the terminal:

node skill/scripts/scan.mjs path/to/project

If you need structured output for CI or external scripts, the machine-readable format flag comes in handy:

node skill/scripts/scan.mjs path/to/project --json

The utility only analyzes markup and styles—it won't overwrite any files without your permission. When a specific visual accent is intentional and should stay, you can disable the check with a deslop-ignore comment directly in the code. The flags --only and --skip are also available for filtering specific rules, along with the --rules argument to add custom checks.

Integration into Assistant Workflows

If you're coding with Cursor or Claude Code, you can integrate the tool directly as an external skill:

npx skills add yetone/kill-ai-slop

Then you just need to give the assistant a simple text command: "remove all AI slop from this component". The agent will pull rules from the catalog, match them against found fragments, and cleanly rewrite the CSS by removing unnecessary shadows, unjustified transforms, and bloated spacing.

Who Will Find This Repository Useful

The project will appeal to developers who frequently build prototypes with LLMs but are tired of their uniform visual style. The tool helps restore interface cleanliness without lengthy manual markup cleanup.

The catalog on the site also serves as a cheat sheet for basic web aesthetics. If you struggle to explain to an AI via prompt why a suggested card looks cheap, the reference examples provide clear technical guidelines: what line weight to choose, how to establish hierarchy through spacing, and why you should avoid endless gradients.