Vibecode — веб-сайт в стиле Apple с использованием ИИ и бесплатных инструментов Google AI (Whisk ...

Я создал тёмную, в стиле Apple, целевую страницу для умного кольца — с плавной анимацией, кинематографическим зацикленным роликом, реальным бэкэндом для списка ожидания и активной ссылкой Firebase.

📌 Полное описание задания находится в закреплённом комментарии (закреплённый документ).

И вы можете скопировать точные задания и рабочий процесс и создать свою собственную версию уже сегодня.

Временные метки:

00:00 Что мы создаём (веб-сайт Smart Ring в стиле Apple)
00:26 Полный обзор рабочего процесса ИИ
00:42 Шаг 1: Копирайтинг в стиле Apple с помощью Gemini
01:18 Шаг 2: Создание единообразных визуальных материалов о продукте
02:45 Шаг 3: Анимация изображений продукта с помощью Google Flow
03:51 Шаг 4: Оптимизация ресурсов (WebP)
04:33 Шаг 5: Настройка Supabase (хранилище + список ожидания)
05:51 Шаг 6: Создание веб-сайта с помощью Firebase Studio
07:21 Шаг 7: Финальный предварительный просмотр и публикация

В этом руководстве мы создадим AURA RING (вымышленный демонстрационный продукт), используя именно этот конвейер:

Gemini → Whisk → Flow → Ezgif → Supabase → Firebase Studio Whisk — это инструмент Google Labs, позволяющий использовать изображения в качестве подсказок, а Flow — это инструмент Google для создания кинематографических клипов с использованием искусственного интеллекта.

Что вы узнаете (шаг за шагом):

Написание лаконичного текста в стиле Apple с помощью Gemini (темный, премиальный тон)

Создание единообразных визуальных элементов продукта с помощью Google Whisk (тема + сцена + стиль)

Превращение статичного изображения в зацикленное кинематографическое видео-заставку с помощью Google Flow

Конвертация и оптимизация ресурсов (WebP/MP4) для быстрой загрузки

Использование Supabase Storage для размещения ресурсов и создания таблицы списка ожидания

(Общедоступные хранилища означают, что любой, у кого есть URL-адрес, может получить доступ к файлу, поэтому используйте их с осторожностью.)

Создание премиального темного интерфейса в стиле Apple в Firebase Studio

Подсказки + ресурсы
✅ Все подсказки находятся в закрепленном комментарии (скопируйте/вставьте, по порядку).

✅ Используйте одну и ту же систему для любого продукта: умного кольца, наушников, парфюма, камеры, SaaS — чего угодно.

Используемый набор инструментов:
Google Gemini (текст + начальные изображения)

Google Labs Whisk (генерация визуальных наборов)

Google Labs Flow (кинематографическое зацикленное видео)

Ezgif (конвертация/оптимизация)

Supabase (хранилище + база данных списков ожидания)

Firebase Studio + Firebase Hosting (развертывание)

Если вы создадите такой сайт,
опубликуйте результат и отметьте меня — я хочу отреагировать на лучшие страницы в «стиле Apple».

#VibeCoding #GoogleGemini #GoogleLabs #Firebase #Supabase #WebDesign #LandingPage

*Отказ от ответственности*
Это видео предназначено только для образовательных и развлекательных целей. Результаты могут отличаться, и ничто здесь не гарантирует просмотры, доход, клиентов или «миллионно-долларовые» результаты.
Не является финансовой, юридической или деловой консультацией.

«AURA RING» — это вымышленный демонстрационный продукт, предназначенный для обучающих целей. Я не связан с Apple, Google, Supabase или Firebase.
Все товарные знаки, названия продуктов и логотипы принадлежат их соответствующим владельцам; «стиль Apple» относится только к эстетике дизайна (не копируйте брендинг/логотипы Apple).
Инструменты ИИ являются экспериментальными, и их доступность/функции могут меняться в зависимости от региона или учетной записи.
Если вы собираете электронные адреса с помощью Supabase/Firebase, вы несете ответственность за соблюдение конфиденциальности (согласие, хранение и безопасность). Общедоступные хранилища делают файлы доступными для любого, у кого есть ссылка — не загружайте конфиденциальные данные.