🎯 О чём этот конспект: Подробное практическое руководство по преодолению «AI-слопа» (AI Slop) — безликого, шаблонного и дешёвого веб-дизайна, который по умолчанию генерируют языковые модели. Автор на реальном примере лендинга по аренде авто разбирает типичные антипаттерны ИИ-генераций и демонстрирует полный рабочий пайплайн: от создания дизайн-системы и генерации консистентной графики до внедрения интерактивных видео-компонентов и плавного скролла.
👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам, дизайнерам и инди-хакерам, которые собирают сайты через Claude Code, Cursor, Windsurf и нейросети, но сталкиваются с тем, что результат выглядит шаблонно и не вызывает доверия у клиентов.
✨ Что получите: Готовый набор паттернов, промптов и алгоритмов работы, позволяющий превратить сгенерированный нейросетью макет с оценкой 4/10 в премиальный коммерческий продукт с правильной типографикой, выверенной сеткой и интерактивной видеоанимацией.
1. Анатомия AI-слопа: как выявить шаблонный ИИ-дизайн
Контекст: Когда нейросети дают общую задачу без строгих рамок и дизайн-системы, она опирается на статистически усредненные шаблоны из обучающей выборки. В сообществе такой результат называют AI Slop (ИИ-месиво/шлак) — сайт функционально существует, но выглядит безлико, шаблонно и мгновенно считывается пользователями как «поделка нейронки за 5 минут». Наличие таких элементов резко снижает конверсию и уровень доверия потенциальных клиентов к бизнесу. Знание маркеров AI-слопа необходимо, чтобы вовремя вырезать их на этапе код-ревью и генерации.
Тайминг: , ,
Выгода: Мгновенная идентификация слабых мест в сгенерированном проекте; избавление сайта от визуального «дешёвого» шума, повышающее доверие пользователей на 80–90%.
Как применить:
- Шаг 1: Проведите аудит типографики и отступов. Проверьте код и стили проекта. Исключите вездесущий шрифт
Playfair Display(особенно курсивные начертания в luxury-тематиках) и неоправданно гигантскийletter-spacing(трекинг) в надзаголовках и пунктах меню. - Шаг 2: Удалите фейковые блоки доверия. Замените выдуманные статистические виджеты («24/7 поддержка», «Рейтинг 4.9», «1000+ клиентов») и псевдоотзывы с круглыми градиентными заглушками вместо аватарок на реальные кейсы либо уберите их вовсе.
- Шаг 3: Исправьте цветовую гамму и контейнеры. Избавьтесь от стандартного сине-фиолетового градиента или примитивного сочетания «черный + грязное золото». Расширьте искусственно зауженную сетку: нейросети часто делают гигантские поля слева и справа, превращая контент в узкую полосу.
- Шаг 4: Очистите верстку от шаблонных украшательств. Удалите бегущие строки (marquee) на первом экране, декоративные полоски поверх карточек, бессмысленные цветные точки в бейджах и текстовые переносы «по одному слову на строку».
Результат: Чёткое техническое задание для очистки интерфейса от паразитных AI-паттернов.
2. Формирование дизайн-системы как фундамента проекта
Контекст: Нейросеть генерирует посредственный дизайн не потому, что «не умеет», а потому, что лишена контекста и вынуждена импровизировать. Чтобы агент выдавал стабильный и дорогой результат, перед написанием кода ему необходимо передать дизайн-систему (набор дизайн-токенов: цвета, сетка, радиусы скруглений, типографика, состояния компонентов). Зафиксировав эти правила один раз, вы исключаете визуальный хаос во всех генерируемых блоках. Получить дизайн-систему можно либо из готовых open-source библиотек крупных брендов, либо сгенерировав её из понравившихся референсов.
Тайминг: , ,
Выгода: Сокращение правок стилей на 70%; гарантия визуальной консистентности всех блоков интерфейса.
Как применить:
- Шаг 1: Подбор референсов. Найдите 2–3 качественных скриншота реальных проектов на Pinterest или дизайн-агрегаторах под вашу нишу (например, эстетика темного минимализма с глубоким синим акцентом).
- Шаг 2: Генерация Design System. Загрузите изображения в инструмент Claude Design (вкладка Design Systems -> Create Design System). Укажите имя проекта, прикрепите файлы и дождитесь создания токенов (типографика, UI-кит, кнопки, отступы).
- Шаг 3 (Альтернативный): Экспорт из баз готовых систем. Перейдите на сервис
getdesign.io, выберите дизайн-систему любого премиального бренда и скачайте файл спецификацииdesign.md. - Шаг 4: Применение правил к проекту. Подключите полученную спецификацию к Claude / Cursor и передайте промпт для пересборки верстки.
Перестрой дизайн по подключенной дизайн-системе.
Структуру и состав блоков сохрани, меняется только визуальное оформление, отступы, шрифты и цветовая палитра.Результат: Проект переведен на строгую дизайн-систему с четко разделенными UI-токенами, едиными радиусами скругления и гармоничной палитрой.
3. Поблочная разработка и внедрение шрифта Manrope
Контекст: Попытка заставить AI переписать весь лендинг за один запрос неизбежно приводит к галлюцинациям, потере функционала и съехавшей верстке. Самый эффективный подход в вайбкодинге — поблочная итеративная доработка сверху вниз (Hero Section -> Каталог -> Шаги -> Футер). Базовым шагом улучшения восприятия текста является замена дефолтных системных шрифтов на современный геометрический гротеск, например Manrope, который отлично держит форму как в заголовках, так и в интерфейсных кнопках.
Тайминг: , ,
Выгода: Полный визуальный контроль над каждым экраном, устранение поломок верстки и повышение читаемости текстов.
Как применить:
- Шаг 1: Экспорт в локальное окружение. Выгрузите проект из веб-генератора через
Share -> Download ZIP, распакуйте архив и откройте репозиторий в редакторе (VS Code с Claude Code или Cursor). - Шаг 2: Замена типографики. Отправьте AI-агенту команду на глобальную замену семейства шрифтов для заголовков:
Поменяй шрифт заголовков на Manrope для всех заголовков H1-H6 в проекте. Проверь читаемость, убери чрезмерный letter-spacing и обеспечь корректные переносы строк, чтобы заголовки не разбивались по одному слову на строку.- Шаг 3: Настройка контейнеров первого экрана. Снимите ограничение узкой сетки для текстовых блоков, сделав ширину адаптивной, и уменьшите межбуквенные расстояния до естественных значений (0 или -0.01em).
Результат: Чистая, современная европейская типографика без кривых разрывов фраз и навязчивого AI-трекинга.
4. Генерация и встраивание промо-графики с учётом UI-сетки
Контекст: Инструменты вроде Claude не генерируют растровую графику «из коробки», оставляя серые плейсхолдеры. Обычная генерация картинок через Midjourney или Flux без ТЗ часто создает перегруженные изображения, на которые невозможно наложить текст и кнопки (отсутствует свободное пространство — negative space). Чтобы графический ассет органично вписался в Hero-блок, он должен генерироваться под строгую композицию интерфейса с достаточным количеством «воздуха» сверху и правильным ракурсом объекта.
Тайминг: , , ,
Выгода: Получение качественной графики, оптимизированной под наложение элементов UI; ускорение загрузки страницы за счет сжатия ассетов в 30+ раз.
Как применить:
- Шаг 1: Подготовка промпта через Claude. Сделайте скриншот референса композиции, загрузите в Claude и попросите составить промпт:
Возьми это вложение за основу и убери все элементы интерфейса на нем. Мне надо расположить премиум машину черного цвета строго в профиль, чтобы был абсолютно чистый однородный темный пол/фон. В верхней части кадра должно быть много свободного воздушного пространства (negative space), так как там будут расположены заголовок и кнопки сайта. Дай детальный промпт на английском языке для генератора изображений.- Шаг 2: Генерация изображения. Вставьте полученный промпт в Midjourney / Flux / Nano Banana с соотношением сторон
16:9и разрешением4K. - Шаг 3: Сжатие ассета. Обязательно сожмите полученный файл через компрессор изображений (уменьшив вес с 5 МБ до ~150–200 КБ), чтобы не уронить Google PageSpeed.
- Шаг 4: Позиционирование в кодовой базе. Поместите файл в папку ассетов и поставьте задачу AI-агенту:
Сделай добавленное изображение фоном главного экрана (Hero Section).
Изображение не должно начинаться ниже текста — контент должен располагаться прямо над свободной частью графики.
Структура блока сверху вниз:
1. Заголовок H1 (в 1-2 строки, уменьши размер шрифта при необходимости).
2. Краткое описание под заголовком (строго в 2 строки).
3. CTA-кнопки действия.
4. Автомобиль с фонового изображения располагается строго под кнопками.
Убери надзаголовок. На стыке с нижним блоком настрой мягкий линейный градиент в цвет фона следующей секции, чтобы убрать резкую границу среза картинки.Результат: Премиальный первый экран с гармоничным распределением пространства, на котором текст идеально читается поверх сгенерированного арта.
5. Интеграция готовых интерактивных компонентов с 21st.dev
Контекст: Создание сложных интерактивных галерей, 3D-карточек и нестандартных каруселей «с нуля» через промпты часто приводит к багам в JavaScript и CSS-анимациях. Вместо изобретения велосипеда профессиональные вайбкодеры используют открытые библиотеки готовых современных Tailwind/React компонентов (например, 21st.dev), копируя эталонный код и промпт реализации напрямую в проект.
Тайминг: , , ,
Выгода: Экономия 2–4 часов ручной верстки; получение продакшен-готового компонента с плавной анимацией и правильной доступностью.
Как применить:
- Шаг 1: Поиск интерактивного решения. Перейдите в каталог
21st.dev, откройте раздел карточек (Cards/Carousel) и выберите компонент с плавной сменой слайдов и динамической подгрузкой описания. - Шаг 2: Копирование метапромпта. Нажмите кнопку
Copy Promptна странице выбранного компонента. - Шаг 3: Пересборка блока в кодовой базе. Отправьте AI-агенту скопированный контекст вместе с инструкцией адаптации под вашу нишу:
[Вставьте скопированный промпт с 21st.dev]
Давай пересоберем блок каталога автомобилей, используя логику этого компонента.
Требования к адаптации:
- Галерея карточек листается горизонтально по центру экрана.
- Ниже активной карточки отображаются характеристики авто и кнопка «Оставить заявку».
- Сделай секцию на всю ширину экрана (full-width), убрав узкие контейнеры.
- Навигационные стрелки вынеси за пределы карточек (справа и слева), чтобы они не перекрывали контент.
- При наведении на стрелку добавь инверсию цветов (белый фон, черная иконка).
- Убери лишние надзаголовки и теги категорий над машинами.Результат: Интерактивный full-width каталог с плавной сменой фокуса, не конфликтующий с основной дизайн-системой.
6. Заимствование физики плавного скролла (Smooth Scroll) через анализ DOM
Контекст: Нейросети часто реализуют скролл либо стандартным жестким браузерным скачком, либо примитивным скриптом, который работает дергано и ломает wheel-события тачпада. Чтобы сайт ощущался дорогим («как в Awwwards»), необходим выверенный Smooth Scroll с инерцией (Lenis, Locomotive или кастомная реализация). Самый быстрый способ добиться такого эффекта — спарсить реализацию с референсного сайта через HTML-код.
Тайминг: , , ,
Выгода: Реализация премиального кинематографичного поведения страницы за 3 минуты без багов совместимости.
Как применить:
- Шаг 1: Получение исходного кода эталона. Найдите сайт с идеальной физикой прокрутки (например,
augen.pro). Откройте сервисview-page-source.com, введите URL референса, нажмите View Source и скачайте полученный HTML-файл страницы. - Шаг 2: Перенос в рабочую директорию. Сохраните скачанный HTML-файл в корень вашего проекта (например, как
reference.html). - Шаг 3: Экстракция логики агентом. Дайте задачу Claude Code проанализировать и перенести реализацию:
Проанализируй прикрепленный файл reference.html. Найди, с помощью какой библиотеки или скрипта там реализован плавный инерционный скролл (smooth scroll).
Интегрируй точно такую же логику и параметры плавности прокрутки в наш проект index.html / App.tsx. Убедись, что скролл не ломает навигацию по якорным ссылкам.Результат: Страница приобретает мягкую, выверенную инерцию скролла идентично премиальному референсу.
7. Создание бесшовной интерактивной видеоанимации с Kling AI
Контекст: Статичные картинки делают сайт плоским, а классические тяжелые 3D-сцены на Three.js требуют сложной оптимизации и много времени на разработку. Прорывной альтернативой выступает генерация управляемых видео-переходов между объектами через видеонейросети (Image-to-Video). Связав два видеоролика (прямой и обратный переход) с кликами по кнопкам интерфейса, можно создать иллюзию дорогого 3D-конфигуратора при минимальном весе страницы.
Тайминг: , , , ,
Выгода: Вау-эффект уровня Apple/Tesla при затратах времени до 15 минут; полное отсутствие сложного 3D-кода.
Как применить:
- Шаг 1: Подготовка крайних кадров. Возьмите сгенерированное исходное фото первой машины. Сгенерируйте во второй итерации фото второго автомобиля в том же ракурсе, освещении и окружении.
- Шаг 2: Генерация прямого видеоперехода. Откройте сервис Kling AI, выберите режим генерации по первому и последнему кадрам (Start Frame -> первая машина, End Frame -> вторая машина). Установите длительность 5–8 секунд. Промпт: «First car drives forward out of frame, second car smoothly drives into frame from behind and stops at the exact same spot».
- Шаг 3: Генерация обратного видеоперехода. Поменяйте кадры местами (Start Frame -> вторая машина, End Frame -> первая машина) и сгенерируйте обратный видеоряд.
- Шаг 4: Оптимизация видео. Скачайте MP4-файлы без водяных знаков и прогоните через видеокомпрессор, уменьшив размер каждого файла минимум в два раза (до 1–1.5 МБ). Назовите файлы
1.mp4и2.mp4и положите в проект. - Шаг 5: Программирование логики смены кадров. Передайте агенту ТЗ для JS-плеера:
В папке проекта лежат два видео: 1.mp4 (первая машина уезжает, вторая приезжает) и 2.mp4 (вторая машина уезжает, первая приезжает).
Реализуй интерактивную логику в главном блоке:
1. По умолчанию показывается стоп-кадр с первым автомобилем.
2. При клике на правую стрелку запускается воспроизведение 1.mp4. По завершении видео плеер фиксируется на последнем кадре (второй авто).
3. При клике на левую стрелку воспроизводится 2.mp4, возвращая сцену к первому автомобилю.
4. Предусмотри блокировку повторного клика во время проигрывания анимации, чтобы видео не дергалось.Результат: Интерактивный промо-блок, где автомобили реалистично сменяют друг друга по клику пользователя, создавая эффект дорогого коммерческого продакшена.
8. Золотые правила коммерческого веб-дизайна: Mobile-First и умеренность
Контекст: Увлекаясь генерацией сложного визуала, вайбкодеры часто совершают фатальную ошибку: перегружают страницу моушн-графикой и забывают про смартфоны. Слишком сложный креатив (горизонтальный скролл, летающие элементы, постоянные триггеры) перегружает когнитивное восприятие посетителя. Пользователь перестает понимать, в чем ценность продукта и где находится целевое действие (CTA). Главная задача любого коммерческого сайта — решать задачу бизнеса, а не собирать награды на дизайнерских конкурсах.
Тайминг: , ,
Выгода: Защита от потери 60–80% мобильного трафика; рост конверсии интерфейса за счет четкой фокусировки на целевом действии.
Как применить:
- Шаг 1: Приоритет Mobile-First. Проверяйте верстку на экранах смартфонов после каждого сгенерированного блока. Если тяжелая анимация, видеофон или нестандартный слайдер не помещаются на мобильном экране или снижают FPS — скрывайте их через медиавыражения (
hidden md:block) и заменяйте на легковесные статичные картинки. - Шаг 2: Устранение визуального шума. Исключите антипаттерны: навязчивый горизонтальный скролл на всю страницу, сложные параллакс-смещения, заставляющие текст плясать перед глазами, и многократные бессмысленные микроанимации при каждом движении мыши.
- Шаг 3: Фокус на конверсии. На каждом экране интерфейса должна быть одна очевидная доминирующая цель: ознакомиться с предложением, изучить параметры в каталоге или отправить заявку. Дизайн должен направлять внимание к CTA-кнопке, а не отвлекать от нее.
Результат: Сбалансированный, быстрый и адаптивный веб-продукт, одинаково эффективно работающий на смартфонах и десктопах.
Как избавиться от AI-слопа в веб-дизайне: ответы на частые вопросы
В: Что делать, если Claude Code или Cursor снова возвращаются к шаблонным стилям при длительной сессии? О: Это происходит из-за вымывания контекста из системного промпта. Сохраните выжимку правил вашей дизайн-системы в корневой файл .cursorrules или CLAUDE.md. Пропишите там строгие запреты: запрет на использование Playfair Display, запрет на цветные точки в бейджах, фиксацию шрифта Manrope и максимальную ширину сетки (например, max-w-7xl).
В: Как найти качественные референсы для промптов, если нет дизайнерского опыта? О: Спросите саму нейросеть: «Я делаю сайт в нише X]. Напиши 5 точных англоязычных поисковых запросов для Pinterest и Recent.design, отражающих минималистичный и премиальный UI». Полученные фразы вставляйте в поиск агрегаторов и сохраняйте выдачу для создания дизайн-систем.
В: Почему генерация видео через Kling иногда дает искажения кузова машины? О: Видеонейросети чувствительны к разнице ракурсов между первым и последним кадром. Следите, чтобы оба сгенерированных изображения имели абсолютно идентичный угол съемки (строго 90 градусов в профиль), одинаковую линию горизонта и высоту колес относительно пола. Чем меньше геометрических различий в базовых кадрах, тем чище трансформация.
В: Не убьет ли видеоанимация скорость загрузки страницы на смартфонах? О: Убьет, если подключать видео напрямую без оптимизации. Обязательно сжимайте видео через компрессоры до 1–1.5 МБ, используйте атрибуты preload="none" или preload="metadata", а для экранов менее 768px полностью отключайте плеер, показывая оптимизированный WebP/AVIF стоп-кадр через CSS-брейкпоинты.
В: Что такое скиллы Impeccable, Taste-Skill и UI/UX Pro, упомянутые в видео? О: Это специализированные системные промпты (system instructions) и расширения контекста для ИИ-агентов, в которые «зашиты» правила хорошего тона графического дизайна, типографики и UX-эвристик. Они снижают количество откровенного брака при нулевых вводных, но не заменяют реальные дизайн-системы и референсы.
В: Почему узкая сетка контента считается признаком AI-слопа? О: Нейросети часто ставят избыточные отступы по краям экрана (px-16, px-32 или жесткие контейнеры типа max-w-3xl для секций целиком), из-за чего на мониторах 1920x1080 сайт выглядит сжатым в узкую вертикальную колонку, окруженную пустотой. Современный веб строится на сбалансированных широких контейнерах (max-w-7xl или 1440px) с полноэкранными акцентными блоками.
Как избавиться от AI-слопа в веб-дизайне: инструменты и ссылки из видео
- Claude Design — специализированная среда для генерации и редактирования UI-проектов на базе Claude — упомянут в видео.
- Claude Code — агентное расширение и консольный инструмент для работы с кодовой базой напрямую в IDE — упомянут в видео.
- getdesign.io — библиотека готовых дизайн-систем и UI-токенов реальных мировых брендов с экспортом в Markdown —
https://getdesign.io - Pinterest — платформа для поиска визуальных референсов, UI-композиций и идей для арт-дирекшна —
https://pinterest.com - Nano Banana — генеративная модель для создания фотореалистичных графических ассетов в высоком разрешении — упомянут в видео.
- 21st.dev — маркетплейс и библиотека готовых анимированных Tailwind/React компонентов с готовыми промптами —
https://21st.dev - View Page Source — инструмент для быстрого извлечения и выгрузки полного исходного HTML/JS-кода сайтов —
https://view-page-source.com - Recent.design (бывший Godly Website) — курируемая галерея лучших мировых сайтов с нестандартным веб-дизайном —
https://recent.design - Supahero.io — специализированный каталог эталонных главных экранов (Hero Sections) —
https://supahero.io - Land-book — галерея веб-дизайна с фильтрацией по типам страниц и стилям —
https://land-book.com - Made on Tilda — подборка креативных коммерческих проектов с акцентом на русскоязычную типографику — упомянут в видео.
- Footer.design — коллекция премиальных и нестандартных вариантов оформления футеров —
https://footer.design - Kling AI — генеративная видеонейросеть для создания реалистичных видео и анимаций по первому и последнему кадру — упомянут в видео.
Конспект создан на основе видео «Как избавиться от AI Slop в веб-дизайне» канала Matvey | ИИ-разработка. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=7VfNjgLuRX0
