Avoid AI Design — скилл
Ищет в сгенерированном фронтенде приметы ИИ, от фиолетовых градиентов до терракотового тона, и переписывает интерфейс
- 159 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Скилл переписывает файлы интерфейса и может менять много кода за один проход
- Скрипт `detect.mjs` читает исходники проекта, а режим хука запускается при правках
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/avoid-ai-designОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл переписывает файлы интерфейса и может менять много кода за один проход
- Скрипт `detect.mjs` читает исходники проекта, а режим хука запускается при правках
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Avoid AI Design — скилл-аудитор интерфейсов, которые нагенерировал агент. Он ищет два поколения приметы: первичные (фиолетово-синий градиент, шрифт Inter везде, центральный герой над тремя карточками, нетронутый shadcn) и вторичные у «вкусных» дефолтов (кремовый фон с терракотовым акцентом, почти черный с кислотно-зеленым, капсовые моно-подписи, одно цветное слово в заголовке, нумерация 01/02/03). В комплект входит скрипт `scripts/detect.mjs` без зависимостей: он сканирует код и выводит найденные приметы. Есть режим только обнаружения и режим хука, который можно подключить к Claude Code и проверять правки на лету. Справочники в `references/` описывают каталог примет, направления эстетики и шаблон `DESIGN.md`. После аудита скилл переписывает HTML, CSS или React с Tailwind и shadcn под направление, выведенное из самого продукта. На многостраничном проекте он один раз записывает решения в `DESIGN.md`, чтобы вторая страница не расходилась с первой.
Для кого. Фронтенд-разработчикам и дизайнерам-аудиторам, чьи лендинги и панели после генерации агентом выглядят одинаково и выдают ИИ с первого взгляда.
Подходит, если
- Лендинг от Claude Code или Codex похож на сотни других, и это видно по градиенту и трем карточкам
- Нужен отчет сканера по каталогу, на какие приметы попал проект, без переписывания кода
- Сайт из нескольких страниц дрейфует по стилю, и нужен общий `DESIGN.md`
- Хочется встроить проверку в хук агента и ловить приметы при каждой правке интерфейса
Не подходит, если
- Нужна новая дизайн-система с нуля по брифу бренда: скилл чистит и переписывает готовый интерфейс
- Проект не веб: скилл работает с HTML, CSS, React, Tailwind и shadcn
- Нужен тест доступности: он ищет эстетические приметы и стандарт доступности не проверяет
Пример запроса к агенту
Прогони avoid-ai-design по src/ и покажи, какие приметы ИИ-дизайна нашлись, пока без правокОграничения
Сканер находит только те приметы, что описаны в каталоге `references/ai-tells-catalog.md`, и дает подсказки вместо оценки вкуса. Результат нужно смотреть глазами: правило вроде «один акцентный цвет» уместно не везде. Переписывание меняет ваши файлы, поэтому лучше запускать его на ветке под контролем версий.
Скрипт требует установленный Node.js, а режим хука настраивается вручную в `settings.json` Claude Code. Скилл рассчитан на HTML, CSS, React, Tailwind и shadcn, другие стеки придется разбирать вручную. Дата последней правки репозитория: сентябрь 2026 года.
Как отключить. Удалите папку `avoid-ai-design` из `~/.claude/skills`, `~/.agents/skills` или проектного каталога навыков. Если вы подключали хук, уберите его запись из `settings.json`.
Частые вопросы
Как поставить avoid-ai-design в Claude Code?
Выполните `npx skills add funboy322/avoid-ai-design` или клонируйте репозиторий в `~/.claude/skills/avoid-ai-design`. Оба пути описаны в README.
Умеет ли скилл только искать приметы, без переписывания?
Да, у него есть режим только обнаружения, а сам сканер `detect.mjs` вообще не правит файлы и просто печатает найденное.
Что такое вторичные приметы?
Это шаблоны, которые пришли на смену фиолетовому градиенту: кремовый фон с терракотовым акцентом, почти черный с кислотно-зеленым, капсовые моно-подписи и нумерация 01/02/03.
Работает ли скилл с Cursor, Codex или Copilot?
Автор указывает совместимость с Cursor, Codex и Copilot, потому что формат SKILL.md общий. Хук с `detect.mjs` описан для Claude Code.
Зачем нужен DESIGN.md?
Это один файл с решениями по шрифтам, цветам и сетке. На многостраничном сайте агент читает его при каждой новой странице, поэтому оформление не уезжает.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Проверка по 147 правилам дизайна: находит признаки ИИ-интерфейса, чинит механические и передает остальное скиллу агента
Скилл /taste разбирает дизайн сайта по ссылке: токены, принципы с компромиссами и готовые правила для Cursor и Claude Code
Аудит готового сайта для агента: шаблонные приемы ИИ-дизайна и пропущенные состояния находят и правят по месту.
Скилл и CLI для агентов: интерфейс без шаблонного вида, 25 команд, проверка шаблонности правилами и оценка качества от 0 до 100
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Avoid AI Design (эта карточка) | нет | 159 | |
| distinctive-ai-design | нет | 135 | ведет дизайн с нуля с оригинальными решениями, детектора примет в нем нет |
| no-slop-motion | нет | 92 | чистит только анимацию, цвет и верстку не трогает |
Коротко о README
Скилл дополняет собрание правил для текстов `avoid-ai-writing` версией для интерфейсов: каталог примет, сканер и переписывание под направление продукта. Автор показывает демонстрационную страницу, где сканер нашел 23 примети до правки и ни одной после.
Бейдж для README
Исходный 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