МАТЕРИАЛЫ К УРОКУ

Как создавать премиальные 3D-сайты с Claude Code

Пошаговая инструкция со всеми промптами и настройками

▶ Смотреть на YouTube
Результат

Что ты научишься делать

🔍

Проводить автоматическую разведку ниши и конкурентов через ИИ

🌐

Генерировать премиальный сайт на основе данных о рынке

🎬

Создавать 3D scroll-анимацию "до/после" с Nano Banana 2

📊

Проводить SEO/UI-аудит и генерировать HTML-отчёт для клиента

Стэк

Что понадобится

Anti-Gravity

Бесплатная IDE для разработки

бесплатно →

Claude Code

Расширение для Anti-Gravity - нужна подписка Anthropic (рекомендуется Max)

FireCrawl

ИИ-скрейпер для анализа конкурентов

бесплатно →

Higgsfield

Генерация изображений и видео (Nano Banana 2)

кредиты →

Скиллы

Website-Intelligence, Prompts Image, 3D-creater-site, strateg-seo

⬇ Скачать скиллы
Процесс

Пошаговая инструкция

01Подготовка среды

Устанавливаем Anti-Gravity и настраиваем Claude Code.

  • Скачай и открой Anti-Gravity
  • Установи расширение Claude Code в боковой панели
  • Открой терминал, напиши /login - авторизуйся через браузер
  • Файл → Открыть папку → Новая папка → "Ремонт квартир" → Создать → Открыть
  • Нажми на иконку Claude слева → Новая сессия
Если GUI глючит - открой терминал внизу, напиши claude и работай там. Панель чата удобнее справа: ПКМ → Расположение панели → Справа.
02Подключение скилла Website-Intelligence

Загружаем скилл-исследователь и сохраняем как встроенную команду.

  • Скачай ZIP, распакуй
  • Перетащи папку Website-Intelligence в левую панель Anti-Gravity → «Добавить папку в рабочую область»
  • Дай Claude Code промпт:
💬 Промпт 1 - Инициализация скилла
Привет! Ознакомься со скиллом Website-Intelligence в левой панели. Я хочу, чтобы ты пошагово повторил все заложенные в нем действия. Когда закончишь, сохрани этот процесс как новый встроенный навык, чтобы я мог вызывать его в будущем.
03Запуск разведки ниши через FireCrawl

Скармливаем Claude API-ключ и URL сайта - он сам проведёт полный анализ рынка.

  • Зарегайся на firecrawl.dev (бесплатного тарифа хватит)
  • Скопируй API-ключ с главной страницы дашборда
  • В Claude Code набери / → выбери Website-Intelligence → Enter
  • Дай ему API-ключ FireCrawl + URL сайта
⚙️ Claude автоматически пройдёт все фазы: сканирование сайта → поиск топ-5 конкурентов → анализ дизайна, контента, SEO → генерация отчёта. Когда дойдёт до Hard Stop и спросит одобрение - пиши "да, одобряю".
04Генерация сайта

На основе разведки Claude строит полноценный сайт.

  • После одобрения брифа дай промпт:
💬 Промпт 2 - Сборка сайта
Отличная работа. Теперь, опираясь на этот отчет, создай код полноценного сайта. Сделай его стильным и конверсионным. И самое главное — оставь на первом экране место, куда я позже добавлю крутую 3D-анимацию.
05Генерация промптов для анимации

Подключаем скилл Prompts Image - Claude создаст 3 промпта для изображений и видео.

  • Перетащи папки Prompts Image и 3D-creater-site в Anti-Gravity → «Добавить в рабочую область»
  • Открой новый терминал, вызови Claude
  • Дай промпт:
💬 Промпт 3 - Генерация промптов для анимации
Опираясь на структуру сайта, которую мы только что создали, я хочу сгенерировать 3D-анимацию для главного экрана. Идея такая: мы показываем убитую, старую советскую квартиру с бабушкиными коврами на стенах, рваными обоями и скрипучим линолеумом. И по мере скролла эта квартира плавно превращается в стильный, премиальный минималистичный лофт 2026 года. Сгенерируй мне три детальных текстовых промпта для нейросети, чтобы я мог создать эту анимацию.
Claude выдаст 3 промпта: старая квартира, новый лофт, видео-переход.
06Создание изображений в Higgsfield

Генерируем два изображения: убитую квартиру и стильный лофт.

  • Зайди на image.hixfield.ai → залогинься через Google
  • Images → Create an image
  • Вставь первый промпт от Claude (старая квартира) → Generate
  • Выбери самый мрачный вариант → нажми Reference
  • Удали промпт, вставь второй промпт (чистый лофт) → Generate
  • Выбери лучший вариант лофта → Скачай оба изображения
⚙️ Соотношение сторон: 16:9 | Качество: 2K | Модель: Nano Banana 2 | Количество: 4
Белый фон по краям - обязательно! Так картинка бесшовно вольётся в сайт.
07Создание видео-перехода

Генерируем анимацию трансформации квартиры.

  • В Higgsfield: Video → Create a video
  • Start frame = старая квартира, End frame = лофт
  • Вставь третий промпт от Claude (видео-переход) → Generate
  • Скачай готовое видео
⚙️ Длительность: 5 секунд | Аудио: выключено | Модель: Kling 3.0 | Качество: 1080p
1080p стоит чуть больше кредитов, но разница в качестве заметная.
08Интеграция scroll-анимации на сайт

Привязываем видео к скроллу - при прокрутке квартира преображается.

  • Перетащи скачанное видео в папку проекта в Anti-Gravity
  • Дай Claude промпт:
💬 Промпт 4 - Scroll-анимация
Я только что загрузил видео. Я хочу, чтобы ты поместил его на самый верх сайта. Интегрируй его так, чтобы анимация была привязана к скроллу мышки. Когда пользователь заходит на сайт, он видит убитую советскую квартиру. Но по мере того, как он прокручивает страницу вниз, квартира плавно преображается в современный лофт. Сделай верхний блок белым для бесшовного перехода.
Если эффект слишком быстрый/медленный - скажи Claude "сделай помедленнее/побыстрее".
09SEO и UI/UX аудит

Финальная полировка - автоматический аудит и HTML-отчёт для клиента.

  • Перетащи папку strateg-seo в Anti-Gravity → «Добавить в рабочую область»
  • Дай промпт:
💬 Промпт 5 - Аудит сайта
Загрузи скилл strateg-seo. Проведи полный аудит нашего сайта: проверь доступность, UI/UX, SEO-теги, размеры изображений и скорость загрузки.
  • После аудита дай второй промпт:
💬 Промпт 6 - HTML-отчёт
Сгенерируй красивый HTML-отчет с результатами этого аудита. Сделай его в стильном тёмном дизайне. Покажи, что было ДО и что стало ПОСЛЕ. Добавь прогресс-бары по SEO и юзабилити, чтобы клиент видел реальную ценность.

Первые $1200 на ИИ -
бесплатный интенсив

Внутри
  • Реальный демо AntiGravity вживую
  • Софт, который за 5 минут находит компании без сайтов с готовыми контактами
  • Кейсы учеников: $1650 за 3 проекта без команды
Два бонуса в конце
  • 50 скучных и самых прибыльных ниш без конкуренции
  • Чек-лист: первые $500 за 7 дней
Бесплатно. Навсегда.
Забрать интенсив