What is the anti-slop-design skill?
The anti-slop-design skill is a SKILL.md from wwewtech that tells an AI coding agent how to restyle vibe-coded interfaces. It bans 12 recurring AI design cliches, applies a 1-to-3 hierarchy rule, offers four style archetypes and grades its output on seven axes before finishing.
The anti-slop-design skill is a folder in the wwewtech/anti-slop-design repository, written for AI coding agents that build web apps, SaaS dashboards, landing pages and mobile interfaces. Its job is to remove the look that unguided agents converge on.
It works as a persona plus a rulebook. The agent acts directly on code, keeps form state, handlers and API calls intact while restyling, and deletes visual clutter before adding any new styling.
What changes in your agent's output
- Glowing indigo and purple radial gradients on dark backgrounds give way to flat near-black surfaces with 1px hairline borders.
- Raw emojis used as icons are replaced with single-weight vector SVG icons at a consistent stroke width.
- Filler stats such as an invented uptime figure or user count are removed unless real data backs them.
- Each screen zone gets one primary action and at most three secondary ones, with one page-level filter bar instead of a date picker in every card.
- Buttons and inputs get the full set of states, not only hover: focus-visible, active, loading and disabled.
The twelve banned patterns
The skill's banned matrix lists 12 patterns. Among them are the AI dark mode blob, monotonous slate and indigo palettes, the cookie-cutter three-card grid, raw emojis as icons, fabricated vanity stats and uppercase eyebrow labels above every heading.
- A single word in italics or gradient colour inside a headline.
- The same metric repeated in the header, sidebar and several cards.
- Date pickers and dropdowns duplicated inside each card.
- Giant maps or 3D blobs that fill much of the screen without showing data.
- Hover-only buttons with no focus, active, loading or disabled state.
- Broken placeholder images and dead links.
Four style archetypes
When restyling an app, the agent selects one of four archetypes, each defined as a set of CSS variables for surfaces, borders, accent, text and radii, while preserving all existing business logic.
- Quiet Luxury SaaS, the default for B2B and pro tools, with a near-black canvas and a cobalt accent.
- Technical Dense Terminal for devtools, fintech and observability, with emerald and amber accents and a monospace font.
- Editorial and Refined for media, portfolios and long-form pages, with a warm off-white canvas and serif display type.
- Warm Tactile for consumer and creator tools, with an ochre accent and generous corner radii.
Who the anti-slop-design skill is for
Best for
- Cleaning up a prototype an agent generated in one pass that now looks like every other AI app.
- React, Next.js and Tailwind projects, where the skill's class names and examples apply directly.
- SaaS dashboards and landing pages that need a clear hierarchy. Teams collecting several opinionated UI skills may also try baseline-ui.
Not for
- Inventing a brand from nothing. The archetypes are four fixed starting points, not a custom identity.
- A deep accessibility audit. Accessibility is one of seven gate axes, so pair it with a dedicated reviewer such as design-auditor.
- Projects that want a neutral tone. The skill is openly opinionated about palettes, layouts and copy.
Use it with UiChemy
Run the skill on an interface your agent built, then import the cleaned result into WordPress with UiChemy AI to WordPress. Composer lets you keep editing it visually inside Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Anti-Slop Design Skill: Fix Generic AI Interfaces
claude skills add https://github.com/wwewtech/anti-slop-designAdd it with Claude Code
Run
claude skills add https://github.com/wwewtech/anti-slop-design, the command the README gives for Claude Code.Or copy the folder by hand
Run
git clone https://github.com/wwewtech/anti-slop-design.git, then copy the skills/anti-slop-design folder to wherever your agent loads skills from.Cursor and Windsurf
The README places the skill at .cursor/skills/anti-slop-design/SKILL.md inside your workspace for these two editors.
Google Antigravity
On macOS or Linux the README puts the skill at ~/.gemini/config/skills/anti-slop-design/SKILL.md.
Ask for a UI pass
Use a trigger phrase from the skill description, such as fix my UI, clean up AI slop or improve UX, and name the files to work on.
Check that it loaded
Ask the agent to improve one page you built. It should name the banned patterns it finds, restyle with one of the four archetypes and grade the result on the seven axes.
Key features
- Banned pattern matrixA table of 12 AI design tropes, each paired with how it shows up in code and a production replacement, so the agent hunts specific cliches instead of applying vague taste.
- 1-to-3 hierarchy ruleEvery screen zone gets one primary element or action and at most three secondary ones. Five or more equal-weight buttons or badges get grouped into a popover or dropdown.
- 85 percent prioritizationThe agent finds the scenario most users run, makes it prominent and reachable in zero extra clicks, and tucks the remaining 15 percent of cases into secondary popovers or tabs.
- Duplication banOne brand mark in the viewport, one primary call to action per card or section, and one global date-range or filter bar controlling the active view.
- Visual DNA ingestionFrom a reference screenshot or token file the agent extracts five foundation tokens: canvas, surface, primary accent, text hierarchy and hairline border, without copying visual bugs.
- Typography rulesAt most two font families, tabular numbers on metrics, body text capped near 65 to 75 characters per line, and a stated size and weight scale from H1 down to captions.
- Spacing geometryA 4px and 8pt grid, plus nested radius math: an inner radius equals the outer radius minus the padding between them.
- Eight interaction statesButtons, inputs, tabs and cards are expected to cover default, hover, focus-visible, active, loading, error, success and disabled states.
- Motion timing rulesActions repeated 100 or more times a day get no animation. Standard micro-interactions run 120 to 180ms with an ease-out curve, and ease-in is not used for UI.
- Seven-axis quality gateBefore finishing, the agent grades its work on anti-slop purity, UX speed, typography, spacing, motion, accessibility and responsive stability, aiming for at least 4 out of 5 on every axis.
Frequently asked questions
What is the anti-slop-design skill?
It is a skill from the wwewtech/anti-slop-design repository that tells an AI coding agent how to de-slop generic, vibe-coded interfaces. It bans 12 common AI design tropes, enforces a 1-to-3 UX hierarchy, adds tactile micro-interactions and checks the result against a seven-axis quality gate.
How do I install the anti-slop-design skill?
The README gives a claude skills add command that takes the repository address, for Claude Code. You can also clone the repository and copy the skills/anti-slop-design folder into your agent's skills folder. Then ask for a UI cleanup with a phrase like fix my UI.
Which AI coding agents can use the anti-slop-design skill?
The README names Claude Code, Cursor, Antigravity and Windsurf. It gives a folder path for Antigravity and for Cursor and Windsurf workspaces. Another agent that loads SKILL.md folders may work, but the repository does not list it.
What does the skill check before it finishes?
It grades the work on seven axes: anti-slop purity, UX speed and the 1-to-3 rule, typography, spacing and geometry, micro-interactions and motion, accessibility and keyboard flow, and mobile linearity. The README says a score of at least 4 out of 5 on every axis is required before shipping.
Will it break my forms and data handling?
The skill tells the agent never to discard form state, data handlers, validation logic or API integrations while changing the visuals. Its archetype section also says the underlying business logic stays intact. Review the diff and run your tests anyway, as with any agent edit.
How does it compare with other design skills?
It is a rulebook of banned patterns, archetypes and a self-grading gate. The README says it was built after auditing over 100 design skills. For a different angle, compare design-taste-frontend or visual-design-foundations, and review output with design-auditor.
What license does it use and is it active?
The repository is MIT licensed, and the skill file declares MIT too. The most recent push was September 19, 2026. It is a young repository with 1 star, so read SKILL.md yourself and test it on a small page before adopting it across a team.