Что такое AI-слоп в дизайне?

Как распознать AI-слоп: десять признаков.

Каждый из них — значение по умолчанию: то, что агент пишет, когда ему не сказали иначе. Один признак сам по себе мало что доказывает: фиолетовый градиент — слоп в продукте, который никогда не выбирал фиолетовый, и осознанное решение в том, который выбрал. Экран выдаёт именно их скопление. Ниже — экран, где их сразу несколько, и тот же экран без них.

1. Сине-фиолетовый градиент, который никто не выбирал

   Перелив от фиолетового к синему на главной кнопке, первом экране или логотипе. Агент тянется к нему, когда нигде не сказано, какого цвета продукт, — поэтому у бренда, который никогда не выбирал фиолетовый, это чужой цвет.

2. Свечение там, где ничего не происходит

   Мягкий ореол вокруг кнопки, карточки или иконки, с которыми ничего не происходит. Свет на экране — это сигнал: здесь фокус, здесь нужны вы, — а свечение, которое никогда не гаснет, не сообщает ничего. Когда что-то действительно потребует внимания, эффект уже израсходован.

3. Все элементы управления скруглены в «таблетку»

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

4. Карточка, отделённая от страницы тремя способами сразу

   Цвет фона, рамка и тень на одной карточке — или любые два из трёх. Чтобы карточка отделилась от страницы, хватит одного; вместе они делают громким каждый край, и ничего не выделяется.

5. Мелкие подписи прописными вразрядку

   Подписи разделов и бейджи статусов набраны мелко, прописными, с разреженными буквами. Это короткий путь к «дизайнерскому» виду, и платит за него подпись тем единственным, ради чего она существует: её должны читать с одного взгляда.

6. Цветная полоса сбоку у уведомления

   Толстая цветная полоса вдоль одного края предупреждения, карточки или строки списка. Она добавляет акцент без смысла — цвет и слова уведомления и так говорят, что это за уведомление, — а когда полоса есть у каждого, акценты гасят друг друга.

7. Иконка или эмодзи перед каждым заголовком

   Картинка перед каждым заголовком, пунктом списка и надписью на кнопке. Когда она есть в каждой строке, ни одна не помогает ничего найти. Иконка заслуживает места там, где её узнают быстрее слова — поиск, закрыть, настройки, — а не как украшение.

8. Заголовок по центру, две кнопки и светящийся макет под ними

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

9. Три одинаковые карточки возможностей в ряд

   Три карточки одного размера, у каждой сверху иконка, заголовок из двух слов и строка, которая подойдёт любому продукту. Число подсказала сетка, а не продукт: никто не решал, что сказать стоит ровно о трёх вещах.

10. Выдуманное социальное доказательство

    Цитаты, которых никто не говорил, звёзды, которых никто не ставил, логотипы компаний, которые продуктом не пользовались, «нам доверяют 10 000+ команд». В макете было место для доказательства, и агент заполнил его чем-то правдоподобным — утверждением, за которое однажды кому-то придётся отвечать.

Почему все сайты и приложения, сделанные ИИ, похожи друг на друга.

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

А середина состоит из умолчаний. Туториалы, стартовые шаблоны и примеры, которые идут в комплекте с библиотеками компонентов, пишутся, чтобы их копировали; что копируют чаще всего, то агент и видел чаще всего, — поэтому в ответ он пишет именно их цвета, скругления и раскладки.

Агент не может следовать системе, которую не видит. Ваш дизайн может жить в файле Figma или в голове дизайнера, а агент видит репозиторий и промпт. Пока системы нет в репозитории в том виде, который он читает, — токены, компоненты, файлы инструкций, — он откатывается к середине.

Каждый экран пишется сам по себе. Если прежние решения не записаны, агент начинает каждую задачу без них и мелкие решения принимает сам: серый, почти как ваш, скругление чуть мимо шкалы, ещё один вариант кнопки. Ни одно не настолько велико, чтобы его остановили на ревью. Вместе они — дрейф.

Промпты выветриваются. «Следуй нашей дизайн-системе», набранное в чате, живёт до конца этого разговора, если вообще столько, а следующий начинается без него. И даже пока оно действует, это фраза о вашей системе, а не сама система.

Почему AI-слоп важен, даже когда всё выглядит нормально.

Люди судят о том, как что-то сделано, по тому, как оно выглядит. Эти умолчания встречаются в продукте за продуктом, поэтому пользователи их узнают, а узнаваемое умолчание говорит, что никто ничего не решал, — и это читается как сделанное на скорую руку, даже если это не так.

Бренд, который выглядит как у всех, — не бренд. Фирменный стиль нужен, чтобы люди отличали ваш продукт от соседнего; безликий вид стирает именно это, причём тихо, потому что на экране нет ничего настолько неправильного, чтобы на это пожаловаться.

А уборка только копится. Каждый сгенерированный экран добавляет цвета, скругления и компоненты, почти как ваши, и чем дольше это длится, тем больше почти-копий придётся найти, прежде чем что-то можно будет исправить.

Как избавиться от AI-слопа.

Особый инструмент для этого не нужен. Всё сводится к тому, чтобы положить систему туда, где агент её найдёт, и проверять то, что он возвращает.

1. 01

   Запишите систему токенами, а не прозой.

   Цвета, размеры шрифта, отступы, скругления и тени должны жить в файлах, которые импортирует код, — CSS-переменные, тема Tailwind, JSON-файл токенов, — и называться по тому, для чего нужно каждое значение. Фразу «используйте наш синий умеренно» агент может понять неправильно. --color-accent, который уже используют все компоненты, — не может.

2. 02

   Дайте агенту компоненты, а не описания.

   Кнопку, описанную в документе, переписывают на каждом экране, и каждый раз немного по-своему. Кнопку, которая существует как компонент — с вариантами, состояниями и поведением с клавиатуры, — импортируют. Чем большая часть интерфейса существует в виде кода, тем меньше остаётся угадывать.

3. 03

   Положите правила туда, где их читает агент.

   Кодовые агенты читают файлы инструкций в корне репозитория: CLAUDE.md — Claude Code, AGENTS.md — Codex, Cursor, GitHub Copilot и многие другие, .cursorrules — Cursor. Пишите их коротко и конкретно: какие есть компоненты, где лежат токены, чего продукт не делает никогда. В отличие от промпта, они на месте в начале каждой сессии.

4. 04

   Проверяйте работу до слияния.

   Многое в слопе видно прямо в коде: сырое значение цвета вместо токена, градиент, рамка и тень на одном элементе. Правило линтера или небольшой скрипт ловят это при каждом изменении, а агент, который умеет его запускать, ловит собственный дрейф, прежде чем объявить работу готовой. Остальное смотрит человек.

5. 05

   Проверьте то, что уже выпущено, и начните с худшего.

   В живом продукте слоп — это бэклог, а не повод всё переписать. Найдите его, посчитайте и начните с того, что люди видят чаще всего: с экранов, которые открывают каждый день, и компонентов, которые используются везде. Один вид исправлений на изменение — и каждое изменение остаётся достаточно маленьким для ревью.

6. 06

   Сохраните то, что выбрали намеренно.

   Не каждый градиент — слоп. Бренд, фиолетовый намеренно, скруглённый элемент, ставший частью вашего стиля, размытие, которое вы задумали, — это решения, и уборка, которая их удаляет, меняет ваш облик на чужой. Запишите их как решения, чтобы потом никто их не «исправил».

Вопросы об AI-слопе.