О чём этот эфир

Шестнадцатый живой эфир сообщества. Показываю свой подход к дизайну сайта и собираю вживую интерактивный эффект для главной страницы: персонаж следит за курсором, фон оживает на скролле. От таких деталей сайт сразу выглядит дороже.

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

Что вы увидите

Интерактивный эффект «персонаж следит за курсором»: как он сделан на самом деле, и почему это видео, а не 3D
Генерация картинки-референса в Nano Banana из собственной татуировки волка
Higgsfield и kie.ai: где дешевле генерировать видео и фото, разбор тарифов и кредитов
Kling 3.0: стартовый и конечный кадр, промт от Claude, режимы качества и их цена
3D-путь через Spline: генерация модели девушки за запотевшим стеклом по референсу
Почему 3D-модель без скелета не даёт согнуть руки, и где вообще делается риггинг
Когда 3D избыточно и проще обойтись связкой видео плюс код
Claude Design: что это такое и как лимиты теперь входят в общую подписку
Дизайн-система из референса: скриншотим секции, называем их, просим собрать систему стилей
Почему дизайн по умолчанию выглядит как AI slop и как скармливать референсы правильно
Минимализм против ярких анимаций с точки зрения продаж
Экспорт макета из Claude Design в Claude Code и сборка реального сайта
Экономия токенов: собрать правки комментариями и применить одной командой
Безопасность сайта: что реально взламывают и как закрыть дыры через security skills
Нагрузка на сайт от видео и 3D-анимаций, форматы картинок под скорость

Таймкоды

0:00 Вступление, тема эфира: дизайн
0:38 🎨 Идея из комьюнити: motion-эффект, персонаж следит за мышкой
2:05 🎨 Демо: волк из татуировки следит за курсором, огонь на скролле
5:06 Как сделана визуализация: это видео-генерация плюс код
6:08 Модель Nano Banana для генерации картинки
6:15 💰 Higgsfield: генерация видео и фото, подписка от 19$, кредиты
7:42 Сайт kie.ai: Model Market, image to video и image to image
8:35 💰 Почему kie.ai: 5$ за 1000 кредитов, дешевле для видео
10:22 Kling 3.0: стартовый и конечный кадр, промт, музыка
10:36 💰 Режимы качества: 200 кредитов стандарт, 670 за 4K
11:09 Сложный путь: 3D, девушка прижата к стеклу
11:56 Подписка на Spline для генерации 3D-модели
14:00 Пайплайн: 3D-модель в код, потом в Claude Code и на сайт
15:40 🐛 Ресёрч: 3D строится из чёткой фигуры, нужен image to 3D
19:55 🐛 Раздражение: Claude даёт три варианта вместо решения
24:00 Кейс из практики: конструктор кухонь из каталога картинок
33:50 🐛 3D-зависимости: для движения руки нужен скелет
34:40 Unreal Engine для 3D-персонажей и подключение к Claude
36:27 🐛 Модель из Spline без скелета, локти не согнуть
39:59 ✅ Вердикт: риггинг делается снаружи, нужен Meshy
41:20 Альтернатива: видео на фоне, блоки скролятся поверх
42:17 Вопрос участника: motion-видео из TikTok через Claude
48:43 🎨 Claude Design: лимиты теперь входят в подписку
49:19 🎨 Что такое Claude Design: макеты, прототипы, слайды
50:00 🎨 Почему по умолчанию выходит AI slop
50:42 🎨 Референсы дизайна: saaslandingpage.com и Landbook
51:33 🎨 Минимализм против ярких анимаций в продажах
53:11 🎨 Дизайн-система: скриншотим и называем секции, собираем стили
55:57 🎨 React, загрузка Figma и GitHub, экспорт в Claude Code
1:01:08 🎨 Строим демо-сайт автоматизаций на пять блоков
1:03:01 🔧 Безопасность сайта: что взламывают и как закрыться
1:10:51 🎨 Twix и share: переносим промт в Claude Code
1:11:44 💰 Экономия токенов: правки комментариями, одна команда
1:12:43 ✅ Готова дизайн-система, лендинг и вариации A B C
1:22:00 Совет: определиться с целью и не учить всё сразу
1:26:09 ✅ Вывод: с видео проще, не стоит усложнять
1:26:50 🔧 Нагрузка на сайт от видео и 3D, форматы под скорость
1:28:10 Финал эфира

Кому будет полезно

Если вы делаете сайт с Claude Code и хотите, чтобы он выглядел дорого, но не понимаете, как добавить живые интерактивные эффекты без дизайнера.

Если вы уже пробовали генерировать дизайн и он каждый раз выходит как типовой AI slop, а вам нужно повторить конкретный референс и держать единый стиль на всех страницах.

Таймкоды с 🎨 отмечают решения по дизайну, с 🔧 технические шаги, с 🐛 моменты живого дебага, с ✅ ключевые выводы эфира, с 💰 разбор цен и экономии.

Инструменты из эфира

Claude Code (терминал, генерация кода сайта, подключение к Blender и Unreal, security skills для защиты)
Claude Design (макеты и дизайн-система, прототипы, слайды, экспорт в Claude Code, теперь входит в подписку)
Higgsfield (генерация видео и фото, подписка от 19$ в месяц, оплата кредитами)
kie.ai (Model Market, image to video и image to image, 5$ за 1000 кредитов)
Nano Banana (генерация и правка картинок по референсу)
Kling 3.0 (видео из стартового и конечного кадра, режимы качества 200 и 670 кредитов)
Spline AI (генерация 3D-моделей по референсу, экспорт GLB и кода)
Meshy и Mixamo (3D-модели со скелетом, риггинг для движения)
Unreal Engine (3D-персонажи, подключение к Claude)
saaslandingpage.com и Landbook (галереи дизайнов для референсов и вдохновения)
Supabase (защищённая база данных, API-ключи в .env, не в коде сайта)