Avoid AI Design skill
Finds AI-look tells in generated frontend, from purple gradients to cream and terracotta, and rewrites the interface
- 161 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill rewrites interface files and can change a lot of code in one pass
- The `detect.mjs` script reads project sources, and hook mode runs on edits
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/avoid-ai-designDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill rewrites interface files and can change a lot of code in one pass
- The `detect.mjs` script reads project sources, and hook mode runs on edits
This is third-party code. Review the repository files before installing.
What it does
Avoid AI Design is a skill that audits interfaces an agent has generated. It looks for two generations of tells: first-order ones (a purple-to-blue gradient, Inter everywhere, a centered hero over three cards, untouched shadcn) and second-order ones from "tasteful" defaults (cream with a terracotta accent, near-black with acid green, all-caps mono labels, one colored word in a headline, 01/02/03 numbering). The kit ships a dependency-free script, `scripts/detect.mjs`, which scans code and prints the tells it finds. There is a detection-only mode and a hook mode that can be attached to Claude Code to check edits on the fly. Files in `references/` hold the tell catalog, aesthetic directions and a `DESIGN.md` template. After the audit the skill rewrites HTML, CSS or React with Tailwind and shadcn around a direction drawn from the product itself. On a multi-page project it writes decisions into `DESIGN.md` once so page two does not drift from page one.
Who it is for. Frontend developers and design reviewers whose landing pages and dashboards look identical after agent generation and give away AI at first glance.
Good fit when
- A landing page from Claude Code or Codex looks like hundreds of others, visible in the gradient and three cards
- You want a scanner report on which tells the project hits, with no code rewriting
- A multi-page site drifts in style and needs a shared `DESIGN.md`
- You want to wire the check into an agent hook and catch tells on every interface edit
Not a fit when
- You need a new design system from scratch from a brand brief: the skill cleans up and rewrites an existing interface
- The project is not web: the skill works with HTML, CSS, React, Tailwind and shadcn
- You need an accessibility audit: it looks for aesthetic tells and does not check accessibility standards
Example request
Run avoid-ai-design over src/ and show which AI design tells were found, without changing anything yetLimitations
The scanner finds only the tells described in the `references/ai-tells-catalog.md` catalog and gives hints rather than judging taste. Review the result by eye: a rule like "one accent color" does not fit every project. Rewriting changes your files, so run it on a branch under version control.
The script needs Node.js installed, and hook mode is configured by hand in Claude Code `settings.json`. The skill targets HTML, CSS, React, Tailwind and shadcn, so other stacks need manual work. The repository was last updated in September 2026.
How to disable. Delete the `avoid-ai-design` folder from `~/.claude/skills`, `~/.agents/skills` or the project skills directory. If you attached the hook, remove its entry from `settings.json`.
FAQ
How do I install avoid-ai-design in Claude Code?
Run `npx skills add funboy322/avoid-ai-design` or clone the repository into `~/.claude/skills/avoid-ai-design`. Both routes are described in the README.
Can the skill only detect tells without rewriting?
Yes, it has a detection-only mode, and the `detect.mjs` scanner itself never edits files and only prints what it finds.
What are second-order tells?
Patterns that replaced the purple gradient: cream with a terracotta accent, near-black with acid green, all-caps mono labels and 01/02/03 numbering.
Does the skill work with Cursor, Codex or Copilot?
The author lists Cursor, Codex and Copilot compatibility because SKILL.md is a shared format. The `detect.mjs` hook is described for Claude Code.
What is DESIGN.md for?
It is a single file with decisions on type, color and grid. On a multi-page site the agent reads it for each new page so the look does not drift.
Discussion
No questions or reviews yet.
Related
SkillsA skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A 147-rule design check that finds AI-interface tells, fixes the mechanical ones and hands the rest to an agent skill
The /taste skill turns a URL into design tokens and trade-off principles, with ready rules for Cursor and Claude Code
A design audit for agents: generic AI design patterns and missing states are found and fixed in place.
A skill and CLI for agents: UI without the templated look, 25 commands, rule-based anti-slop checks and a 0 to 100 quality score
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Avoid AI Design (this card) | no | 161 | |
| distinctive-ai-design | no | 137 | designs from scratch toward original choices and has no tell detector |
| no-slop-motion | no | 92 | cleans up motion only and leaves color and layout alone |
README in short
The skill extends the `avoid-ai-writing` rule set for prose with an interface version: a tell catalog, a scanner and a rewrite around a product direction. The author shows a demo page where the scanner found 23 tells before and none after.
README badge
Original SKILL.md
---
name: avoid-ai-design
description: Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the second-order "tasteful AI" ones (cream with terracotta, near-black with acid green, all-caps mono chrome, one accented headline word, decorative 01/02/03). Use when asked to "de-slop a UI", "make a design look less AI-generated", "audit a page or component for AI design tells", "fix Claude/Codex-generated frontend that looks generic", or keep a multi-page site on one design system. Covers HTML/CSS and React/Tailwind/shadcn. Has a detection-only mode and a zero-dependency scanner (scripts/detect.mjs) for the code-certain tells.
license: MIT
compatibility: Works in any agent that reads agentskills.io SKILL.md files (Claude Code, Cursor, Codex CLI, VS Code Copilot and others). Optional, Node 18+ to run scripts/detect.mjs, and a screenshot tool to judge the visual tells.
metadata:
author: ungspirit
version: "0.4.0"
tags: design ui frontend ai-slop tailwind shadcn react
agentskills_spec: "1.0"
---
# Avoid AI Design: Audit & Rewrite
You are reviewing frontend code to find the patterns that make a UI look AI-generated ("AI slop"), then rewriting it around one intentional design direction.
This is the design counterpart to the `avoid-ai-writing` skill. It targets two stacks: plain **HTML/CSS/JS** and **React + Tailwind + shadcn/ui**.
The point is not to chase novelty. It is to replace defaults with decisions. A purple gradient is not bad because purple is bad; it is bad because no one chose it.
**There are two orders of default.** The first is the median: purple gradient, Inter, three icon cards. The second is the tasteful escape that became the new median: cream with terracotta, near-black with one acid-green accent, all-caps mono labels, one colored word in the headline, decorative 01/02/03. Anthropic's own `frontend-design` skill lists these clusters, and de-slop passes (this skill's included) land in them constantly. Treat both orders as tells. See the SD section of `references/ai-tells-catalog.md`.
**Code shows half of it; pixels show the rest.** Some tells live in the source (a literal `from-indigo-500`, `Inter`, a `lucide` import); the scanner finds those. Others are visual: whether a palette has a real dominant color, whether spacing has rhythm, whether the structure is the same as every other page. Render when