🎯 О чём этот конспект: Пошаговое руководство по созданию премиальных анимированных сайтов с эффектом 3D-параллакса, используя новую модель Claude Opus 5 и AI-инструменты для генерации графики. Метод позволяет обходиться без сложных фреймворков, Webflow или дорогостоящих агентств.
👤 Кому будет полезно: Вайбкодерам, веб-дизайнерам и предпринимателям, которые хотят быстро собирать визуально впечатляющие лендинги с минимальными затратами.
✨ Что получите: Вы научитесь генерировать качественные ассеты, разделять их на слои для анимации и собирать полноценный сайт с рабочим параллакс-эффектом через Claude Code.
1. Поиск вдохновения и генерация ассетов
Контекст: Процесс начинается не с кода, а с визуального концепта. Автор использует Pinterest для поиска референсов (например, "award winning real estate website") и AI-генератор изображений Hicksfield для создания уникального героя (hero section). Важно получить "чистый" фронтальный вид без лишних элементов интерфейса, чтобы потом было удобно работать с версткой.
Тайминг: ,
Выгода: Экономия тысяч долларов на услугах дизайнеров и покупке стоковых изображений.
Как применить:
- Шаг 1: Поиск референса — Pinterest — Найдите сайт в нужной нише, который вам нравится визуально.
- Шаг 2: Генерация базы — Hicksfield / Midjourney — Загрузите референс и попросите создать фронтальный вид (front view) для вашей компании.
Промпт для генерации (пример):
Create a hero section for a website using this image as inspiration. My company is called "Green Roofing". Put the logo in place and create a clean front view. Remove the map and all UI elements from the bottom. Expand the image to be full height.Результат: Готовое высококачественное изображение центрального экрана вашего будущего сайта.
2. Подготовка слоев для 3D-параллакса
Контекст: Для создания эффекта глубины (когда текст или объекты находятся "внутри" изображения) нужно разделить картинку на передний и задний планы. Автор использует Hicksfield для удаления объектов и Figma (или любой AI Background Remover) для создания прозрачности.
Тайминг: ,
Выгода: Создание эффекта "глубины" (fable-level design), который обычно требует сложной верстки или JS-библиотек.
Как применить:
- Шаг 1: Создание переднего плана — Hicksfield — Попросите AI оставить только объекты переднего плана (например, дома) и сделать небо прозрачным.
- Шаг 2: Создание заднего плана — Hicksfield (модель Nano Banana) — Попросите удалить все объекты, оставив только чистый фон (небо, горы).
- Шаг 3: Очистка — Figma / Background Remover — Убедитесь, что передний план сохранен как PNG с прозрачностью.
Промпт для разделения:
Remove all content from the image and remove the part above the houses. Make it transparent. Remove buttons, UI elements, and text. I only want the foreground objects.Результат: Два файла: front.png (объекты с прозрачным фоном) и back.jpg (чистый фон).
3. Сборка сайта в Claude Code (Opus 5)
Контекст: Теперь подключается Claude. Автор использует новую модель Opus 5 для написания кода. Важно инициализировать проект в пустой папке и сразу задать шрифтовые пары и базовую структуру.
Тайминг: ,
Выгода: Мгновенная генерация чистого HTML/CSS кода, который понимает структуру слоев.
Как применить:
- Шаг 1: Настройка окружения — Claude Code / Cursor — Откройте пустую папку и выберите модель Opus 5.
- Шаг 2: Первичный промпт — Claude — Загрузите изображения и опишите структуру.
Промпт для сборки:
Create a hero section for an imaginary winter real estate company. Use these fonts [вставьте CSS шрифтов]. Use the uploaded images: 'back.jpg' should be the background, and 'front.png' should have a positive z-index so it's on top. Align headline, description, and buttons to the center, positioned closer to the top.Результат: Базовая верстка сайта с правильно наложенными слоями.
4. Реализация параллакс-эффекта и финальная полировка
Контекст: Чтобы параллакс заработал, нужно задать разную скорость движения слоев при скролле. Автор просит Claude добавить этот эффект и корректирует мобильную версию, чтобы контент не перекрывался.
Тайминг: ,
Выгода: Профессиональная анимация без написания ни одной строчки кода вручную.
Как применить:
- Шаг 1: Анимация — Claude — Попросите добавить параллакс для
front.png. - Шаг 2: Типографика — Google Fonts — Используйте жирные шрифты (например, Anton) для усиления эффекта.
- Шаг 3: Адаптивность — Claude — Проверьте мобильную версию и попросите переместить текст под изображение, если он перекрывает объекты.
Промпт для параллакса:
The parallax currently doesn't work. Make the 'front.png' image move at a different speed than the background when I scroll to create a 3D effect. Also, for the headline, use the 'Anton' font from Google Fonts. On mobile, move the content below the headline instead of the bottom of the hero section.Результат: Готовый анимированный сайт с 3D-эффектом, адаптированный под мобильные устройства.
3D-параллакс сайты на Claude Opus 5: ответы на частые вопросы
В: Какую модель Claude лучше использовать для этого метода? О: Автор настоятельно рекомендует Opus 5, так как она лучше справляется с пространственным пониманием слоев и сложными CSS-анимациями.
В: Обязательно ли использовать Hicksfield? О: Нет, автор упоминает, что не аффилирован с инструментом. Вы можете использовать Midjourney для генерации и Photoshop или бесплатные AI-сервисы для удаления фона.
В: Как добиться того, чтобы текст был "за" домами, но "перед" небом? О: Это решается через z-index в CSS. Текст должен иметь z-index выше, чем у фонового изображения (back.jpg), но ниже, чем у переднего плана с прозрачностью (front.png).
В: Где взять шрифтовые пары, как в видео? О: Автор использует свой ресурс motionsize.ai, но вы можете взять любые пары из Google Fonts, просто назвав их Claude.
В: Что делать, если параллакс дергается или не работает? О: Сделайте скриншот текущего результата, загрузите его в Claude и опишите проблему словами: "Изображение переднего плана должно двигаться медленнее/быстрее относительно фона".
3D-параллакс сайты на Claude Opus 5: инструменты и ссылки из видео
- MotionSize.ai — Ресурс автора с промптами и шрифтовыми парами —
https://motionsize.ai - Hicksfield — AI-инструмент для генерации и редактирования изображений —
упомянут в видео - Figma — Инструмент для дизайна и удаления фона —
https://www.figma.com - Claude — AI-ассистент для написания кода —
https://claude.ai - Google Fonts (Anton) — Шрифт, использованный для заголовка —
https://fonts.google.com/specimen/Anton
Конспект создан на основе видео «How to Create 3D Animated Websites with AI (Claude Opus 5)» канала Motion Size. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/kf3OpxxmC9E
