00:00:00учитывая, насколько мощным стал генеративный ИИ.
00:00:02Постоянно появляются новые инструменты,
00:00:04и среди всех Google действительно вышел на новый уровень с момента выхода Gemini 3.
00:00:07Из-за этого вы,
00:00:08вероятно,
00:00:09видели людей в X,
00:00:09которые с одной попытки создают эти потрясающие лендинги и говорят,
00:00:12что модель меняет правила игры.
00:00:14Но они лгут.
00:00:15Правда в том,
00:00:15что им нужно использовать несколько инструментов для создания этих сайтов.
00:00:18И Google сходит с ума со своими экспериментальными инструментами,
00:00:21работающими на Gemini 3 и Nano Banana.
00:00:23Но Google не предлагает способа использовать их все вместе.
00:00:26Поэтому вам понадобится полноценный рабочий процесс,
00:00:28объединяющий все эти инструменты.
00:00:29Нам есть о чём поговорить сегодня,
00:00:31так как я не ожидал,
00:00:32что они будут так хорошо работать вместе.
00:00:34Анимации,
00:00:34которые вы видите на этих сайтах,
00:00:35— это просто последовательность кадров.
00:00:37Но если вы используете ИИ-инструменты для генерации этих кадров,
00:00:39вы не получите согласованных результатов.
00:00:41Google решает эту проблему,
00:00:42выпустив экспериментальный инструмент под названием WISC,
00:00:44специально предназначенный для создания ресурсов.
00:00:47Он работает на Nano Banana для генерации изображений.
00:00:49Я часто использую WISC для создания последовательностей изображений для главных секций.
00:00:53Я составляю запросы простыми словами,
00:00:55пошагово обновляю детали для каждой последовательности,
00:00:58а затем использую полученные изображения в главных секциях.
00:01:01Используя весь этот процесс,
00:01:02я создал этот лендинг и смог реализовать этот классный анимированный эффект с камерой.
00:01:07Для начала мы сгенерируем только первый и последний кадры последовательности,
00:01:10а затем создадим анимацию,
00:01:11используя эти два ключевых кадра для главной секции.
00:01:14Но если вы просто начнёте делать запросы без какой-либо структуры,
00:01:17то нужные вам ключевые кадры не будут иметь одинаковой структурной непрерывности.
00:01:20Для этого нужно чётко определить объект,
00:01:22визуальный замысел и уровень детализации,
00:01:24который вы хотите видеть на изображении.
00:01:26WISC использует структуру «объект,
00:01:28сцена и стиль» для управления генерацией изображений,
00:01:30позволяя объединить их в единое новое изображение.
00:01:33Вот почему я указал все детали о том,
00:01:35какую камеру я хочу,
00:01:36как должны выглядеть отражения на объективе,
00:01:39разрешение и глубину изображения,
00:01:41и он создал визуал точно по описанию в запросе.
00:01:44Сгенерированное изображение не всегда будет соответствовать вашим ожиданиям.
00:01:47В таком случае вам просто нужно упомянуть изменение простыми словами,
00:01:51и он внесёт изменения в новый визуал.
00:01:53Что мне больше всего нравится в WISC,
00:01:54так это то,
00:01:55что вам не нужно писать длинные,
00:01:56подробные запросы,
00:01:56чтобы получить отличные результаты.
00:01:58Это потому,
00:01:58что он использует Gemini 3 в качестве промежуточного слоя,
00:02:01который пишет подробный запрос поверх ваших простых слов,
00:02:03что приводит к качественным визуалам.
00:02:05Теперь возникает вопрос, почему я выбрал WISC.
00:02:08Хотя Nano Banana требует развёрнутых текстовых запросов,
00:02:10а Google Mix Board предназначен для мудбордов,
00:02:12ни один из них не оптимизирован для быстрого контролируемого ремикширования изображений.
00:02:16Ключевая сила WISC заключается в объединении референсных изображений,
00:02:19что позволяет генерировать изображения с лучшим контролем.
00:02:21Получив первый кадр,
00:02:22я хотел,
00:02:23чтобы последний кадр был боковым ракурсом камеры с разобранным объективом,
00:02:27чтобы показать компоненты.
00:02:28Поэтому я запросил создание технического разреза,
00:02:30указав,
00:02:31как он должен расположить внутренние линзы слоями и как должен выглядеть фон.
00:02:35С первой попытки не получилось.
00:02:37Он разобрал и внутренние схемы тоже,
00:02:38что я не хотел показывать.
00:02:40Как я уже говорил,
00:02:40вы просто упоминаете изменение,
00:02:42которое нужно внести.
00:02:42Поэтому я указал показывать только слои линз,
00:02:45после чего он успешно сгенерировал изображение без отображения внутренних схем.
00:02:49Кроме того,
00:02:50WISC также поддерживает анимацию с использованием модели VIO.
00:02:53Но анимации WISC фокусируются на анимировании одного изображения,
00:02:55а не на возможности соединения нескольких ключевых кадров вместе.
00:02:58Вот почему я использовал другой инструмент под названием Google Flow.
00:03:01Flow использует Gemini для планирования истории,
00:03:03модели изображений Google для создания стабильных персонажей и VIO для создания видеоконтента.
00:03:07Я уже создал начальный и конечный кадры для анимации камеры,
00:03:10и теперь хотел создать переход между ними.
00:03:13Поэтому я использовал опцию «кадр в видео» и предоставил свои кадры.
00:03:16Чтобы обеспечить плавный переход,
00:03:18необходимо указать в промпте,
00:03:19как начальный кадр переходит в конечный,
00:03:21поскольку это даёт модели логический путь.
00:03:24Ваш промпт должен включать описание того,
00:03:25как должна протекать анимация,
00:03:27как начальный кадр должен переходить в конечный,
00:03:29а также стиль анимации — эти детали гарантируют,
00:03:31что движение будет целенаправленным.
00:03:33Иногда эти модели допускают ошибки при выполнении сложных задач,
00:03:36поэтому с первого раза анимация у меня не получилась.
00:03:38Сгенерированное видео полностью неправильно передало и направление вращения,
00:03:42и конечный кадр,
00:03:42из-за чего переход получился неудачным.
00:03:44Решением стало простое переформулирование промпта с внесением необходимых изменений для корректной анимации — например,
00:03:50я указал изменить направление вращения камеры для более плавного перехода,
00:03:53после чего модель создала нужную мне версию,
00:03:56которую я скачал для использования в проекте.
00:03:58Генерация видео недоступна в бесплатном тарифе без ограничений,
00:04:01поскольку модели для создания видео требуют больших затрат.
00:04:04Предоставляется только 180 ежемесячных кредитов в зависимости от региона.
00:04:08Поскольку каждая генерация видео с помощью VIO 3.1 использует 20 кредитов,
00:04:12вы получаете до 9 видео в месяц.
00:04:14Видео,
00:04:14сгенерированные Flow,
00:04:15имеют формат MP4 и не могут напрямую использоваться в секциях Hero,
00:04:19поскольку их сложнее привязывать к анимациям прокрутки — по этой причине я конвертировал их в WebP с помощью бесплатного онлайн-конвертера.
00:04:26Я загрузил MP4-видео,
00:04:27установил параметры конвертации для получения анимированного WebP наилучшего качества,
00:04:31и файл был преобразован в формат WebP,
00:04:33который я скачал для использования в проекте.
00:04:35Выбор WebP важен,
00:04:36потому что с ним проще привязывать взаимодействия при прокрутке: в вебе этот формат обрабатывается как изображение,
00:04:42не требующее обёртки медиаплеера,
00:04:44как другие форматы.
00:04:45Эти файлы более компактны и обеспечивают лучшую производительность,
00:04:48что делает их идеальными для короткого анимированного контента..
00:04:52Я добавил конвертированный WebP-файл в публичную директорию моего только что инициализированного проекта Next.js,
00:04:57потому что именно там хранятся все ресурсы проекта.
00:05:00Когда анимация была готова,
00:05:01я захотел добавить её в секцию Hero на моей лендинговой странице.
00:05:05Обычно я пишу промпты для Claude в формате XML,
00:05:07потому что их модели оптимизированы для понимания XML,
00:05:10что позволяет им надёжнее разбирать структурированные инструкции и анализировать каждую секцию независимо.
00:05:15Промпт,
00:05:16который я дал Claude для добавления анимации,
00:05:18включал контекст того,
00:05:19что я хочу создать,
00:05:20где находятся ресурсы для анимации,
00:05:22как должна работать анимация прокрутки,
00:05:24и нашу цель в теге context.
00:05:25Я включил все требования в теги requirements,
00:05:27описал,
00:05:28как должна вести себя анимация,
00:05:30в тегах animation behavior и указал детали реализации,
00:05:32ограничения и требуемый результат непосредственно в промпте в соответствующих тегах.
00:05:37Когда я дал Claude этот промпт,
00:05:38он автоматически реализовал анимацию именно так,
00:05:41как я хотел.
00:05:41Хотя наша секция Hero выглядела хорошо,
00:05:43остальные компоненты выглядели как обычные типовые сайты,
00:05:46которые склонен генерировать ИИ.
00:05:48Это произошло потому,
00:05:49что мы ожидали высококачественных результатов от ванильного CSS вместо того,
00:05:53чтобы полагаться на существующие красивые библиотеки компонентов..
00:05:57Существует множество UI-библиотек,
00:05:59каждая со своим особым стилем и дизайнерскими темами,
00:06:02но вам нужно выбрать библиотеку,
00:06:03которая лучше всего подходит к стилю вашего проекта.
00:06:06Для моей лендинговой страницы камеры я стремился к UI в стиле Apple,
00:06:10и ближайшая к этой идее библиотека — Hero UI.
00:06:12Она построена поверх Tailwind CSS и использует Framer Motion для оживления компонентов по всему сайту..
00:06:17Библиотека поддерживает большинство популярных фреймворков,
00:06:20таких как Next.js,
00:06:21Vite и Laravel.
00:06:22Поэтому использовать её с моей существующей настройкой Next.js было легко.
00:06:25Существует два способа установки.
00:06:27Либо вы устанавливаете её для всего проекта со всеми доступными компонентами через команду install,
00:06:32либо устанавливаете отдельные компоненты по мере необходимости,
00:06:35что я и сделал с помощью Claude.
00:06:36Я попросил Claude заменить существующие компоненты на компоненты Hero UI,
00:06:40и сайт значительно улучшился,
00:06:41приобретя гораздо более профессиональный вид.
00:06:43Пользователи решают,
00:06:44оставаться ли на целевой странице,
00:06:46в течение нескольких секунд,
00:06:47оценивая,
00:06:48насколько привлекателен интерфейс.
00:06:49Анимация помогает направить внимание посетителя на функции,
00:06:52которые мы хотим им показать,
00:06:54обеспечивая более высокую вовлечённость пользователей.
00:06:56Реализация анимации с нуля на чистом JavaScript может быть сложной задачей,
00:07:00поэтому я полагаюсь на существующие библиотеки,
00:07:02чтобы упростить процесс.
00:07:03Для этого проекта я использовал Motion.dev — бесплатную библиотеку с открытым исходным кодом,
00:07:08которая предлагает широкий спектр готовых к использованию анимаций.
00:07:11Обычно анимация требует ручной синхронизации обновлений DOM с тайминговыми параметрами анимации.
00:07:16Однако Motion.dev абстрагирует эту логику,
00:07:18обрабатывая обновления DOM внутренне.
00:07:19Она автоматически обновляет компоненты по мере прокрутки пользователем страницы,
00:07:23поэтому анимация воспроизводится плавно без необходимости вручную отслеживать позицию прокрутки.
00:07:28Эта библиотека использует компоненты motion вместо стандартных.
00:07:31У этих компонентов начальное и конечное состояния определены в props,
00:07:34а библиотека автоматически обрабатывает логику переходов между ними.
00:07:38Для нашей целевой страницы я попросил Claude реализовать параллакс и анимацию прокрутки с помощью этой библиотеки.
00:07:43В результате пользовательский опыт улучшился за счёт направления внимания на ключевые разделы страницы.
00:07:48Описывать,
00:07:49как должны выглядеть разделы страницы,
00:07:50— утомительный процесс.
00:07:51Лучше черпать вдохновение из существующих галерей,
00:07:54где люди публикуют свои работы.
00:07:55Я использовал 21st.dev — платформу,
00:07:57которая предлагает вдохновение для различных UI-компонентов,
00:08:00созданных многими дизайнерами.
00:08:01Компоненты построены на основе популярных UI-библиотек,
00:08:04таких как Aceternity UI,
00:08:05Prism UI,
00:08:06Coconut UI,
00:08:06Magic UI и многих других.
00:08:07Пока я искал идеи,
00:08:08я наткнулся на этот раздел призыва к действию,
00:08:10который отлично смотрелся бы на моей целевой странице.
00:08:13Больше всего мне нравится в 21st.dev то,
00:08:15что для любого компонента,
00:08:16который я хочу использовать,
00:08:18я могу просто скопировать промпт,
00:08:19специально адаптированный для AI-агентов кодирования.
00:08:22Мне не нужно самому направлять Claude.
00:08:24Промпт имеет подробную структуру,
00:08:25включая требования к проекту,
00:08:27такие как поддержка ShadCN и TypeScript.
00:08:28Он предоставляет код с инструкциями для агента кодирования,
00:08:31чтобы вставить его напрямую в директорию компонентов.
00:08:34Он включает весь необходимый код зависимостей и пути,
00:08:36куда его следует добавить,
00:08:38а также перечисляет необходимые NPM-пакеты для установки.
00:08:40Он также включает руководство по внедрению для вашего AI-агента,
00:08:44детализирующее все шаги,
00:08:45необходимые для интеграции компонента непосредственно в ваше приложение,
00:08:48и то,
00:08:49как агент должен адаптировать его к специфическим потребностям проекта.
00:08:52Я дал этот промпт Claude,
00:08:53и он интегрировал точно такой же раздел призыва к действию,
00:08:56для которого я скопировал промпт.
00:08:58Он также добавил анимацию из библиотеки motion,
00:09:00которую мы установили,
00:09:01хотя я явно нигде не упоминал о добавлении анимации.
00:09:04Я также взял футер с 21st.dev,
00:09:05хотя демонстрационный футер включал иконки для GitHub и Twitter..
00:09:11Когда я дал Claude скопированный промпт,
00:09:13он исключил иконку GitHub,
00:09:14поскольку она не была связана с нашим проектом.
00:09:16Он настроил футер так,
00:09:17чтобы включить только иконки,
00:09:19относящиеся к сайту продукции камер,
00:09:20создав футер,
00:09:21который идеально подходил для нашей целевой страницы.
00:09:23На этом мы подходим к концу этого видео..
00:09:25Если вы хотите поддержать канал и помочь нам продолжать создавать подобные видео,
00:09:29вы можете сделать это,
00:09:30используя кнопку «Супер спасибо» ниже.
00:09:32Как всегда,
00:09:32спасибо за просмотр,
00:09:33и увидимся в следующем выпуске..