Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
Проблема: Промпты в духе «сделай красиво и профессионально» выдают безликий AI-шлак без глубины и динамики.
Решение: Система многослойного скролла (Layering), декомпозиция референсов (Godly, 21st.dev) и фреймворк из 7 шагов с жестким циклом верификации через скриншоты.
Результат: Сайты с интерактивным parallax-эффектом, динамическими продуктовыми демо и стеками карточек, сгенерированные агентом за 1–2 итерации с экономией токенов до 45%.
🎯 Блок саммари
🎯 О чём этот конспект: Практическое руководство по генерации интерактивных сайтов премиум-класса с помощью Claude и специализированных дизайн-скиллов (Scrollcraft). Автор разбирает архитектуру многослойных страниц (layering), методы симуляции работы SaaS-продуктов прямо в браузере, интеграцию готовых компонентов из 21st.dev и правила построения verification loop через покадровые скриншоты.
👤 Кому будет полезно: Вайбкодерам, AI-разработчикам, фаундерам микро-SaaS и веб-дизайнерам, создающим лендинги и веб-приложения через Claude Code, Cursor или Lovable и желающим избавиться от эффекта дешевой AI-генерации.
✨ Что получите: Пошаговый алгоритм из 7 шагов для настройки агента, шаблоны промптов для воспроизведения многослойного скролла и стеков карточек, список лучших библиотек UI-компонентов и методику тестирования анимаций на мобильных устройствах.
1. Анатомия премиального AI-сайта: эффект многослойности (Layering) и динамический скролл
Контекст: Большинство сгенерированных нейросетями страниц выглядят плоскими, шаблонными и статичными. Чтобы лендинг производил впечатление продукта стоимостью десятки тысяч долларов, в него необходимо закладывать пространственную глубину. Ключевое архитектурное решение — разделение интерфейса на 3–4 независимых слоя (фоновые горы, средний план, интерактивный экран продукта, передний план с декоративными элементами), движущихся с разной скоростью при скролле. Дополнительно премиальный эффект усиливают динамически всплывающий текст, карточки, складывающиеся в стопку (card stacking), и залипающая навигация (sticky navbar).
Тайминг:[00:03], [00:30], [01:49]
Выгода: Мгновенный рост воспринимаемой ценности продукта и увеличение глубины просмотра страницы без усложнения кодовой базы громоздкими 3D-библиотеками (Three.js/WebGL).
Как применить:
Шаг 1: Разделение графики на слои — Графический редактор / удаление фона — Подготовьте визуальные ассеты в формате transparent PNG: удаленный фон, ключевые объекты переднего плана и промежуточные текстуры.
Шаг 2: Постановка задачи агенту на Parallax-структуру — Claude Code / Cursor — Передайте агенту архитектурные требования к hero-секции, явно зафиксировав независимые плоскости движения.
Создай Hero-секцию с многослойным скроллом (layering parallax effect). Структура должна состоять из 4 независимых слоев с разным z-index и разной скоростью смещения при скролле:1. Задний план (z-0): горный массив с медленным параллаксом (скорость 0.2).2. Средний план (z-10): интерактивный мокап экрана ноутбука/продукта (скорость 0.5), реагирующий на положение курсора.3. Передний план (z-20): ветви деревьев / силуэты растений (скорость 0.8), создающие эффект рамки.4. Текстовый слой (z-30): заголовок и CTA с плавным fade-in при появлении во вьюпорте.Сделай Navbar фиксированным (sticky), чтобы он сохранялся при прокрутке всей страницы.
Шаг 3: Настройка эффекта наложения карточек — Tailwind CSS + Framer Motion — Задайте для контентных секций логику position: sticky с увеличивающимся отступом сверху (top: calc(header_height + index * offset)), чтобы карточки собирались в аккуратную колоду по мере прокрутки.
Результат: Живая hero-секция с кинематографической глубиной, где элементы плавно перекрывают друг друга при скролле.
2. Живая симуляция продукта вместо скучных скриншотов
Контекст: Стандартные скриншоты софта на посадочных страницах не вызывают эмоций и плохо конвертируют посетителей в регистрацию. Вместо статичных картинок интерфейса автор создает микро-анимации, имитирующие реальное взаимодействие с приложением прямо в вебе. На примере сервиса диктовки Glido показано, как Claude может сгенерировать интерактивный блок: пользователь держит клавишу, говорит текст, слова динамически набираются в поле и в один клик «переносятся» в интерфейсы Slack, Cursor, Gmail и Claude Code в терминале.
Тайминг:[01:31], [02:01]
Выгода: Посетитель сайта «пробует» ключевую механику продукта еще до скачивания или авторизации, что кардинально повышает конверсию в лиды.
Как применить:
Шаг 1: Анализ бенчмарка конкурентов — Браузер — Найдите сервис-референс с сильной визуализацией сценария (например, Lemon) и разберите, какое конкретно действие визуализировано (нажатие горячей клавиши -> звуковая волна -> расшифровка).
Шаг 2: Генерация интерактивного мокапа — Claude Code — Попросите агента реализовать симуляцию процесса в виде зацикленной CSS/JS-анимации.
Сделай интерактивный блок-демонстрацию для сервиса голосового ввода Glido:1. Анимированный статус-бар диктовки: звуковая волна и имитация набора текста в реальном времени («грязный» черновик преобразуется в чистый текст).2. Табы с интерфейсами реальных программ: Slack, Cursor IDE, Gmail, Terminal (Claude Code).3. При переключении таба или по таймеру показывай, как готовый текст плавно вставляется в соответствующее поле выбранного приложения.4. Если пользователь наводит курсор на блок, анимация должна вставать на паузу.5. Ниже сделай бегущую строку (marquee) из двух противоположно направленных потоков с иконками поддерживаемых приложений.
Шаг 3: Микро-интерактивность фоновых элементов — React / Canvas — Добавьте легкое смещение фоновых элементов (градиентов, расплывчатых пятен, счетчиков) вслед за движением мыши без перегрузки процессора.
Результат: Интерактивный интерактив-виджет, объясняющий ценность сложного продукта за 3 секунды без единого поясняющего видеоролика.
3. Деконструкция референсов: как победить «AI-шлак» правильным контекстом
Контекст: Главная причина, почему AI-модели генерируют примитивные сайты со стандартными шрифтами и синими градиентами, заключается в расплывчатых промптах. Модель не понимает субъективных оценок вроде «сделай стильно» или «добавь премиальности». Чтобы получить топовый результат, нужно деконструировать существующие сайты-победители конкурсов дизайна и скармливать агенту конкретные параметры: соотношение слоев, физику скролла, готовые промпты компонентов и фирменные правила.
Тайминг:[02:30], [02:55], [04:47]
Выгода: Исключение бесконечных циклов ручных правок и получение сайта журнального уровня с первой-второй итерации.
Как применить:
Шаг 1: Сбор референсов в кураторских каталогах — Godly.website, Awwwards, Motion Sites — Выберите сайты по вашей тематике и выделите конкретные механики: как закреплен Hero-блок, как анимирован футер, как сделаны аккордеоны FAQ.
Шаг 2: Извлечение UI-компонентов — 21st.dev — Найдите готовые анимированные блоки (Container Scroll, Interactive Gradients, 3D Pin, Glowing Border) и скопируйте их готовые системные промпты для AI-агентов.
Шаг 3: Составление мульти-референсного задания — Claude / Cursor — Передайте агенту задачу, объединяющую ссылки на поведение элементов из разных источников.
Ты выступаешь в роли ведущего UI/UX-инженера. Построй лендинг, вдохновляясь следующими принципами:- Логика скролла и слоев: как на сайте Fora (4 раздельных параллакс-слоя: горы, деревья, продукт, текст).- Анимации компонентов: используй спецификацию карточек из 21st.dev (container-scroll с эффектом отдаления при прокрутке).- Эстетика фона: динамический мягкий градиент в стиле Motion Sites, реагирующий на параллакс мыши.- Цветовая палитра и типографика: строгий минимализм в соответствии с приложенным гайдлайном бренда.Сделай все переходы плавными, избегай резких рывков при скролле.
Результат: Кодовая база, использующая проверенные временем паттерны современного веб-дизайна вместо галлюцинаций модели.
4. Промпт-шаблон /goal для ваншот-генерации концептов через Scrollcraft
Контекст: Автор разработал дизайн-скилл Scrollcraft — систему инструкций и правил анимации, которую можно передавать AI-агенту. С помощью единого целевого мета-промпта (/goal) Claude может с первого раза создать две абсолютно разные по настроению, но полностью завершенные концепции продукта (например, сайт гидропонной фермы трав Ferna и сайт кастомной механической клавиатуры Lowkey с анимацией ее сборки/разборки).
Тайминг:[04:24], [05:11], [05:38], [06:23]
Выгода: Быстрая генерация нескольких готовых дизайн-направлений для клиента или собственного стартапа за считанные минуты.
Как применить:
Шаг 1: Загрузка дизайн-скилла — Scrollcraft / системный промпт — Подключите системную инструкцию Scrollcraft к контексту агента (в файл .cursorrules, claude.md или в память Claude Code).
Шаг 2: Запуск пакетной генерации через /goal — Claude — Отправьте команду на проектирование двух контрастных решений с использованием внешних генераторов графики (Kling, Higgsfield, Recraft) для ассетов.
/goal Создай два принципиально разных, но максимально впечатляющих концепта сайтов с глубокой многослойной структурой Scrollcraft:Концепт 1: «Ferna» (экологичный девайс для выращивания свежих трав дома без подоконников).- Зеленые, органические, земляные тона.- Многослойные PNG-растения на переднем плане и размытый фон.- Эффект роста зелени, синхронизированный с движением колеса мыши.- Стек контентных карточек преимуществ.Концепт 2: «Lowkey» (премиальная кастомная механическая клавиатура).- Темная индустриальная эстетика, неоновые акценты.- Интерактивная анимация нажатия клавиш при открытии сайта.- При скролле: взрыв-схема клавиатуры (детали корпуса, плата, свитчи и кейкапы плавно отдаляются друг от друга, раскрывая внутренности).- Интерактивный селектор цветов корпуса на 3D-модели / слоях.Требования к обоим: премиальность, утонченность, плавный скролл, стопроцентная адаптивность под мобильные экраны.
Шаг 3: Отбор и полировка лучшего варианта — Выберите наиболее стабильный концепт и переходите к точечной доработке артефактов (устранение стыков фонов и рассинхрона слоев).
Результат: Два готовых прототипа с кастомной анимацией разборки устройства и скролл-видеороликами, собранных за один запрос.
5. 7-шаговый фреймворк создания конвертирующих AI-сайтов
Контекст: Чтобы агент не сбивался при комплексной разработке лендинга, автор систематизировал процесс в строгий чек-лист из 7 этапов. Этот пайплайн гарантирует, что дизайн будет не просто красивым, а решит бизнес-задачи продукта, корректно отобразится на смартфонах и не развалится при реальном пользовательском сценарии.
Тайминг:[06:44], [06:53], [07:56], [08:06]
Выгода: Стандартизация веб-разработки: сокращение времени от идеи до production-ready сайта до 2–3 часов с предсказуемым качеством.
Пошаговый процесс:
Шаг 1: Brand Guidelines (Гайдлайны бренда)[06:53] — Claude — Задайте фиксированную систему: первичный/вторичный цвета, семейство шрифтов (Inter/Geist/Playfair), форму скруглений (border-radius) и логотипы, чтобы сайт не мутировал между страницами.
Шаг 2: Модель трех «P» (Pain, Person, Promise)[06:64] — Маркетинговая оценка — Сформулируйте: Какую острую боль решает продукт (Pain)? Для какого конкретного аватара клиента (Person)? Какое ключевое обещание решения (Promise)? Вшейте эти 3P в структуру текстов.
Шаг 3: Scroll Responsiveness (Тактильный отклик на скролл)[06:83] — CSS/JS — Дайте посетителю ощущение контроля: при малейшем скролле буквы плавно собираются в слова, цифры начинают счетчик, а карточки реагируют на наведение. Избегайте резких укачивающих 3D-полетов.
Шаг 4: Поиск вдохновения (Inspiration)[07:33] — Godly.website / Awwwards — Найдите 2–3 конкретных референса для каждого блока (отдельно для FAQ, отдельно для таблицы ценников, отдельно для футера).
Шаг 5: Использование готовых компонентов (Components)[07:64] — 21st.dev — Возьмите проверенные чистые компоненты с открытым кодом вместо того, чтобы заставлять нейросеть писать сложные анимации с нуля.
Шаг 6: Мобильная валидация (Mobile-First)[07:96] — Chrome DevTools / Claude — Проверьте поведение слоев на экране смартфона: параллакс должен упрощаться, тяжелые стеки заменяться на свайп-карусели, а мокапы экранов масштабироваться под ширину экрана.
Шаг 7: Покадровый цикл верификации (Verification Loop)[08:06] — Claude Code Playwright / Puppeteer — Настройте агента на автоматическое снятие скриншотов с шагом в 100px скролла сверху донизу, чтобы он сам находил визуальные баги и вылеты за пределы экрана.
Промпт для настройки скриншот-верификации:
Запусти локальный сервер и выполни покадровую проверку страницы:1. Открой сайт в эмуляции мобильного устройства (iPhone 15 Pro, 393x852) и десктопа (1920x1080).2. Сделай серию скриншотов скролла с шагом 250px от верха до самого подвала.3. Проанализируй полученные изображения: - Есть ли горизонтальный скролл (overflow-x)? - Читается ли текст на фоне параллакс-слоев? - Нет ли резких стыков или наложений карточек на текст заголовков?4. Исправь найденные CSS-ошибки и повтори тест до чистого результата.
Результат: Проверенный и оттестированный сайт без багов верстки и с гарантированной адаптивностью под мобильный трафик.
6. Экономика и производительность моделей при генерации кода
Контекст: Автор провел сравнительное тестирование актуальных моделей Anthropic (Claude 3.5 Sonnet vs Claude 3.7 Sonnet / Fable 5 vs 5.1 в транскрипте) на одинаковых промптах, ассетах и скиллах Scrollcraft. Качество дизайна при строгих промптах визуально почти не отличается, однако новая модель демонстрирует колоссальную разницу в потреблении токенов и стоимости при агентском кодинге.
Тайминг:[08:30], [08:70], [09:24]
Выгода: Снижение расходов на API и подписки на 25–45%, а также защита от быстрого исчерпания недельных лимитов агента при длительных сессиях разработки.
Сравнительные цифры затрат токенов/стоимости на генерацию сайта:
Тест 1: Базовая модель — $20.22 | Оптимизированная модель — $18.24 (экономия ~10%)
Тест 2: Базовая модель — $14.67 | Оптимизированная модель — $14.52 (паритет)
Тест 3: Базовая модель — $21.64 | Оптимизированная модель — $12.83 (экономия 40.7%)
Тест 4: Базовая модель — $17.37 | Оптимизированная модель — $11.18 (экономия 35.6%)
Выводы для вайбкодера:
Качество решает промпт, а не версия модели: При использовании фреймворка из 7 шагов обе модели выдают идентичный премиальный дизайн.
Токеномика: Новые версии тратят до 45% меньше токенов на многошаговые рассуждения и компиляцию кода.
Расход лимитов: За 5–6 часов интенсивной агентской генерации и покадровой отладки израсходовано всего 45% недельного лимита сообщений (в предыдущих версиях лимит сгорал за 1–2 часа).
Результат: Возможность вести непрерывную разработку сложных анимированных веб-интерфейсов на протяжении всего рабочего дня без страха упереться в rate-limits.
FAQ
В: Почему мои сайты от Claude выглядят дешево и однообразно? О: Нейросеть берет наиболее вероятные среднестатистические шаблоны из обучающей выборки. Без указания конкретных физических слоев, точных таймингов скролла и ссылок на компоненты из 21st.dev или Godly модель возвращает стандартный Tailwind-шаблон с синей кнопкой.
В: Обязательно ли использовать Three.js для создания эффекта глубины? О: Нет. В большинстве разобранных примеров автор вообще не использует тяжелые 3D-библиотеки. Эффект создается комбинацией 3–4 прозрачных PNG-слоев, CSS position: sticky, параллакс-смещений с разной скоростью и свойством transform: translateY().
В: Что такое фреймворк трех «P» и зачем он программисту? О: Это три кита позиционирования: Pain (боль клиента), Person (целевой аватар), Promise (обещание решения). Без понимания этих трех элементов AI сгенерирует текст-заглушку («Lorem Ipsum» в красивой обертке), который не объясняет суть сервиса и отпугивает клиентов.
В: Как заставить анимации адекватно работать на смартфонах? О: Параллакс и скролл-эффекты на тачскринах часто лагают или ломают прокрутку. Для мобильных брейкпоинтов (< 768px) необходимо отключать тяжелые параллакс-скрипты, заменяя их на плавные CSS fade-in переходы, а вертикальный стек карточек переводить в горизонтальный свайп.
В: Зачем агенту скриншотить экран во время работы? О: Текстовая модель не «видит» верстку так, как человек. Попросив Claude Code снять скриншоты страницы через Headless-браузер (Playwright/Puppeteer), вы замыкаете цикл обратной связи (verification loop): модель видит выпавшие за пределы экрана блоки и сама исправляет стили.
В: Где брать готовые UI-блоки, которые Claude может легко внедрить? О: Лучший ресурс — каталог 21st.dev. Там представлены современные компоненты (Shadcn UI, Tailwind, Magic UI), у каждого из которых есть кнопка «Copy Prompt» с готовой инструкцией для AI-агентов.
В: Насколько новая модель экономичнее старых версий при вайбкодинге? О: В многошаговых задачах с правками кода и верификацией экономия токенов составляет от 25% до 45%. Это позволяет работать над сайтом 5–6 часов подряд без блокировки аккаунта лимитами провайдера.
Ресурсы и ссылки
21st.dev — Крупнейшая открытая библиотека готовых дизайн-компонентов с промптами для AI-агентов — https://21st.dev
Godly Design — Кураторская подборка сайтов с лучшим современным веб-дизайном, анимациями и hero-секциями — https://godly.website
Motion Sites — Коллекция лендингов с выдающимися интерактивными и анимированными фонами — упомянут в видео
Scrollcraft Skill — Авторский дизайн-скилл с зашитыми правилами многослойности и скролла — доступен в бесплатном Skool-сообществе автора
Claude Code — Консольный агент Anthropic для разработки и автономного написания веб-проектов — упомянут в видео
Glido — Сервис голосового ввода и мгновенной диктовки текста в любые приложения — упомянут в видео
Конспект создан на основе видео «This is probably my favorite website I've ever built with Claude» канала AI Automation Society. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=FFWtxjvW2ts
