Anti-Slop Design

Anti-Slop Design

by Ferousco-dev
MIT
Repository
Featured markdown Design & Creative
ui-designdesign-systemfrontendprompt-engineeringaccessibility

Summary

Stops AI-generated UI from defaulting to purple gradients and templated hero sections by forcing a named design direction first.

Features

  • Six-step operating protocol: brief, direction, system, build, self-critique, justify
  • Explicit instant-reject list of common AI design clichés
  • Fourteen progressive-disclosure reference modules loaded only on demand
  • Non-negotiable accessibility and performance floor

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

  1. Copy the skill content with the button below.
  2. Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
  3. Ask the agent to apply the skill whenever the task matches.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

# Anti-Slop Design Engineer

Generate interfaces that read as handcrafted, premium, and unmistakably human-designed. Never emit the statistical average of the training set.

## The one rule
> If a design choice exists because "it looks modern" or "it works for most sites," it is slop. Reject it.

## Operating protocol
1. Establish the brief before the pixels.
2. Commit to a direction — name it (e.g. "editorial serif, high-contrast, near-monochrome, generous negative space").
3. Derive the system, not the screen — type scale, spacing scale, color roles, radii, elevation, motion durations, decided once.
4. Build.
5. Self-critique before emitting — run the pre-emit checklist.
6. State your choices — close with 3–6 lines naming the deliberate decisions and why.

## Instant rejects
- Purple/indigo→blue gradient anything
- Inter/Roboto as an unexamined default headline face
- Glassmorphism, floating blurred blobs, mesh gradients as decoration
- Three identical feature cards in a row
- Centered hero: badge pill → huge heading → gray subheading → two buttons
- Copy like "Elevate your workflow" / "Unlock the power of" / "Seamlessly"

## Non-negotiables
Accessible (WCAG AA, focus states, keyboard-operable, prefers-reduced-motion), performant, durable, specific.

Description

Anti-Slop Design is a Claude Agent Skill aimed at a problem anyone who has watched an LLM generate a landing page will recognize: the same purple-to-indigo gradient, the same three feature cards with an icon over a heading, the same centered hero with a badge pill and two buttons. Its core mechanic is a six-step operating protocol run on every UI task: establish a brief covering the product, audience, one emotional adjective, and one competitor not to resemble; commit to and name a single visual direction; derive a design system once rather than deciding values ad hoc per component; build against a hierarchy of needs; self-critique using a pre-emit checklist; and finally state the deliberate choices made and why.

It ships an explicit instant-reject list, covering gradient clichés, unexamined default headline fonts, glassmorphism, fade-in-on-scroll everywhere, emoji-as-icon, and generic copy like 'Elevate your workflow,' plus fourteen progressive-disclosure reference modules for color, typography, layout, animation, copywriting, and code architecture that load only when actually needed, keeping the base skill file context-cheap. Everything is gated by non-negotiables: WCAG AA contrast, visible focus states, keyboard operability, and performance, so being distinctive never costs usability. Use it whenever generating, reviewing, or refactoring a landing page, dashboard, design system, or component, or whenever a UI needs to stop looking like the statistical average of every AI-generated site.

Related Skills

Data Visualization

Data Visualization

by Anthropic

Anthropic's official data-visualization skill: pick the right chart for the data, then build it with ready-to-run matplotlib, seaborn, and plotly patterns.

DevelopmentDesign & Creative
data-visualizationpythoncharts
Browse all skills →