ПРАКТИЧЕСКИЙ ГАЙД
Как создать анимированный AI-сайт с GPT Astra
Визуальная история продукта, scroll-scrub анимация, генерация ассетов через Higgsfield и отдельная мобильная версия.
От идеи и промпта - до сайта, который рассказывает историю продукта во время прокрутки.
САЙТ БОЛЬШЕ НЕ ОБЯЗАН БЫТЬ ПРОСТО НАБОРОМ БЛОКОВ
Последние несколько дней я собирал и дорабатывал промпт, который позволяет GPT Astra создавать сайты не как обычные лендинги, а как визуальные истории продукта. Идея простая: человек не просто листает страницу и читает характеристики. Он проходит через маленький сюжет, а продукт меняется прямо во время прокрутки.
На десктопе такая история может быть широкой, кинематографичной и очень детальной. На телефоне тот же смысл сохраняется, но композиция, крупность объектов, кнопки и движение должны быть перестроены под вертикальный экран. Это не механическое уменьшение desktop-версии, а отдельная мобильная адаптация сайта.
Что такое visual story: три простых примера
Перед тем как строить сайт, полезно определить не дизайн, не шрифт и даже не цвет кнопок, а саму визуальную историю продукта. Это последовательность кадров или состояний, которая ведёт человека от первого впечатления к финальному желаемому состоянию.
Смузи
На первом экране ягоды падают сверху: клубника, малина, черника. По мере прокрутки они смешиваются и превращаются в свежий напиток. На десктопе движение широкое и воздушное, а на мобильном - более вертикальное, но история остаётся той же.
Люксовые часы
Часы разбираются на отдельные компоненты: стекло, безель, циферблат, стрелки, механизм, корпус. Камера подходит очень близко, а затем отъезжает - и собранные часы уже находятся на руке. Такая история одновременно показывает инженерную сложность и финальное ощущение владения продуктом.
Пицца
Тесто взлетает в воздух, затем появляются соус и ингредиенты, пицца отправляется в печь и в финале опускается в коробку. Посетитель пришёл за пиццей и в конце визуально получает её готовой к тому, чтобы забрать домой.
Прежде чем просить ИИ сделать красивый сайт, ответьте на вопрос: какой финальный кадр должен захотеть увидеть покупатель?
Шесть этапов создания сайта с GPT Astra
- Подготовить инструменты. Рабочая среда, проект, модель, промпты и генераторы ассетов.
- Понять бренд. Определить продукт, характер, аудиторию, визуальный язык, цвета и референсы.
- Придумать visual story. Сформулировать последовательность действий, трансформаций и финальный кадр.
- Построить полный сайт. Astra связывает структуру, визуалы, контент и интерактив.
- Доработать дизайн и текст. Исправить движение, композицию, товары, копирайтинг и детали.
- Сделать отдельную мобильную адаптацию. Проверить вертикальную композицию, меню, размер кнопок и при необходимости сгенерировать отдельный mobile-клип.
Какие инструменты нужны: Codex, Higgsfield и Seedance 2.5
В моём процессе я работаю в десктопном приложении ChatGPT, в режиме Codex, внутри пустой папки проекта. Для генерации сайта использую GPT Astra. Сначала я работал на более высоком уровне рассуждения, но после нескольких итераций промпт стал достаточно точным, и для многих задач уже можно получать хороший результат на более лёгком режиме.
Вторая часть системы - два подготовленных промпта из GitHub. Первый отвечает за основную работу: помогает понять бренд, собрать референсы, сформировать visual story, создать необходимые ассеты и построить сайт. Второй запускается позже и отвечает за mobile refinement - адаптацию готовой desktop-версии под маленький экран.
Для самой визуальной истории я подключаю Higgsfield. Статическое изображение становится стартовым кадром, а затем используется для генерации видео в Seedance 2.5. Полученный клип нужен не как отдельный ролик, а как техническая основа scroll-scrub эффекта.
Первый промпт работает почти как автономный skill
Первый промпт получился довольно длинным, потому что он заставляет модель пройти через весь цикл самостоятельно. При желании его можно сокращать и оптимизировать, но в начале важнее добиться стабильного результата, чем экономить каждый токен.
Astra узнаёт, что за бизнес или бренд мы строим, просит логотип и адрес сайта, уточняет визуальные предпочтения, формы, цвета и референсы. Можно дать ссылки на конкурентов или изображения сайтов, которые нравятся. После этого модель отдельно прорабатывает визуальную историю, создаёт ассеты через подключённый генератор и собирает сайт.
Тест с нуля: outdoor-бренд и водонепроницаемая куртка
Для теста я попросил Astra построить сайт вымышленного бренда одежды для активного отдыха. У меня не было ни названия, ни логотипа, ни готового каталога. Я дал только продукт и сценарий.
В начале мы видим одну водонепроницаемую куртку. Камера приближается сначала к молнии и швам, потом к ткани и отдельным волокнам. На поверхности появляются капли дождя. Мы подходим настолько близко, что изображение почти теряет фокус. Затем камера начинает отъезжать, и выясняется, что куртка уже надета на туриста, который стоит высоко в горах.
Astra придумала бренд Veyra и разложила сцену на последовательность кадров: ярко-оранжевая куртка на фоне тёмного тумана, движение к молнии, швам и плотному плетению ткани, дождь, крупная капля, расфокус и обратный выход к человеку на вершине.
Как превратить продукт в scroll-scrub анимацию
Astra создаёт первый ключевой кадр через генератор изображений. Можно использовать более качественную модель вроде GPT Image или выбрать более дешёвый вариант, если его качества достаточно для конкретной сцены.
Затем Higgsfield использует этот кадр как старт для генерации движения в Seedance 2.5. На выходе получается клип: куртка, приближение к молнии, ткань, капли, макро, расфокус и финальный выход к туристу.
Пользователь не обязательно смотрит этот клип как обычное видео. Сайт разбивает движение на кадры и связывает их с прокруткой. Когда человек скроллит вниз, последовательность идёт вперёд; если возвращается вверх - история движется назад.
Как доработать AI-сайт после первой генерации
Первая версия уже работала: можно было скроллить, приближаться к ткани, проходить через каплю и в конце видеть человека в горах. Но движение казалось слишком мягким и статичным. Поэтому я дал модели более точную режиссуру.
Я попросил, чтобы при приближении куртка немного двигалась и расстёгивалась, камера работала активнее, а ткань в extreme close-up выглядела как толстые переплетённые нити. В финале турист должен был сделать несколько последних шагов, остановиться и только после этого посмотреть на пейзаж.
Одна из промежуточных генераций оставалась слишком похожей на исходную. Astra определила проблему: референс предыдущего движения слишком сильно удерживал старую композицию. Следующая корректировка была сделана точечно, без опоры на прежний клип как на motion reference.
Быстрее получить первую рабочую версию и дать конкретную режиссёрскую правку: что должно двигаться, куда идёт камера и какой кадр станет эмоциональной точкой.
Как добавить каталог товаров и реальные изображения
Даже очень красивая анимация не заменяет полноценный сайт. После того как главный визуальный эффект начал работать, я занялся остальными секциями: товарами, карточками, фильтрами, дополнительными hero-блоками и более законченной структурой магазина.
Для вдохновения я использовал несколько outdoor-сайтов и референсов с Pinterest. Я не просил Astra копировать один дизайн, а дал несколько разных примеров и попросил собрать из них собственный визуальный язык.
В каталог добавил туристические ботинки, weatherproof-брюки, кепку и футболку. Astra сгенерировала согласованные по стилю изображения и встроила их в магазин. Если уже есть настоящие фотографии товара, даже неидеальные, их можно использовать как референсы и поправить свет, композицию, фон или общую стилистику.
Как адаптировать AI-сайт под мобильные устройства
Когда desktop-версия меня устроила, я открыл эмуляцию iPhone. Сразу появились типичные проблемы: отсутствовало нормальное мобильное меню, часть элементов выглядела слишком мелко, кнопки были недостаточно крупными, а горизонтальная композиция не всегда правильно переводилась в вертикальную.
Для этого нужен отдельный mobile refinement skill. Он не просто уменьшает сайт, а анализирует, что нужно изменить под телефон. В моём случае была создана отдельная вертикальная версия клипа. Сюжет сохранился, но кадрирование и некоторые движения стали другими.
Desktop и mobile не обязаны быть покадрово идентичными. Важно сохранить бренд, логику истории, цветовые акценты и финальный смысл. Мобильная версия может быть самостоятельной режиссёрской интерпретацией.
Практический чек-лист создания анимированного сайта с ИИ
- Определить финальный кадр и желаемое чувство покупателя.
- Разложить путь на 5-10 визуальных состояний.
- Сначала собрать desktop hero и проверить саму идею.
- Сгенерировать стартовые изображения и связное движение.
- Связать движение со скроллом, а не оставлять обычный автоплей.
- После hero достроить товары, карточки, фильтры, текст и CTA.
- Отдельно проверить mobile: меню, кнопки, фокусный объект и движение.
- Итерировать конкретно: задавать движение, направление камеры и крупность деталей.
Что в итоге получилось
В результате я получил полноценный анимированный AI-сайт с двумя версиями: desktop и mobile. Основой стал не набор эффектов, а visual story продукта. Куртка сначала существует как отдельный предмет, затем сайт погружает пользователя внутрь её материалов, показывает влагозащиту и ткань, а в финале возвращает продукт в реальный контекст - на человека, который уже стоит в горах.
Именно так я сейчас думаю о современных продуктовых сайтах: не как о страницах, которые нужно украсить анимацией, а как о сценарии взаимодействия. Если человек скроллит, каждое движение должно приближать его к смыслу продукта.
Главный ответ на вопрос, как создать сайт с помощью ИИ: сначала придумать историю, затем дать модели собрать визуалы и структуру, после чего самому выступить режиссёром - смотреть, что работает, и точечно усиливать движение, дизайн, текст и мобильный опыт.