Claude Code и нейросети: кратко о главном
🎯 О чём этот конспект: Пошаговый пайплайн создания нестандартных веб-интерфейсов с помощью нейросетей и AI-агента Claude Code. В видео подробно разбираются две механики: реализация интерактивного 2.5D-персонажа (лягушки), чья голова и глаза отслеживают курсор пользователя на 360°, и внедрение полноценной высокополигональной 3D-модели (круасана с текстурой гжели), сгенерированной из Multi-view изображений с помощью китайской нейросети Hunyuan Global.
👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам, UI/UX-дизайнерам и AI-креаторам, которые хотят уйти от шаблонных сайтов со стандартной скролл-анимацией и научиться интегрировать видеоспрайты и 3D-объекты без ручного моделирования.
✨ Что получите: Готовый алгоритм связки Gemini + Google Flow + Hunyuan Global + Claude Code: от генерации согласованных ракурсов до промптов для сборки адаптивного лендинга с интерактивными элементами и оптимизацией полигонов.
1. Подготовка видео-ассетов для персонажа с 360° трекингом курсора
Контекст: Большинство современных сайтов используют однотипные CSS- или GSAP-анимации по скроллу, которые больше не вызывают вау-эффекта у пользователей. Создание персонажа, динамически реагирующего на положение мыши, обычно требует сложной 3D-графики, риггинга и скелетной анимации в Three.js. Автор предлагает альтернативный и быстрый подход: генерация видеоряда, в котором объект плавно поворачивается во всех плоскостях, с последующей привязкой таймлайна видео к координатам курсора. Основа успеха здесь — правильный референс и подготовка промпта в LLM для графических нейросетей.
Тайминг: , , ,
Выгода: Экономия десятков часов на 3D-моделировании и настройке риггинга персонажа. Получение кинематографичного интерактивного персонажа за 10–15 минут генераций.
Как применить:
- Шаг 1: Поиск концепта и референса — Pinterest — Найдите референсное изображение персонажа или сцены с выразительной мимикой или формой (например, стилизованное животное с большими глазами на контрастном фоне).
- Шаг 2: Обратный промптинг референса — Gemini — Загрузите найденную картинку в Gemini и запросите генерацию детализированного англоязычного промпта под конкретный стиль и позиционирование объекта в кадре:
Привет, напиши мне промпт на английском языке для генерации похожего изображения в Nano Banana. Мне нужен похожий хамелеон, который сидит в правой стороне экрана, стилизованный 3D-персонаж, высокое качество, чистый изолированный фон.- Шаг 3: Генерация статичного мастер-кадра — Google Flow — Создайте новый проект в Google Flow. В выпадающем меню выберите модель Nano Banana Pro, формат соотношения сторон
16:9или4:3, выставьте генерацию по 4 варианта (X4). Скорректируйте персонажа под свою задачу (в примере автора хамелеон был заменен на детализированную жабу). - Шаг 4: Генерация кругового видео (360° Turnaround) — Google Flow — Переключитесь в режим Video (
16:9), выберите модель (например, Veo / Omni) и загрузите утвержденный кадр с персонажем. Опишите поворот головы во все стороны без резких скачков, чтобы при перемещении курсора не возникало застреваний:
A smooth 360 degree head rotation of the cute frog character, looking up, down, left, right, seamless movement, high quality 3D render, studio lighting, isolated neutral background.- Шаг 5: Экспорт видеоролика — Google Flow — Нажмите на три точки в углу готового видео, выберите разрешение
1080pи скачайте MP4-файл на локальный диск.
Результат: Качественный MP4-ролик с плавным вращением головы персонажа во всех направлениях, готовый для маппинга кадров на координаты курсора.
2. Вайбкодинг страницы с трекингом курсора в Claude Code
Контекст: Сгенерированное видео само по себе не интерактивно — его необходимо связать с DOM-деревом и слушателями событий мыши. Традиционная верстка такого функционала вручную требует написания логики интерполяции, нормализации координат clientX/clientY и управления текущим временем видео (currentTime). Claude Code позволяет за один промпт развернуть локальный веб-сервер, создать разметку и прописать логику отслеживания мыши, преобразующую позицию курсора в соответствующий таймкод видео.
Тайминг: , ,
Выгода: Развертывание рабочего интерактивного прототипа за 2–3 минуты без ручного написания JS-логики математического маппинга координат.
Как применить:
- Шаг 1: Инициализация рабочего каталога — Терминал / Файловая система — Создайте на рабочем столе чистую директорию под проект (например,
frog-tracking) и скопируйте в нее скачанный видеофайл персонажа. - Шаг 2: Открытие проекта в Claude Code — Claude Code — Откройте Claude Code, перейдите во вкладку взаимодействия с кодовой базой, нажмите
Open Folderи выберите созданную папку с видеофайлом. - Шаг 3: Передача мастер-промпта агенту — Claude Code — Сформулируйте задачу на создание иммерсивного лендинга с явным указанием поведения видеоплеера при перемещении курсора:
Создай иммерсивный одностраничный сайт. В центре страницы расположи крупную реалистичную видео-иллюстрацию лягушки из локального файла. Напиши JavaScript-логику: при движении мыши по экрану видео должно интерактивно менять свой прогресс воспроизведения (currentTime) в зависимости от положения курсора (X и Y), создавая эффект, будто глаза и голова лягушки непрерывно следят за курсором пользователя. Добавь плавную интерполяцию (lerp), чтобы движения не дергались. Стилизуй страницу в минималистичном премиальном стиле с акцентной типографикой.- Шаг 4: Проверка и запуск — Браузер — Откройте созданный файл
index.htmlв браузере или запустите локальный сервер (например, через расширение Live Server или командуnpx serve .). Проверьте плавность отклика видео на перемещение мыши по всей рабочей области экрана.
Результат: Готовый лендинг, где персонаж плавно поворачивает голову и смотрит строго в ту точку экрана, где находится курсор мыши.
3. Генерация 3D-моделей из Multi-View изображений в Hunyuan Global
Контекст: Внедрение настоящих 3D-ассетов на коммерческие сайты традиционно требует навыков работы в Blender, 3ds Max или найма 3D-моделлера. Генерация 3D через классический Text-to-3D в нейросетях часто дает мыльные текстуры и поломанную геометрию с обратной стороны объекта, так как ИИ не знает скрытых плоскостей. Китайская нейросеть Hunyuan Global решает эту проблему с помощью генерации по множественным ракурсам (Multi-View Images), собирая геометрию из согласованных видов со всех сторон.
Тайминг: , , , ,
Выгода: Создание коммерческой 3D-модели сложной формы (на примере круасана с узором гжели) за 5 минут без знаний топологии, UV-развертки и шейдинга.
Как применить:
- Шаг 1: Подготовка мастер-изображения объекта — Pinterest / Google Flow — Найдите или сгенерируйте концепт объекта с выразительной фактурой (автор использовал круасан, оформленный в стиле фарфоровой росписи Гжель).
- Шаг 2: Создание согласованных ракурсов (Multi-View) — Google Flow — Сгенерируйте с помощью промптов вид одного и того же объекта с 4 обязательных сторон:
- Центральный вид спереди (Front view)
- Вид справа (Right view)
- Вид слева (Left view)
- Вид снизу / сверху (Bottom / Top view)
- Шаг 3: Настройка параметров в Hunyuan Global — Hunyuan Global (3D) — Перейдите в интерфейс Hunyuan Global, выберите раздел
Image to 3Dи активируйте вкладкуMultiple Images->Add Multiple Views. - Шаг 4: Выбор модели и плотности сетки — Hunyuan Global — В параметре
Select Modelустановите актуальную версию Generation 3.1. В селектореModel Count(число полигонов/шейдеров) выберите максимальную детализацию — 1.5M для максимальной проработки текстур и складок. - Шаг 5: Загрузка ракурсов и генерация — Hunyuan Global — Распределите подготовленные изображения по слотам: фронтальный, правый, левый и нижний ракурсы. Нажмите Generate Now и дождитесь окончания генерации геометрии и текстурных карт.
- Шаг 6: Экспорт в формате OBJ — Hunyuan Global — В окне предпросмотра готовой модели в правом верхнем углу переключите формат с GLB на OBJ (Object) и скачайте архив. Распакуйте архив: внутри будут
.obj-файл геометрии,.mtl-библиотека материалов и текстурные карты.
Результат: Высокополигональная 3D-модель в формате OBJ с наложенными UV-текстурами высокого разрешения, готовая к веб-рендерингу.
4. Сборка 3D-лендинга, автосжатие полигонов и мобильная адаптация в Claude Code
Контекст: Сгенерированная модель на 1.5 миллиона полигонов весит десятки мегабайт и в исходном виде моментально обрушит производительность браузера, особенно на мобильных устройствах. Чтобы интерактивный 3D-объект работал со скоростью 60 FPS, необходим рендерер (Three.js), правильная настройка освещения, плавный автоповорот, параллакс-реакция на мышь и децимация (сжатие) сетки без потери визуального качества текстур.
Тайминг: , , ,
Выгода: Автоматическая оптимизация «тяжелой» модели силами AI-агента, полная адаптивность под iOS/Android и сборка лендинга за один промпт.
Как применить:
- Шаг 1: Подготовка файлов проекта — Файловая система — Создайте новую папку (например,
croissant-nordic-bakery). Скопируйте в нее все распакованные файлы из Hunyuan (.obj,.mtl, текстуры.png/.jpg). - Шаг 2: Подключение проекта к Claude Code — Claude Code — Откройте каталог проекта через
New->Open Folder. Убедитесь, что AI-агент видит 3D-ассеты в файловом дереве. - Шаг 3: Запуск сборки лендинга через мастер-промпт — Claude Code — Отправьте подробное техническое задание на интеграцию Three.js и построение первого экрана:
Создай премиальный одностраничный сайт для скандинавской пекарни "Nord Bakery".
Визуальный стиль: дорогой минимализм, глубокие теплые оттенки, стильная антиква в заголовках.
Структура первого экрана:
1. Размести интерактивный 3D-объект, загрузив локальную модель из папки (OBJ/MTL). Это круасан с выразительной текстурой.
2. Объект должен плавно парить и вращаться в воздухе по оси Y по умолчанию.
3. Добавь реакцию на перемещение курсора мыши (легкий наклон и параллакс) и на скролл страницы.
4. Настрой реалистичные студийные источники света в Three.js (Key light, Fill light, мягкий Rim light для золотистого отблеска).
5. Обеспечь корректный рендеринг на смартфонах (Touch events для вращения пальцем, адаптивный масштаб canvas под мобильные экраны вроде iPhone).- Шаг 4: Автоматическое сжатие полигональной сетки — Claude Code — Если модель подтормаживает или долго загружается, поручите агенту оптимизировать геометрию:
Модель содержит около 1.5 млн полигонов и слишком тяжелая для продакшена. Оптимизируй и сожми 3D-модель (уменьши количество полигонов с помощью децимации геометрии), сохранив максимальное качество текстур и нормалей, чтобы сайт грузился мгновенно на мобильных устройствах.- Шаг 5: Проверка адаптивности в DevTools — Браузер — Откройте сайт, вызовите инструменты разработчика (
F12), включите Device Toolbar и проверьте работу 3D-сцены на эмуляции мобильных экранов (например, iPhone XR). Убедитесь, что круасан отцентрирован, корректно скейлится и не ломает верстку.
Результат: Рабочий адаптивный лендинг с интерактивной 3D-моделью, летающей в воздухе, реагирующей на курсор и тач-события, оптимизированной для мгновенной загрузки.
Claude Code и нейросети: ответы на частые вопросы
В: Почему для персонажа с трекингом глаз используется видео, а не Three.js с риггингом?
О: Генерация видеоролика с круговым обзором в нейросети занимает считанные минуты и дает фотореалистичную или стилизованную картинку кинокачества с тенями и сложной мимикой. Полноценный 3D-риггинг персонажа такого уровня в Blender с последующим переносом скелета в Three.js требует дней профессиональной работы 3D-аниматора.
В: Зачем нужны Multi-View изображения в Hunyuan Global, если есть Text-to-3D?
О: Одиночное изображение или текстовый промпт заставляют нейросеть «додумывать» невидимые части объекта. В результате задняя и нижняя стороны часто получаются размытыми, асимметричными или с артефактами. Подача 4 ракурсов (спереди, слева, справа, снизу) гарантирует цельную топологию и четкую текстуру со всех углов обзора.
В: В каком формате лучше выгружать 3D-модель из Hunyuan: GLB или OBJ?
О: Автор рекомендует формат OBJ вместе с сопутствующими файлами MTL и картами текстур. Этот формат дает Claude Code прямой доступ к текстовому описанию геометрии и материалов, что упрощает AI-агенту манипуляции с шейдерами, освещением и алгоритмами сжатия в коде Three.js.
В: Как именно Claude Code сжимает 1.5-миллионную модель без потери качества?
О: По запросу пользователя AI-агент может применить скрипты децимации (например, через three/addons SimplifyModifier или внешние утилиты сборки), уменьшая плотность полигональной сетки на плоских участках и сохраняя детализацию текстурных координат (UV) и карты нормалей, за счет чего визуальный вид не страдает.
В: Будет ли интерактивная 3D-модель работать на смартфонах?
О: Да. В коде инициализации Three.js агент прописывает слушатели touch-событий (touchstart, touchmove), аналогичные движению мыши, а также настраивает адаптивную камеру (PerspectiveCamera) в зависимости от соотношения сторон экрана window.innerWidth / window.innerHeight.
В: Что делать, если персонаж в видео поворачивается слишком резко и застревает?
О: Проблема заключается в промпте для видеогенерации. Необходимо перегенерировать видеоряд в Google Flow, добавив в запрос акцент на бесшовность и плавность: «ultra-smooth continuous slow rotation», исключив резкие переходы камеры и смену позы тела.
Claude Code и нейросети: инструменты и ссылки из видео
- Pinterest — платформа для поиска визуальных концептов и референсов для персонажей и 3D-объектов —
https://pinterest.com - Google Gemini — языковая модель, используемая для генерации подробных англоязычных промптов по картинкам —
https://gemini.google.com - Google Flow (с моделями Nano Banana Pro и Veo) — нейросетевая среда для генерации статичных изображений и видеороликов — упомянут в видео
- Hunyuan Global (Hunyuan3D) — китайская нейросеть от Tencent для генерации 3D-моделей по тексту и Multi-view изображениям (версия 3.1) — упомянут в видео
- Claude Code — агентская среда от Anthropic для написания кода, верстки веб-страниц и интеграции ассетов — упомянут в видео
Конспект создан на основе видео «Как делать крутые эффекты на сайтах с помощью нейросетей» канала «Максим | Последняя надежда русского дизайна». Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=wRrXhWSWGqw
