Как избавиться от AI-слопа в веб-дизайне: Пошаговый гайд по созданию дорогих интерфейсов с Claude
Пошаговый гайд по устранению AI Slop: создание дизайн-систем, типографика Manrope, внедрение компонентов с 21st.dev и видеоанимаций Kling AI в Claude Code.
Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Подробное практическое руководство по преодолению «AI-слопа» (AI Slop) — безликого, шаблонного и дешёвого веб-дизайна, который по умолчанию генерируют языковые модели. Автор на реальном примере лендинга по аренде авто разбирает типичные антипаттерны ИИ-генераций и демонстрирует полный рабочий пайплайн: от создания дизайн-системы и генерации консистентной графики до внедрения интерактивных видео-компонентов и плавного скролла.
👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам, дизайнерам и инди-хакерам, которые собирают сайты через Claude Code, Cursor, Windsurf и нейросети, но сталкиваются с тем, что результат выглядит шаблонно и не вызывает доверия у клиентов.
✨ Что получите: Готовый набор паттернов, промптов и алгоритмов работы, позволяющий превратить сгенерированный нейросетью макет с оценкой 4/10 в премиальный коммерческий продукт с правильной типографикой, выверенной сеткой и интерактивной видеоанимацией.
1. Анатомия AI-слопа: как выявить шаблонный ИИ-дизайн
Контекст: Когда нейросети дают общую задачу без строгих рамок и дизайн-системы, она опирается на статистически усредненные шаблоны из обучающей выборки. В сообществе такой результат называют AI Slop (ИИ-месиво/шлак) — сайт функционально существует, но выглядит безлико, шаблонно и мгновенно считывается пользователями как «поделка нейронки за 5 минут». Наличие таких элементов резко снижает конверсию и уровень доверия потенциальных клиентов к бизнесу. Знание маркеров AI-слопа необходимо, чтобы вовремя вырезать их на этапе код-ревью и генерации.
Тайминг:[00:24], [01:18], [02:26]
Выгода: Мгновенная идентификация слабых мест в сгенерированном проекте; избавление сайта от визуального «дешёвого» шума, повышающее доверие пользователей на 80–90%.
Как применить:
Шаг 1: Проведите аудит типографики и отступов. Проверьте код и стили проекта. Исключите вездесущий шрифт Playfair Display (особенно курсивные начертания в luxury-тематиках) и неоправданно гигантский letter-spacing (трекинг) в надзаголовках и пунктах меню.
Шаг 2: Удалите фейковые блоки доверия. Замените выдуманные статистические виджеты («24/7 поддержка», «Рейтинг 4.9», «1000+ клиентов») и псевдоотзывы с круглыми градиентными заглушками вместо аватарок на реальные кейсы либо уберите их вовсе.
Шаг 3: Исправьте цветовую гамму и контейнеры. Избавьтесь от стандартного сине-фиолетового градиента или примитивного сочетания «черный + грязное золото». Расширьте искусственно зауженную сетку: нейросети часто делают гигантские поля слева и справа, превращая контент в узкую полосу.
Шаг 4: Очистите верстку от шаблонных украшательств. Удалите бегущие строки (marquee) на первом экране, декоративные полоски поверх карточек, бессмысленные цветные точки в бейджах и текстовые переносы «по одному слову на строку».
Результат: Чёткое техническое задание для очистки интерфейса от паразитных AI-паттернов.
2. Формирование дизайн-системы как фундамента проекта
Контекст: Нейросеть генерирует посредственный дизайн не потому, что «не умеет», а потому, что лишена контекста и вынуждена импровизировать. Чтобы агент выдавал стабильный и дорогой результат, перед написанием кода ему необходимо передать дизайн-систему (набор дизайн-токенов: цвета, сетка, радиусы скруглений, типографика, состояния компонентов). Зафиксировав эти правила один раз, вы исключаете визуальный хаос во всех генерируемых блоках. Получить дизайн-систему можно либо из готовых open-source библиотек крупных брендов, либо сгенерировав её из понравившихся референсов.
Тайминг:[03:24], [03:53], [05:24]
Выгода: Сокращение правок стилей на 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, который отлично держит форму как в заголовках, так и в интерфейсных кнопках.
Тайминг:[06:00], [06:16], [06:55]
Выгода: Полный визуальный контроль над каждым экраном, устранение поломок верстки и повышение читаемости текстов.
Как применить:
Шаг 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-блок, он должен генерироваться под строгую композицию интерфейса с достаточным количеством «воздуха» сверху и правильным ракурсом объекта.
Тайминг:[07:11], [08:59], [09:37], [10:26]
Выгода: Получение качественной графики, оптимизированной под наложение элементов 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), копируя эталонный код и промпт реализации напрямую в проект.
Тайминг:[11:12], [11:35], [11:55], [12:37]
Выгода: Экономия 2–4 часов ручной верстки; получение продакшен-готового компонента с плавной анимацией и правильной доступностью.
Как применить:
Шаг 1: Поиск интерактивного решения. Перейдите в каталог 21st.dev, откройте раздел карточек (Cards / Carousel) и выберите компонент с плавной сменой слайдов и динамической подгрузкой описания.
Шаг 3: Пересборка блока в кодовой базе. Отправьте AI-агенту скопированный контекст вместе с инструкцией адаптации под вашу нишу:
[Вставьте скопированный промпт с 21st.dev]Давай пересоберем блок каталога автомобилей, используя логику этого компонента.Требования к адаптации:- Галерея карточек листается горизонтально по центру экрана.- Ниже активной карточки отображаются характеристики авто и кнопка «Оставить заявку».- Сделай секцию на всю ширину экрана (full-width), убрав узкие контейнеры.- Навигационные стрелки вынеси за пределы карточек (справа и слева), чтобы они не перекрывали контент.- При наведении на стрелку добавь инверсию цветов (белый фон, черная иконка).- Убери лишние надзаголовки и теги категорий над машинами.
Результат: Интерактивный full-width каталог с плавной сменой фокуса, не конфликтующий с основной дизайн-системой.
6. Заимствование физики плавного скролла (Smooth Scroll) через анализ DOM
Контекст: Нейросети часто реализуют скролл либо стандартным жестким браузерным скачком, либо примитивным скриптом, который работает дергано и ломает wheel-события тачпада. Чтобы сайт ощущался дорогим («как в Awwwards»), необходим выверенный Smooth Scroll с инерцией (Lenis, Locomotive или кастомная реализация). Самый быстрый способ добиться такого эффекта — спарсить реализацию с референсного сайта через HTML-код.
Тайминг:[12:47], [13:08], [13:30], [13:58]
Выгода: Реализация премиального кинематографичного поведения страницы за 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 и положите в проект.
В папке проекта лежат два видео: 1.mp4 (первая машина уезжает, вторая приезжает) и 2.mp4 (вторая машина уезжает, первая приезжает).Реализуй интерактивную логику в главном блоке:1. По умолчанию показывается стоп-кадр с первым автомобилем.2. При клике на правую стрелку запускается воспроизведение 1.mp4. По завершении видео плеер фиксируется на последнем кадре (второй авто).3. При клике на левую стрелку воспроизводится 2.mp4, возвращая сцену к первому автомобилю.4. Предусмотри блокировку повторного клика во время проигрывания анимации, чтобы видео не дергалось.
Результат: Интерактивный промо-блок, где автомобили реалистично сменяют друг друга по клику пользователя, создавая эффект дорогого коммерческого продакшена.
8. Золотые правила коммерческого веб-дизайна: Mobile-First и умеренность
Контекст: Увлекаясь генерацией сложного визуала, вайбкодеры часто совершают фатальную ошибку: перегружают страницу моушн-графикой и забывают про смартфоны. Слишком сложный креатив (горизонтальный скролл, летающие элементы, постоянные триггеры) перегружает когнитивное восприятие посетителя. Пользователь перестает понимать, в чем ценность продукта и где находится целевое действие (CTA). Главная задача любого коммерческого сайта — решать задачу бизнеса, а не собирать награды на дизайнерских конкурсах.
Тайминг:[17:58], [18:18], [18:55]
Выгода: Защита от потери 60–80% мобильного трафика; рост конверсии интерфейса за счет четкой фокусировки на целевом действии.
Как применить:
Шаг 1: Приоритет Mobile-First. Проверяйте верстку на экранах смартфонов после каждого сгенерированного блока. Если тяжелая анимация, видеофон или нестандартный слайдер не помещаются на мобильном экране или снижают FPS — скрывайте их через медиавыражения (hidden md:block) и заменяйте на легковесные статичные картинки.
Шаг 2: Устранение визуального шума. Исключите антипаттерны: навязчивый горизонтальный скролл на всю страницу, сложные параллакс-смещения, заставляющие текст плясать перед глазами, и многократные бессмысленные микроанимации при каждом движении мыши.
Шаг 3: Фокус на конверсии. На каждом экране интерфейса должна быть одна очевидная доминирующая цель: ознакомиться с предложением, изучить параметры в каталоге или отправить заявку. Дизайн должен направлять внимание к CTA-кнопке, а не отвлекать от нее.
Результат: Сбалансированный, быстрый и адаптивный веб-продукт, одинаково эффективно работающий на смартфонах и десктопах.
FAQ
В: Что делать, если 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) с полноэкранными акцентными блоками.
Ресурсы и ссылки
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
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
Cursor