Impeccable и скилы Эмиля Ковальского против AI-слопа

Попросите агента сделать лендинг, и он почти наверняка выдаст шрифт Inter, фиолетово-синий градиент, сетку одинаковых карточек и маленькую плашку над каждым заголовком. Код работает, но страница выглядит так же, как тысячи других. Такой результат называют AI-слопом, и против него появились отдельные скилы для агентов.

Самый заметный из них impeccable Пола Бакауса (Paul Bakaus), создателя jQuery UI. 23 октября Амир Мушич (Amir Mušić) включил его в подборку репозиториев для дизайна с пометкой «85K stars» и описанием про 62 проверки. Цифры подтверждаются: 24 октября у репозитория 86,1 тысячи звёзд, а в реестре детектора ровно 62 правила. Текущая версия 4.7.1, лицензия Apache 2.0.

Второй набор собрал Эмиль Ковальский (Emil Kowalski), дизайн-инженер и автор React-библиотек Sonner (уведомления) и Vaul (выдвижные панели). В README он пишет, что скилы основаны на годах работы в Vercel и Linear. В emilkowalski/skills 15 скилов и 49,3 тысячи звёзд, лицензия MIT. 29 сентября Мэтт Покок назвал Эмиля среди трёх лучших авторов скилов, вместе с Лорен Тан, про чей набор мы писали в статье о pstack.

Почему AI-интерфейсы одинаковые

Объяснение Бакауса простое: все модели учились на одних и тех же SaaS-шаблонах. Без подсказок агент возвращается к среднему, и в README impeccable перечислены приметы такого среднего: Inter везде, градиент из фиолетового в синий, карточки внутри карточек, серый текст на цветном фоне, скруглённая плитка с иконкой над каждым заголовком.

Файл craft-floor.md, который агент читает перед любой правкой интерфейса, продолжает список. Страница собрана из одинаковых карточек «иконка, заголовок, текст». Шаблон «большая цифра, подпись мелким, рядом ещё три цифры». Номера секций 01, 02, 03, если порядок ничего не значит для читателя. Градиентный текст, стекло и размытие для украшения, цветная полоса толще пикселя по левому краю карточки, жёсткая тень без размытия, моноширинный шрифт ради «технологичного» вида, эмодзи вместо иконок. Большинство пунктов скил считает привычками, от которых можно отступить по брифу. Плашку-надзаголовок он запрещает всегда.

Ковальский смотрит на ту же проблему со стороны движения. По его словам в README, у агентов нет хорошего вкуса: они ставят ease-in на появление элемента, хотя нужен ease-out, или рисуют сплошную рамку там, где нужна полупрозрачная тень. В эссе Agents with Taste он объясняет, почему это лечится скилами: почти у каждого решения о вкусе есть логическая причина, и её можно записать правилом.

Как устроен impeccable

Impeccable состоит из одного скила /impeccable с 24 командами. Контекст продукта живёт в двух файлах: PRODUCT.md описывает аудиторию, задачи и ограничения, DESIGN.md фиксирует визуальную систему. Каждую страницу скил относит к одному из четырёх режимов: убедить (лендинг, цены), работать (дашборд, настройки), читать (документация, статьи), смотреть (портфолио). От режима зависит смелость: на лендинге скил идёт на выразительные решения, в дашборде на точность и сдержанность.

Вторая половина набора не зависит от модели. Детектор с 62 правилами работает без LLM и API-ключа, его запускают из терминала, в CI или как хук: после каждой правки UI-файла агент получает список найденных проблем. Как работают такие хуки, мы разбирали в статье о хуках.

Установка

Impeccable ставится из корня проекта:

npx impeccable install

Установщик находит агентов на машине, спрашивает, ставить в проект или глобально, и для Claude Code, Codex, Cursor, GitHub Copilot и Grok Build добавляет хук. В Claude Code хук пишется в .claude/settings.local.json, в Codex его нужно одобрить в /hooks. Есть и плагин для Claude Code: /plugin marketplace add pbakaus/impeccable, потом установка из списка в /plugin. В Codex скил вызывают как $impeccable. Рабочие файлы impeccable пишет в .impeccable/, и README приводит блок для .gitignore, который отделяет временные скриншоты от общих файлов проекта.

Скилы Ковальского ставятся через skills.sh, другого способа в README нет:

npx skills@latest add emilkowalski/skills

Первый редизайн по шагам

Первое: снимите исходное состояние без агента. Детектор принимает папку, файл или адрес страницы:

npx impeccable detect src/
npx impeccable detect http://localhost:3000

Код выхода 2 означает, что проблемы найдены. Флаг --json даёт вывод для CI.

Второе: в чате агента запустите /impeccable init. Скил изучает репозиторий, задаёт вопросы раундами не больше трёх штук и только о том, чего не нашёл сам, и пишет PRODUCT.md. Если вы сохраняете текущий стиль, следом запустите /impeccable document, он соберёт DESIGN.md из существующего кода. Скил различает два случая. Доработка сохраняет нынешний стиль, тексты и всё вне задачи. Редизайн заменяет внешний вид целиком, а старый дизайн служит образцом того, чего делать не надо. Смешивать их, то есть полировать выброшенный дизайн, скил запрещает.

Третье: ревью.

/impeccable critique landing

Команда запускает двух изолированных субагентов. Один оценивает дизайн глазами человека, второй прогоняет детектор и смотрит страницу в браузере. Первый должен закончить раньше, чем результаты детектора попадут в общий отчёт: в скиле прямо сказано, что даже детерминированный вывод сбивает суждение. Отчёт заканчивается вопросом, что улучшать дальше.

Четвёртое: исправления точечными командами. /impeccable typeset правит шрифты и иерархию, /impeccable layout отступы и ритм, /impeccable harden ошибки, длинные строки и пустые состояния, /impeccable polish делает финальный проход. Если интерфейс получился блёклым, есть /impeccable bolder, если кричащим, /impeccable quieter.

Пятое: движение. Ковальский советует цепочку из трёх своих скилов:

/find-animation-opportunities
/animate
/review-animations

Первый ищет места, где анимация действительно нужна, и говорит, что анимировать не стоит. Второй строит анимацию по таблицам кривых и длительностей. Третий проверяет результат по десяти обязательным стандартам и по умолчанию находит замечания, одобрение нужно заслужить. Шестое: /break-ui подставляет в интерфейс правдоподобные худшие данные: длинную двойную фамилию, очень длинный адрес почты, имя из двух букв, 1284 участника, пустой список. Сначала он только отчитывается, чинит по вашей просьбе. В конце снова запустите детектор и сравните с первым шагом.

Правила, которые стоит забрать

Про текст и отступы в craft-floor.md impeccable записаны конкретные числа. Длина строки основного текста 65–75 символов, крупный заголовок не больше 6rem, межбуквенное расстояние не плотнее -0.04em. Над заголовком больше места, чем под ним. Контраст основного текста не ниже 4.5:1, крупного не ниже 3:1, а второстепенный текст на цветном фоне подкрашивают в тон фона вместо серого. У тени есть смещение и мягкое размытие, цветное свечение без смещения скил считает украшением. Отдельный пункт про то, что браузер рисует сам: выделение текста, курсор, полосы прокрутки, кольца фокуса и цифры в таблицах. Их тоже красят из палитры, и, по наблюдению автора, именно это модели пропускают чаще всего.

Анимацию Ковальский начинает с вопроса, нужна ли она вообще. Действие, которое повторяют сто раз в день, например открытие командной палитры с клавиатуры, не анимируют совсем, в пример он ставит Raycast. Появление и исчезновение идут с ease-out, движение по экрану с ease-in-out, а ease-in в интерфейсе запрещён, потому что задерживает начало движения, на которое человек смотрит внимательнее всего. Встроенные кривые CSS он считает слишком слабыми и даёт свои. Длительности: нажатие кнопки 100–160 мс, подсказка 125–200 мс, выпадающий список 150–250 мс, модальное окно и выдвижная панель 200–500 мс, и в целом анимация интерфейса укладывается в 300 мс. В CSS это выглядит так:

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.button {
  transition: transform 160ms var(--ease-out);
}

.button:active {
  transform: scale(0.97);
}

.popover {
  transform-origin: var(--transform-origin);
}

.entering {
  transform: scale(0.95);
  opacity: 0;
}

Элемент не вырастает из scale(0), он стартует с 0.95 вместе с прозрачностью. Поповер раскрывается от кнопки, которая его вызвала, а модальное окно остаётся по центру. В transition перечисляют конкретные свойства вместо all, анимируют только transform и opacity. Элементы списка появляются с задержкой 30–80 мс друг за другом. Ховер-эффекты закрывают условием @media (hover: hover) and (pointer: fine), чтобы на телефоне они не залипали. При prefers-reduced-motion движение убирают, но смену прозрачности и цвета оставляют.

Impeccable с этим в основном согласен и добавляет своё правило: на странице должен быть один задуманный момент движения, а одинаковое появление каждой секции при прокрутке он считает приметой шаблона. Расходятся они в пружинах. Impeccable запрещает упругие кривые с отскоком как устаревшие, Ковальский разрешает лёгкий отскок 0.1–0.3 для смахивания панели и игровых элементов.

Ограничения