Экстракт Знаний

Вайбкодим СУПЕР Сайт Для Твоего Бизнеса За Минуты с Gemini

22:53

Вайбкодим СУПЕР Сайт Для Твоего Бизнеса За Минуты с Gemini

ИИшенка | AI Automation 21.12.2025 40 572 просмотров 1 452 лайков обн. 18.02.2026

Смотреть на YouTube

Поделиться Telegram VK Бот

Транскрипт Скачать .md

Анализ с AI

Описание видео

🚀 Вступить в Pro-сообщество тут (там есть этот готовый сайт, доступный для скачивания и загрузки на свой сервер): https://t.me/iishenka_pro_bot Узнать больше про сообщество: https://iishenka.pro/group И про N8N Мастер-Класс: https://iishenka.pro/n8n-masterclass ⭐️ Бесплатные материалы из этого видео тут: https://t.me/+W1SnvvkcV6A3NWMy В этом видео я расскажу, как вайбкодить Мега-Сайты с анимацией (Vibe Coding) за несколько простых шагов. Что особенного в этом видео? Мы не только изучим, как работают сервисы от Google — Antigravity, но и научимся внедрять результаты их работы в свои минималистичные лендинг-страницы. 🔥 Независимо от того, работаете ли вы с AI-агентами или только начинаете осваивать автоматизации в n8n, этот урок поможет вам овладеть процессом настройки ИИ для любых задач. ⏱ Таймкоды 00:00 – Вступление и разбор минималистичного дизайна сайта 00:39 – Почему сайт сделан на чистом HTML, CSS и JavaScript 01:00 – Создание сайта с помощью одной нейронки Google Gemini 01:26 – Выбор единственного инструмента: Google Antigravity 02:07 – Подход к созданию «нестыдных» сайтов с нейросетями 02:43 – Поиск дизайн-референсов и старт с одной hero-секции 02:57 – Использование сайта Superhero для выбора hero-секции 03:32 – Адаптация референса под идею фермерского магазина 04:16 – Старт работы в Antigravity и создание проекта с нуля 04:37 – Workflow и промты для генерации первой секции 05:38 – Генерация hero-секции по картинке-референсу 06:36 – Анализ результата: шрифты, иконки, структура 08:11 – Структурирование сайта: header, main, footer 09:45 – Итеративный дизайн через правки и диалог с нейронкой 10:09 – Генерация русских текстов под тематику магазина 11:23 – Разбор типографики, расстояний и иконок 12:41 – Добавление секции преимуществ по дизайн-референсу 12:57 – Bent Grids и подход Apple к секционному дизайну 14:19 – Анимации карточек и ощущение «живого» сайта 15:30 – Почему важно начинать с hero-секции 16:09 – Добавление секции экосистемы компании 16:16 – Использование Mobbin для поиска новых секций 17:57 – Добавление pricing-секции и футера 18:51 – Генерация логотипа и финальная сборка сайта 19:01 – Замена изображения на видео-анимацию 19:16 – Создание видео в Google Flow 20:42 – Оптимизация веса видео для сайта 21:08 – Адаптация сайта под мобильные устройства 22:05 – Финальный результат и готовность к публикации 22:33 – Где взять исходники и завершение видео 💡 Не забудьте поставить лайк и подписаться, чтобы не пропустить новые уроки по n8n и AI-агентам. Давайте сделаем AI-автоматизации простыми! 🙌 Я — Илья Бовкунов, основатель и СЕО Sendforsign — это компания, занимающаяся AI-автоматизацией договоров и документооборота. В прошлом был Директором по продукту и продуктовому дизайну в международных AI-стартапах. Позвать в подкаст или предложить другое сотрудничество aiiszdes@gmail.com Не забудьте поставить лайк, подписаться и нажать на колокольчик, чтобы не пропустить новые видео об AI-агентах и автоматизациях!

Оглавление (30 сегментов)

0:00 Вступление и разбор минималистичного дизайна сайта 73 сл.
0:39 Почему сайт сделан на чистом HTML, CSS и JavaScript 47 сл.
1:00 Создание сайта с помощью одной нейронки Google Gemini 62 сл.
1:26 Выбор единственного инструмента: Google Antigravity 113 сл.
2:07 Подход к созданию «нестыдных» сайтов с нейросетями 107 сл.
2:43 Поиск дизайн-референсов и старт с одной hero-секции 38 сл.
2:57 Использование сайта Superhero для выбора hero-секции 89 сл.
3:32 Адаптация референса под идею фермерского магазина 121 сл.
4:16 Старт работы в Antigravity и создание проекта с нуля 64 сл.
4:37 Workflow и промты для генерации первой секции 171 сл.
5:38 Генерация hero-секции по картинке-референсу 164 сл.
6:36 Анализ результата: шрифты, иконки, структура 235 сл.
8:11 Структурирование сайта: header, main, footer 262 сл.
9:45 Итеративный дизайн через правки и диалог с нейронкой 59 сл.
10:09 Генерация русских текстов под тематику магазина 191 сл.
11:23 Разбор типографики, расстояний и иконок 197 сл.
12:41 Добавление секции преимуществ по дизайн-референсу 41 сл.
12:57 Bent Grids и подход Apple к секционному дизайну 200 сл.
14:19 Анимации карточек и ощущение «живого» сайта 187 сл.
15:30 Почему важно начинать с hero-секции 109 сл.
16:09 Добавление секции экосистемы компании 16 сл.
16:16 Использование Mobbin для поиска новых секций 253 сл.
17:57 Добавление pricing-секции и футера 144 сл.
18:51 Генерация логотипа и финальная сборка сайта 35 сл.
19:01 Замена изображения на видео-анимацию 48 сл.
19:16 Создание видео в Google Flow 224 сл.
20:42 Оптимизация веса видео для сайта 60 сл.
21:08 Адаптация сайта под мобильные устройства 140 сл.
22:05 Финальный результат и готовность к публикации 75 сл.
22:33 Где взять исходники и завершение видео 51 сл.

Вступление и разбор минималистичного дизайна сайта

Друзья, всем привет. Ну что, посмотрим на это. классный, минималистичный, свежий дизайн сайта, с классной типографикой, с точными, правильными расстояниями, с анимацией, очень аккуратной, минималистичной, но которая поддерживает стиль этого сайта, с моушенами очень органичными, не кричащими, с иконками, которые явно не выдуманы искусным интеллектом, а которые добавлены из правильных репозиториев. типографика, которая имеет смысл, а не просто случайно подобрана, с очень аккуратными минималистичными тенями, закруглениями, ну и, в принципе, с ощущением не

Почему сайт сделан на чистом HTML, CSS и JavaScript

случайности от всего, что происходит здесь на сайте. Ну, ещё что немаловажно, данный сайт сделан только на HTML, CSS стилях и джаваскрипте. Никаких других фреймворков, только чистые технологии, которые наверняка большинство из вас знает. Ну и что самое классное, вся эта красота сделана с помощью одной нейронки

Создание сайта с помощью одной нейронки Google Gemini

Gemini от Гугла. И более того, я вам скажу, что и вы можете сделать себе такую же красоту, которая выглядит так, будто вы заплатили профессиональному дизайнеру для того, чтобы у вас появился свой сайт. Ну что, погнали делать себе такую же красоту. Тогда с вас лайк, подписка там внизу, комментарий и смотрим до самого конца. Это очень важно. Спасибо. Мы с вами

Выбор единственного инструмента: Google Antigravity

здесь, в принципе, много говорим про то, какими нейронками мы пользуемся, какими инструментами мы пользуемся. Здесь, в этом видео, мы будем пользоваться только лишь одним инструментом. Это Google антигравити. Поэтому сходите вот на этот сайт, поищите Google антигравити, скачайте в себе. Google, как мы видим, даёт бесплатный какой-то usage и даже говорит, что есть какой-то reasonable, ну, нормальный лимит на использование этой нейронки в неделю. И действительно, я вот пользуюсь какое-то время, и весь этот сайт я построил с помощью антигравити. И лимиты я пока никакие не пробил. Поэтому устанавливайте себе антигравити либо пользуйтесь любой другой средой разработки, которая вам нравятся, и погнали делать сайт. Мы, в принципе, с вами давно уже обсуждаем

Подход к созданию «нестыдных» сайтов с нейросетями

методы и способы, с помощью которых можно строить себе нормальные, нестыдные сайты. И в последнее время я много экспериментирую именно с Google Gmini Pro и нащупал путь, с помощью которого можно реально строить нормальные сайты, которые не выглядят так, как будто бы они построены нейронкой, а действительно крепко, не случайно. Ну вот, например, как выглядит этот сайт. И первое, с чего мы начинаем, когда мы работаем с этой нейронкой - это с некоторого референса, с одной секции, которую мы можем построить сначала и на основе которой мы будем развивать весь остальной дизайн на этой странице. И здесь мы подходим к базовому вопросу: а каким образом я буду

Поиск дизайн-референсов и старт с одной hero-секции

искать референс? Поэтому мы сейчас с вами посмотрим сразу несколько ресурсов, которые позволяют быстро найти вдохновение и найти ту самую целевую секцию, с помощью которой мы построим весь остальной свой сайт. Первый сайт называется Superhero. Этот сайт известен

Использование сайта Superhero для выбора hero-секции

тем, что он содержит как раз коллекцию крутых hero секций, на основе которых мы можем уже начать делать свой дизайн. Если мы посмотрим на него, то мы увидим огромное количество первых посадочных секций, не самих страниц, а секций, на которые попадают наши пользователи, когда приходят на наши веб-сайты. И мы можем найти уже некоторую первую секцию, которая, допустим, нам очень понравится, и мы захотим стартовать свой дизайн с этой секцией. Я сам большой поклонник минималистичного дизайна, аккуратного, с большими пространствами, с классными расстояниями. И вот я выбрал себе такую

Адаптация референса под идею фермерского магазина

секцию. Давайте её откроем. Она так выглядит. Здесь крутой помидор, и я вижу, что это секция какой-то дизайн-студии, но у меня-то уже в голове идея сделать сайт для магазина здорового питания или для фермерского магазина. И я вижу, что здесь есть прекрасное сочетание классной типографики, которую мы можем переиспользовать. По крайней мере, ссылку или референс, на который мы можем использовать. Классная hero иллюстрация, которая точно нам подойдёт. Мы не будем, естественно, её использовать как есть, но мы будем использовать её как ссылку или референс для нашей нейронки. Но ещё мне очень нравится здесь вот эти элементы по краям, классные расстояния. И вот эта аккуратная подпись тоже меня прямо не оставляет равнодушным. Ну прямо мне всё нравится. Давайте её прямо забирать и

Старт работы в Antigravity и создание проекта с нуля

идти в наш антигравити. Не пугайтесь, если вы никогда не пользовались средой разработки, то мы прямо будем идти по шагам. Тут ничего страшного нету. Сейчас наш статус кво. Мы открыли антигравити в какой-то вот пустой папке. Здесь вообще ничего нету. И мы будем прямо всё делать с нуля. Первое, с чего я начну, я добавлю здесь каталог, который называется точка agent. И внутри этого

Workflow и промты для генерации первой секции

каталога я ещё один добавлю, который называется workflows. Это, в принципе, стандартная штука для антигравити или любой другой среды разработки. Сюда мы можем поместить некоторые промты или, скажем так, workflow с командой, которые мы прямо потом сможем использовать из нашего чата. Это создано для того, чтобы мы потом не переписывали одни и те же промты много раз. Почему это важно, мы сейчас посмотрим. Я сюда закидываю два маркдауна. Вот я их назвал один старт и два strcture. Я их просто всегда использую для начала дизайна. И здесь описаны, ну, это вот лично мои наработки. Я описываю, каким образом мне нужно создать нашу первую страницу. Здесь довольно много текста, но я сразу указываю, что нам не нужно создавать сейчас страницу целиком. Нам нужно создать только секцию, используют только HTML, CSS и JavaScript. Никаких фреймворков, вообще ничего для того, чтобы самый обычный рядовой человек мог этого всё повторить. В принципе, вы можете под себя итеративно создать такую команду и пользоваться ей. Я же делаю сейчас делаю мегапростую штуку. Я вставляю картинку с помидорчиком

Генерация hero-секции по картинке-референсу

которую мы с вами уже обсуждали. Нажимаю слш. И вот у меня как раз мой выбор из команд. Да, антигравити, конечно, работает вообще так себе. Всегда соскакивает что-то. Ну, интерфейс интерфейсом. Главное, что нейронка нормально пашет. И нажимаем старт. То есть, по сути, сейчас антигравити получил такую команду: "У тебя есть картинка, и у тебя есть команда или у тебя есть инструкция не создавать как бы полностью сайт. Создай мне идеальную первую секцию, которая будет максимально похожа на эту картинку. Попробую скопировать фонты, то есть шрифты. Попробую сделать всё, что нам нужно, для того, чтобы мы максимально приблизились к этому результату. У нас будет много раз спрашивать, продолжить, не продолжить? Всегда нажимаем продолжить. Кстати, если что, ссылки на все ресурсы, которыми мы пользуемся, я кладу всегда в свою бесплатную Telegram-группу. Ссылка на неё в описании. Залетайте, прямо забирайте всё, что мы использовали. Все ресурсы, ссылки на них будут там. Так, ну что, он только что нам создал файл indкс HTML. Давайте на него посмотрим.

Анализ результата: шрифты, иконки, структура

Смотрите, выглядит прикольно. Он сюда сразу запихнул все стили, скрипты, которые нам нужно. Кстати, он использует иконки Iconify или фанты, которые я указал в своей инструкции номер один. Это как раз сделано для того, чтобы мы использовали всё open sourсное, чтобы наша нейронка могла это подтягивать, использовать сразу у нас в дизайне, а мы не импортировали ничего отдельно. Кажется, что нужно пойти и открыть индекс HTML. Так, ну вот наш индекс HTML. Ну, в принципе, нормально. Давайте посмотрим на картинку, с которой мы брали пример. Ну, смотрите, что мне нравится. Что я сразу вижу? Мне нравится его попытка понять, что это был за шрифт. То есть он, в принципе, угадал, что это шрифт с засечками, какие-то, скажем так, формы, отдалённо напоминающие оригинал. Мне нравится, что он понял, что здесь моноширинные фонты для вот сенary, для вторичных хедеров. Более того, неронка даже сгенерировала изображение по референсу, которую мы ей дали. Смотрите, мне очень нравится вот то, что я отметил сразу в оригинальном реферисном изображении вот эти, скажем так, элементы, которые разнесены влево-вправо. И наш любимый элемент, то есть рукописный шрифт. Давайте посмотрим. Да, он даже понял, что это шрифт. Он не попытался скопировать это как, а, картинку. В принципе, первый подход очень неплох. Ну, конечно же, нам нужно продолжать делать наш сайт, и как минимум он должен быть на русском языке, потому что это наши фермерские продукты. или магазин здорового питания. Возвращаемся в антигравити. Сейчас в

Структурирование сайта: header, main, footer

антигравити я просто нажимаю сш, и это вызывает мою структуру. Здесь мегапростая штука, но я заметил, что так работает круче. Я всегда прошу неронку, вот когда у нас есть первая секция, которая нам более-менее нравится, сразу обозначить, что у нас мегаструктурированный сайт. А сделай всё так, чтобы каждая секция была на своём месте. Не миксуй их в одно. И это должно привести к тому, что у нас всегда будет отдельно выделенный header, отдельная main секция, отдельный футер. И все остальные секции, которые мы будем добавлять, он будет добавлять внутри main. Но почему это имеет значение? Потому что после этой команды он сразу обозначит общую структуру, ширину главной секции, и это уже сразу сделает наш макет крепче. Это просто личная моя находка, как бы пользуйтесь ей тоже. Поэтому я нажимаю с2 структура и запускаю. Здесь пока от нас ничего не требуется. И это даже, в принципе, не приведёт к значимым изменениям в самом макете. У нас закончилась эта команда. И теперь, если посмотреть на HTML, то он прямо выглядит так, как мне нравится. Гиперструктурированно, да? У нас есть отдельная header секция, смотрите, есть отдельная теперь maain секция. И внутри уже есть hero секция, то есть наша секция с томатом и, а, главным посылом. И даже вот он сразу выделил футер. На будущее нам это явно пригодится. Дальше вон а пошли скрипты. Кстати, обратите внимание, он добавил скрипт, который добавляет текущие текущее время. И мне нравится, что тут тоже такой красивый монаширинный а шрифт. И, в принципе, выглядит прикольно. Класс. Лайк. Возвращаемся в наш антигравити. И вот с этого момента начинается то, что многие

Итеративный дизайн через правки и диалог с нейронкой

из вас так ненавидят и многие из вас так любят. Начинается тот самый-дизайн, потому что сама концепция заключается в том, что вы что-то спрашиваете у нейронки, она вам отвечает, делает какие-то изменения, вам что-то нравится, что-то не нравится, вы продолжаете, говоришь: "Измени здесь, измени там". То есть вот на таком простом, скажем так, настроении мы делаем дизайн. Поэтому я

Генерация русских текстов под тематику магазина

так и пишу: "Давай изменим тексты на этом сайте". Они должны быть про магазин здорового питания на русском языке. Сами тексты придумай соответствующие тематики. Больше ничего не меняй, только тексты. Грамматика сохранена, так сказать. Погнали смотреть, что из этого получится. Друзья, если вам нужен будет исходный код вот этот со всеми дополированными вещами прямо и с командами, которыми пользуемся, слово в слово, то обязательно забирайте его в прогруппе. Ссылка на неё тоже будет в описании. И вообще, если вы развиваетесь в ИИ, обязательно заскакивайте в нашу прогруппу. Так. И вот наш результат, друзья. У меня это заняло две а итерации. Обратите внимание, что, в принципе, он довольно круто нашёл посылы. Чистый вкус, живая еда, заменил, а, сами верхние тексты. То есть теперь это адрес, который явно соответствует по его а мне русскому языку. Логотип изменился, да, натура. Хорошо. Я его, а, со второго раза попросил не менять вот эти шрифты, потому что для этого шрифта нету кириллического начертания. И мне, в принципе, нравится, что здесь именно вот такой посыл. House can wait, хаос может подождать, то есть некоторый чил добавляет. Теперь здесь уже понедельник-воскресенье вместо Monday Friday. И смотрите, что мне

Разбор типографики, расстояний и иконок

нравится. Классные расстояния. То есть, в принципе, когда мы делаем минималистичный дизайн, всё очень сильно заточено на то, как мы пользуемся расстояниями между типографикой, между элементами. Мне очень нравится вот этот моноширинный шрифт. Хорошо здесь держится. И обратите внимание, даже иконка, вот он её забрал из нашей коллекции, потому что часто нейронки сами пытаются придумать иконки и, а, сделать их в СВГ. Да, часто это какая-то лажа. Здесь всё более-менее крепенько. Мне прямо вот очень нравится, как это всё получается сейчас. Прямо лайк. Единственное, что мы можем заметить, да, пока томат наш, он на белом фоне, хотя сам фон, да, у нашего сайта отличается, но это мы впоследствии можем поправить. Это, кажется, сейчас не сильно критично. Вот здесь вижу точечка, конечно, после хозяйства, да, точечку мы уберём, чтобы прямо было хорошо выровнено по правому краю. Мне, кстати, очень нравится, что вот эта надпись, она выровнена по правому краю. Это добавляет чуть-чуть такой, а, асимметрии, но которая классно смотрится на фоне всего другого такого асимметричного и классно играет вот с этим элементом, который слева от нашей картинки. Прямо хорошо, мне нравится. Топ. И дальше нам пора развивать свою идею. А я придумал, что дальше должна быть секция некоторой

Добавление секции преимуществ по дизайн-референсу

преимуществ нашего магазина. И я, в принципе, знаю, и уже у меня есть идея того, как секция должна выглядеть, вернее, какая у неё должна быть структура. Давайте для структуры посмотрим другие сайты, на которых есть референсы. Я вот очень люблю сайт

Bent Grids и подход Apple к секционному дизайну

который называется Bent Grids. Он собирает примеры как раз отдельных секций. Это секции, которые соответствуют, ну, скажем так, очень популярному вению в современном дизайне. Наверное, Apple - это те ребята, которые, а, дали старт этому вению. То есть мы можем увидеть, что в презентациях Apple, что они часто вот любят разделять все свои презентации на такие, а, сетки, которые не совпадают ячейками друг с другом, да? То есть это, в принципе, м подход, который они популизировали. И я думаю, что нам надо взять что-то из этого. Пускай это будет довольно какая-то простая структура. Ну вот, кстати, мы пролистали. Пускай будет какая-то простая, но такая прикольная структура. Мне главное, чтобы это были колоночки. классные карточки. И там хочу, чтобы были выделены какие-то преимущества нашего магазина. Я забираю эту картинку и пойду сейчас вставлять в свой антигравити. Так, я вставляю картинку и пишу: "Давай добавим новую секцию. Она про преимущество нашей компании. Структуру прошу тебя скопировать из картинки, которую я тебе дал. Задача- забрать структуру оттуда, подход к дизайну и анимации. Но при этом стиль переделать так. Напечатка. При этом стиль переделать так, чтобы он соответствовал текущему дизайну страницу. При этом сами тексты тоже должны соответствовать тематике магазина здорового питания. Запускаем нейронку.

Анимации карточек и ощущение «живого» сайта

Посмотрим, каков будет результат. Ну что, он говорит: "Я готов. Идём смотреть результат". Так, вот наш сайт. Листаем вниз и видим нашу новую секцию, наши преимущества. Почему выбирают Натура? Мы стремимся предоставить вам не просто продукты, а целый опыт здорового и осознанного питания. Кстати, нормальные нестыдные тексты, они не выглядят совсем уж ванильными. Нормально. С текстами всегда легче работать, но обратите внимание на саму секцию. У меня это заняло два промта. В первый раз он не сгенерировал нормальные анимации, просто были такие статичные карточки. Я потом допромтил его, чтобы он добавил анимации. И обратите внимание, как это теперь выглядит. Здесь очень прикольные анимации, которые не очевидны, но добавляют шарм завершённости. То есть смотрите, вот здесь прикольная анимация. То есть, в принципе, у не hero, не главных анимаций никогда нету задачи забирать на себя внимание, а есть задача добавлять плавность и настроение к вашему сайту для того, чтобы ваш пользователь чувствовал себя хорошо, нормально на этом сайте. Я чувствую, что здесь прямо сейчас хорошо это всё выглядит, здоровенько, особенно когда мы ещё herро анимацию подправим. Здесь будет вообще норм. И обратите внимание, что происходит. В чём была ключевая

Почему важно начинать с hero-секции

задача наша? Почему мы сначала сделали hero секцию, то есть главную секцию? И только после того, как мы сказали себе, что наша секция нас устраивает, мы начали делать вторую секцию. Ключ в том, что когда у нас есть первая секция, у нейронки есть, по сути, пример, на основе которого она генерит всё оставшееся. То есть она теперь не пытается выдумать заново и генерит всё оставшуеся на основе уже готового кода, на основе HTML и стилей, которые есть. И теперь мы видим, насколько это классно работает. То есть нейронка генерирует все последующие секции, основываясь на секции, которая у нас уже есть. Кайф. Мне хочется добавить ещё новой секции, которая будет

Добавление секции экосистемы компании

раскрывать экосистему нашего предприятия. Сейчас я вам покажу её. Теперь за остальными секциями я иду на

Использование Mobbin для поиска новых секций

другой сайт. Пускай это будет mobin. com. Опять же, это будет в бесплатной Telegram-группети ссылки, не переживайте. Но этот сайт уже приколен другим. Здесь есть огромное количество секций, которые, а, разбиты по категориям. Здесь придётся засайнапиться, но это бесплатно для того, чтобы посмотреть эти секции. Вы можете найти всякие прикольные секции, скриншотить их, давать ваши неронки и дальше уже говорить: "Мне вот эта секция нравится стилистически и по структуре. Добавь, например, секцию, которая раскрывает преимущество экосистемы нашей компании". Я так и делаю. Я сейчас уже не буду подробно останавливаться, потому что концепт, вы поняли. Ищем референсы, даём нейронки и описываем секцию, которая нам нужна. И сейчас промт будет вообще мегапростой. Вот я отдал картинку, там нормальная структура, которая мне понравилась. Я говорю: "Давай добавим новую секцию. Она про экосистему нашей компании". Опечатка: "Действуй по такому же принципу, как и раньше". То есть он должен забирать структуры, анимации, но адаптить под наши стили и контент добавлять на русском языке. Погнали. Давай посмотрим, что у нас получится. Ну что, наша секция готова. Давайте на неё перелистаем. Смотрите, прикольная анимация. Я именно вот этот вид анимации на скриншоте отдавал. И смотрите, как он распределил экологистика, локальные фермы, лаборатория, переработка. То есть он Ещё прикол в том, что я не особо сейчас морочился с текстами. То есть он сам и контент придумал. И опять же иконки. Он забрал эти иконки из нужного нам репозитория, сборника иконок и сделал вот такие прикольные анимации. Но вообще я хочу сказать, что эта секция выглядит очень крепко, классно, причём с первого

Добавление pricing-секции и футера

раза. Я предлагаю продолжить в том же духе, не особо останавливаясь. Я сейчас добавлю pricсиing, футер и завершим уже этот сайт. Я вот нашёл сайт, где такой мегатиповой прайсинг, где карточки есть с кнопками get started, я прямо забираю скриншот а этого прайсинга, иду себе в антигравити. Нажимаю там, сделай по такому же принципу мне прайсинг. Адаптируй под мои стили, сделай с контентом на русском языке и посмотрим, что он нам отдаст. Так, ну что, листаем на наш прайсинг. Ну блин, и прайсинг, смотрите, прайсинг адаптирован под нас на русском языке и фонт. И прямо классно и прямо хорошее расстояние. И вот не выглядит это всё очень душным, скомканным, и сразу прокинул, а, сабхедеры и хедеры из других секций. Ну, прямо топ, если честно. Мне вот это очень нравится, что сейчас происходит. И футер мы можем посмотреть. Давайте тут переедем в другую сторону. Обратите

Генерация логотипа и финальная сборка сайта

внимание, что он создал сам логотип для натуры и прокинул этот же логотип ещё и наверх. Ну, блин, это вообще топ. Единственное, что нам осталось, да, и что нам сейчас не нравится - это вот

Замена изображения на видео-анимацию

этот томатик, который как бы вообще не ок. Я предлагаю сделать из него классную анимацию по аналогии с видео, которую мы вот делали недавно. Обязательно посмотрите, мы там будем другую нейронку от гугла использовать. 2 Я сейчас не буду сильно на этом останавливаться, просто покажу вам результат. Нас

Создание видео в Google Flow

интересует тулза, который называется Flow. Это опять же инструмент от Гугла. И а мы в прошлый раз им уже хорошо пользовались и разбирались, каким образом это а работает. Единственное, что скажу, что нам сейчас понадобится инструмент, который называется ингредиенты в видео. И смотрите, у меня потребовалось несколько итераций, а чтобы сделать по красоте. Вот у меня первый томат. То есть я дал просто картинку своего томата. И здесь вижу, что что-то его разрезает. Мне это не очень понравилось. А здесь у нас есть вторая иллюстрация. Тоже опять нож разрезает. Надо сказать, что хорошо разрезает, но там в какой-то момент было видно, что это четыре а секции томата. А вот здесь уже я сказал, что не должно быть никакого ножа. Просто, пожалуйста, покажи мне, как он разрезается и распадается самостоятельно. Вот это уже было неплохо. И, наконец, вот эту анимацию, вот это видео. Да, в принципе, здесь неплохо. Наверное, возьмём вот эту. Здесь можно нажать скачать. Скачать в оригинальном размере и посмотреть, что у нас качается. Вот у нас скачалось это видео. Я почитал комментарий под предыдущим видео. Там очень много переживающих было за огромный объём именно вес анимации. Здесь обратите внимание, я даже не буду с ним ничего делать, никак дополнительно нажимать, потому что всё видео весит меньше полутора Мгабй. Для современной скорости интернета это вполне себе о'кей. Поэтому я забираю это видео и

Оптимизация веса видео для сайта

делаю такую инструкцию для антигравити. Говорю, я добавил видео MP4, я его закинул прямо в каталог нашего проекта. Я хочу, чтобы ты заменил в Hero секции картинку на это видео. И дальше описываю конкретно, что я хочу сделать. Аа, нажимаю Enter и посмотрим, что у нас за результат будет. Ну что, друзья, а это заняло три промта, дни один, но

Адаптация сайта под мобильные устройства

результат, вообще говоря, того стоит. Что было сначала? Он поставил эту картинку сразу хорошо, но вот эта надпись оказалась при а мобильном а размере под картинкой. Мне это не понравилось. Я поэтому попросил его заменить. И, кстати, мы с вами ни разу не посмотрели, как это смотрится на мобилке. Давайте сразу откроем это на мобилке. Так, прекрасно. Мне нравится. Здесь, конечно, чуть-чуть свисающее одно слово, с этим можно будет поработать. Но, в принципе, хорошо. Обратите внимание, да, он перестроил эту секцию прекрасно. В секции всё выглядит хорошо. И смотрите, я вот переживал за эту, а, секцию. Он её нормально перестраивает. А, хорошо всё это выглядит, да. И даже вот линия оказывается под иконками. Это прекрасно, достойно. сам прайсинг перестроил и да, ёлки-палки, если честно, это выглядит всё топ. И не только для код дизайна. Это выглядит всё на очень хорошем

Финальный результат и готовность к публикации

уровне. В принципе, можно уже брать это, менять тексты под свои и закидывать себе на домен и пользоваться как своим профессиональным сайтом. Вообще, говорят, топ. Я сделал ещё пару промтов, дополировал. И если вам прямо нужен будет исходный код конкретно того, что получилось, то есть вот с этой классной анимацией, с а всеми компонентами, которые здесь уже есть, то исходный код я положу себе в прогруппу. Ссылка тоже будет в описании. И вообще, если вы

Где взять исходники и завершение видео

развиваетесь в искусственном интеллекте, то заскакивайте туда тоже. Там огромное количество проматериалов и всевсевсе исходники из всех YouTube видео и не только. Там, короче, очень много чего происходит. Обязательно туда заскакивайте. Ну а на этом мы будем с вами, друзья, прощаться. Обязательно оставляйте ваш коммент, лайк, подписывайтесь и до скорых встреч.

Ещё от ИИшенка | AI Automation

Твой N8N Никогда Не Будет Прежним с Gemini CLI

ИИшенка | AI Automation | 14.12.2025 | 25 сегм. | 38 476

Как Сделать RAG на Supabase 100% Бесплатно и Локально для ИИ Агента По Шагам (n8n, Ollama, Supabase)

ИИшенка | AI Automation | 10.06.2025 | 12 сегм. | 33 060

Используй Google Antigravity КРУЧЕ Чем 99% Людей (5 Способов)

ИИшенка | AI Automation | 22.01.2026 | 11 сегм. | 29 496

Скиллы Google Antigravity Это ЧИТЕРСТВО?

ИИшенка | AI Automation | 25.01.2026 | 23 сегм. | 23 207

Как Создать ИИ Ассистента с Данными Компании Без Кода Пошагово (n8n, Rag, Telegram)

ИИшенка | AI Automation | 30.04.2025 | 15 сегм. | 20 608

Вайбкодим ТОПОВЫЙ Сайт В Стиле Apple Бесплатно с Gemini AI

ИИшенка | AI Automation | 10.12.2025 | 4 сегм. | 19 387

Ctrl+V

Экстракт Знаний в Telegram

Транскрипты, идеи, методички — всё самое полезное из лучших YouTube-каналов.

Подписаться