~/wiki / brending-i-aydentika / ai-dizayn-shadcn-shablonizatsiya-problema

AI-усреднение: почему все продукты стали выглядеть одинаково и как из этого выйти

Основной чат

Чат для вайбкодеров: новости, гайды, поиск исполнителей, маркетплейс и разбор реальных кейсов.

$ cd раздел/ $ join vibe dev
AI-усреднение: почему все продукты стали выглядеть одинаково и как из этого выйти - обложка

Почему так происходит: механика усреднения

Когда модель генерирует интерфейс без чёткого контекста, она сэмплирует из статистического центра обучающих данных. Центр — это то, что встречается чаще всего, что выглядит нейтрально и не обидит никого. Anthropic назвал это напрямую в официальном Frontend Aesthetics cookbook в октябре 2025 года: «You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic.»

Но у усреднения есть ещё один слой — инфраструктурный.

В 2023 году разработчик под ником shadcn выпустил компонентную библиотеку shadcn/ui: Radix UI примитивы + Tailwind, без зависимости, просто копируй компоненты к себе. К 2026 году у неё больше 114 000 звёзд на GitHub — один из самых популярных frontend-проектов на платформе. Все AI-инструменты — Cursor, v0, Lovable, Figma Make, Claude Code — обучены на коде который используют shadcn. Когда ты просишь сгенерировать интерфейс без дополнительного контекста, получаешь shadcn-форму по умолчанию.

Результат: дизайнер делает макет в Figma Make, разработчик генерирует в v0, фаундер строит в Lovable — и все трое получают одно и то же. Потому что все инструменты конвергируют к одному основанию.


Как выглядит AI-slop: симптомы по категориям

Не каждый сгенерированный интерфейс — AI-slop. Но есть устойчивые сигналы.

Типографика Inter или Roboto в каждом весе между 400 и 600. Разница между заголовком и подзаголовком — полтора размера, не три. Кегль основного текста 14px: читаемо, но безлично.

Цвет Один из двух сценариев: либо фиолетово-синий градиент на белом фоне, либо полностью нейтральная палитра серых без акцента. Оба сигнализируют: «здесь не было решения о цвете».

Компоненты Три-четыре колонки одинаковых карточек. Кнопка с текстом «Get Started» или «Learn More». Тег badge в каждом блоке. Всё это shadcn с нулевой кастомизацией.

Иллюстрации 3D-персонажи без лиц в невозможных позах, держащие светящиеся объекты. Glassmorphism-карточки на размытом фоне. Это стандартный вывод stock AI-генераторов без бренд-контекста.

Пространство Щедрые отступы везде — что само по себе хорошо, кроме случаев когда пространство скрывает отсутствие контентной стратегии.


Почему это не проблема модели

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

Проверить просто: дай модели конкретные ограничения. «Никакого Inter. Один доминирующий цвет с одним акцентом. Шрифт с весом 200 и весом 800 без промежуточных градаций. Асимметричная сетка.» Результат будет принципиально другим — та же модель, другой контекст.

Проблема не в инструменте. Проблема в том, что большинство людей не дают инструменту ничего кроме «сделай красиво».


Четыре способа выйти из усреднения

1. Запретить дефолты по имени

Самый быстрый рычаг — не описывать что хочешь, а запретить то, чего не хочешь. «Не используй Inter, Roboto, Open Sans» работает лучше чем «используй красивый шрифт» — потому что запрет отсекает конкретные высоковероятные дефолты.

Anthropic выпустил официальный Frontend Design плагин в ноябре 2025 года — это SKILL.md который явно запрещает перегруженные шрифты и заставляет Claude выбрать конкретное визуальное направление до написания кода. Направления: brutalist, maximalist, retro-futuristic, organic, luxury, playful, editorial, art deco, soft/pastel, industrial. Принцип там сформулирован точно: «Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.»

Это работает потому что принуждает к выбору. Модель не может уклониться в «нейтральное» если ты назвал нейтральное нежелательным.

2. Упаковать бренд в файл

DESIGN.md, CLAUDE.md или SKILL.md — файл с правилами бренда который читает AI перед тем как что-то генерировать. Не «пиши красиво», а конкретные параметры:

markdown
## Типографика
- Никогда: Inter, Roboto, Open Sans, Arial
- Заголовок: Fraunces
- Текст: Bricolage Grotesque
- Моно: JetBrains Mono
- Контраст весов: 200 vs 800, не 400 vs 600

## Цвет
- Один доминирующий цвет, один резкий акцент
- Запрещено: фиолетово-синий градиент на белом фоне
- Все цвета — в CSS-переменных, не инлайн

## Компоненты
- Использовать существующие компоненты по имени, не создавать похожие
- Не hand-roll кнопку если она уже есть в системе

Один такой файл, применённый к проекту, меняет результат сильнее чем любые промпты в конкретном чате.

3. Дать визуальный референс, не текстовое описание

Текстовый промпт производит текстоформатный вывод. Визуальный референс — визуальный. Claude Code умеет читать изображения: посмотреть на экран и воспроизвести структуру, ритм отступов, пары шрифтов с хорошей точностью.

Источники референса по убыванию трудоёмкости: сгенерированная концепция из AI-инструмента → скриншот существующего сайта → кадр из Figma. Главное — дать что-то конкретное. «Сделай как Linear» работает хуже чем скриншот Linear.

4. Подключить реальную компонентную систему через MCP

Если AI генерирует компоненты без связи с существующей системой — он изобретает версию shadcn с нулевой кастомизацией. Figma MCP, shadcn MCP-сервер или собственный MCP дизайн-системы дают модели доступ к реальным компонентам по имени.

Разница: без MCP AI пишет кнопку которая «похожа на Primary». С MCP — использует Button/Primary из твоей системы напрямую. Это не косметическая разница — это разница между новым мусором в кодовой базе и чистым продолжением системы.


Shadcn — не враг

Важное уточнение которое легко потерять: shadcn сам по себе — хорошая библиотека. Доступная, консистентная, с продуманным API. Проблема не в ней.

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

Shadcn — это основание. Поверх него нужен бренд.


Итог

AI генерирует усреднённое потому что так устроено сэмплирование из статистического центра. Это не баг — это поведение по умолчанию без контекста.

Выход не в смене инструмента. Выход в том, чтобы дать AI контекст который сделает дефолт невозможным.

plaintext
☐ Запретить конкретные дефолты по имени (шрифты, цвета, паттерны)
☐ Собрать DESIGN.md или CLAUDE.md с правилами бренда
☐ Установить Frontend Design плагин от Anthropic
☐ Давать визуальный референс, не только текстовое описание
☐ Подключить дизайн-систему через MCP — не давать AI изобретать компоненты
$ cd ../ ← назад к Брендинг и айдентика