К основному содержанию
скилл CX Codex

audit-ai-design-slop — скилл для Claude Code: обзор и установка

Скилл находит визуальный шум, нагромождение декоративных слоёв и дефекты интерфейса в коде или макетах. Помогает очистить проект без принудительного редизайна.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add MengTo/Skills --skill audit-ai-design-slop -a claude-code
Открыть на GitHub

Что делает audit-ai-design-slop

Скилл проверяет скриншоты, вёрстку, токены и код интерфейса на типичные клише генеративного дизайна. Он выявляет наслоение градиентов, лишние стеклянные панели, карточки внутри карточек и фальшивые социальные доказательства вроде выдуманных отзывов или графиков. При этом аудит не ставит числовых оценок и не пытается угадать, создал ли макет ИИ.

В работе действует строгий тест на удаление: сначала убирается всё лишнее, а замена предлагается в последнюю очередь. Скилл группирует замечания по приоритетам от P0 до P3 и возвращает краткую таблицу из 5–8 главных проблем вместо бесконечного списка придирок. Если не попросить явно, инструмент не станет переписывать цветовую палитру или шрифты.

Какие задачи решает

  • убрать лишние декоративные слои, тени и размытия
  • найти фальшивые метрики, фальшивые отзывы и логотипы
  • выявить проблемы контраста, переполнения контейнеров и фокуса
  • сократить раздутые тексты и повторяющиеся плашки в интерфейсе

Примеры запросов агенту

  • Проверь скриншот главной страницы на визуальный шум и клише
  • Сделай аудит вёрстки в src/components/Pricing.tsx по методу audit-ai-design-slop
  • Найди проблемные места в карточках тарифов и покажи, что можно удалить без потери смысла

Как установить audit-ai-design-slop

1Через Skills CLI (Vercel)

npx skills add MengTo/Skills --skill audit-ai-design-slop -a claude-code

2Вручную: положить файлы

~/.claude/skills/audit-ai-design-slop/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/audit-ai-design-slop/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о audit-ai-design-slop

Как установить audit-ai-design-slop в Claude Code?

Выполните команду npx skills add MengTo/Skills --skill audit-ai-design-slop -a claude-code в терминале.

Что делает скилл audit-ai-design-slop?

Он проводит диагностический аудит интерфейса, выявляет визуальный мусор, повторы шаблонов и дефекты доступности, формируя список из 5–8 главных исправлений с приоритетами от P0 до P3.

Будет ли скилл менять шрифты или цветовую гамму проекта?

Нет. Скилл следует правилу вычитания лишнего и сохраняет существующую стилистику, пока вы прямо не попросите предложить новую палитру или типографику.

Исходный текст

SKILL.md · MIT
---
name: audit-ai-design-slop
description: Audit websites, apps, screenshots, mockups, and design code for harmful AI-design clichés, generic generated defaults, and established UI defects. Use when the user wants evidence-backed design feedback, an anti-slop review, or a removal-first cleanup plan without a speculative redesign.
---

# Audit AI Design Slop

Run a diagnostic, evidence-backed audit. Identify the smallest set of removals or corrections that would improve the interface while preserving its existing direction.

## Boundaries

- Do not guess whether AI made the design.
- Do not assign a numeric slop score.
- Do not reject a visual technique in isolation. A gradient, serif, dark theme, glass effect, card, animation, or single-font system can be intentional.
- Do not prescribe a new font, palette, layout, design system, or art direction unless the user explicitly asks for one.
- Do not turn an audit into an implementation task.
- Mark anything outside the visible or provided evidence as unknown.

## Audit the Evidence

Inspect the artifact available in the request:

- screenshots and recordings
- rendered pages and relevant viewports
- interaction and state changes
- source code, tokens, assets, and copy
- console or runtime failures when they affect the experience

For every finding, cite a concrete location, component, behavior, or line of copy. Do not report a generic tendency without evidence in the artifact.

For a full-page or full-site review, read [../no-ai-design-slop/ARTICLE.md](../no-ai-design-slop/ARTICLE.md) and use only the catalog sections relevant to the inspected artifact. Do not turn every checklist match into a finding. Group symptoms by root cause and report the highest-impact evidence.

## Classify Findings

Use one of these classes:

- **Quality defect:** an established usability, accessibility, content, responsive, or runtime problem.
- **Slop pattern:** a repeated default, decorative layer, or generated-looking convention with no useful role.

## What to Flag

### Decorative stacking

Flag combinations of glow, gradient text, glass, borders, shadows, grids, particles, beams, noise, floating shapes, or browser chrome when multiple layers perform the same decorative job or compete with the content.

### Component and template repetition

Flag:

- card treatment applied to nearly every content block
- repeated icon-heading-description tiles with interchangeable content
- nested rounded containers that do not communicate hierarchy
- generic landing-page sequences unrelated to the product's buying or usage journey
- headings, labels, pills, or CTA blocks that restate nearby information

### Typography and copy clutter

Flag:

- duplicate text or unnecessary labels
- empty superlatives, vague category claims, and generated filler
- decorative type treatments that obscure hierarchy or readability
- long centered paragraphs, awkward forced line breaks, or hard-to-scan text
- inconsistent type roles that look accidental rather than expressive

### Motion theater

Flag motion that delays access, repeats mechanically, distracts from reading, moves targets, blocks input, or lacks respect for reduced-motion preferences. Preserve motion that communicates state, causality, hierarchy, or spatial change.

### Fake proof

Flag invented or unverifiable metrics, customers, testimonials, awards, ratings, activity, dashboards, charts, logos, and portraits when they are presented as evidence.

### Established UI failures

Flag:

- unclear or competing primary actions
- low contrast or unreadable content
- clipping, overflow, overlap, or broken responsive behavior
- broken assets, links, scripts, or controls
- essential information available only on hover
- missing states required by the observed flow
- unclear labels, roles, feedback, or keyboard focus
- accidental inconsistency in spacing, type, color, radius, or icons
- visual hierarchy that contradicts task importance

## Use the Removal Test

For every candidate:

1. State what information, state, action, hierarchy, or brand meaning it provides.
2. Ask whether removing it would improve clarity without losing that role.
3. If yes, recommend removal or consolidation.
4. If no, recommend the smallest correction using the existing system.
5. Suggest a replacement only when deletion would create a real loss.

Default to subtraction. A replacement should inherit the product's existing language rather than introduce a new visual concept.

## Prioritize

- **P0:** blocks completion, creates a severe accessibility issue, or presents deceptive proof
- **P1:** materially harms comprehension, trust, navigation, or interaction
- **P2:** repeated slop or inconsistency that weakens hierarchy and identity
- **P3:** minor polish issue with limited user impact

Return the five to eight highest-impact findings by default. Group repeated instances into one systemic finding.

## Output

```md
## Verdict
One concise paragraph about the dominant problems and what should be removed first.

## Checked scope
- Artifact, screen, state, and viewport actually inspected

## Findings
| Priority | Class | Pattern | Evidence | Harm | Remove or fix |
|---|---|---|---|---|---|
| P1 | Slop pattern | Repeated ornamental containers | Feature area uses the same layered card treatment for unrelated content | Flattens hierarchy and adds noise | Remove outer shells; retain grouping only where it communicates interaction |

## Unknowns
- Important states or behavior that could not be verified
```

Keep the report compact. Omit empty sections.

## Feedback Rules

- Lead with concrete evidence, not taste claims.
- Name the pattern and its harm.
- Recommend removal before restyling.
- Avoid generic compliments and exhaustive low-impact nitpicks.
- Preserve useful product-specific detail and intentional character.
- Do not cite a standard unless it directly supports the finding.
- Do not describe an aesthetic as universally bad.
- If the user explicitly asks for design swaps, place an optional replacement after the removal recommendation and keep it consistent with the existing system.
- End with the single removal or correction that would produce the largest improvement.

© MengTo · MIT · MengTo/Skills

Похожие скиллы

Всё по теме «Дизайн» →
design-audit bencium Проверяет визуальный дизайн приложения и готовит поэтапный план правок. Нужен для аудита интерфейса, типографики, отступов и цветовой системы. CX Codex +1 4 100установок design-better BuilderOS Скилл для ИИ-агентов, который добавляет к генерации и ревью интерфейса правила UX/UI: иерархия, состояния, доступность, анимация. Пригодится, когда код уже работает, но выглядит сыро. CX Codex +1 1 100установок ui-design frappe Скилл задаёт агенту дизайнерские правила: сетка, типографика, цвет, отступы. Пригодится, когда нет своего дизайн-системного скилла. CX Codex +1 832установок interaction-design secondsky Скилл для проектирования отклика интерфейса: состояния загрузки, ошибки, пустые экраны, анимация и доступность. Пригодится, когда нужно продумать поведение UI, а не только его вид. CX Codex +1 441установок nielsen-usability-heuristics dembrandt Оценивает интерфейсы и текст ошибок по 10 эвристикам Нильсена. Скилл помогает выявить проблемы юзабилити прямо в коде компонентов до релиза. CX Codex +1 976установок design-review plugin87 Скилл оценивает интерфейс по шести взвешенным критериям, прогоняет эвристики Нильсена и выдаёт таблицу находок по приоритету. CX Codex +1 594установок

Из того же набора148

add-shader-cursor-trail Добавляет в проект hero-эффект на WebGPU: белый мерцающий полутоновый след за курсором с хроматическими волнами и плёночным зерном. С откатом на статичный кадр. CX Codex +1 1 300установок shaders-cursor-ripples Встраивает водяную рябь на WebGPU поверх изображений с помощью библиотеки shaders. Помогает заменить устаревший CSS-эффект прожектора без поломки вёрстки и доступности. CX Codex +1 1 400установок threejs-towers Собирает пагоды, замки и купола из параметров вместо меш-файлов и показывает, как постройка растёт снизу вверх. CX Codex +1 1 200установок build-rigged-game-assets Скилл ведёт сборку игрового персонажа или монстра от исходной модели до загрузки в геймплей: риг, библиотека анимаций, сокеты, экипировка, каталог. CX Codex +1 1 200установок threejs-weather Добавляет в Three.js сцены управляемые состояния дождя, грозы и снега. Нужен для атмосферного фона, где погода меняет частицы, свет и поверхность. CX Codex +1 1 200установок threejs-landscape Скилл собирает живой ландшафт на Three.js: холмы, трава, камни, небо и смена времени суток. Годится для hero-фонов и сцен, где объект должен стоять в месте, а не висеть на градиенте. CX Codex +1 1 200установок falling-leaves Скилл помогает генерировать реалистичную анимацию падающих листьев и лепестков на canvas или в 3D. Пригодится, когда обычные частицы выглядят плоским конфетти. CX Codex +1 1 200установок pointer-trail-emitter Скилл учит агента строить шлейф за курсором, который держит одинаковый шаг между частицами при любой скорости руки. CX Codex +1 1 200установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой