Экстракт Знаний
Вайбкодим КРЕПКИЙ Сайт с Бекендом на N8N в Google Antigravity
8:14

Вайбкодим КРЕПКИЙ Сайт с Бекендом на N8N в Google Antigravity

ИИшенка | AI Automation 29.01.2026 5 770 просмотров 227 лайков обн. 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 В этом видео я расскажу, как вайбкодить Крепкие сайты со скиллами Gemini (Vibe Coding) за несколько простых шагов. Что особенного в этом видео? Мы не только изучим, как работают Gemini и Antigravity для создания сайтов, но и научимся внедрять результаты их работы в свои лендинг-страницы. 🔥 Независимо от того, работаете ли вы с AI-агентами или только начинаете осваивать автоматизации в n8n, этот урок поможет вам овладеть процессом настройки ИИ для любых задач. ⏱ Таймкоды 00:00 – Введение: делаем сайт с лёгким бэкендом за 10 минут 00:30 – Шаблон проекта и использование Antigravity 00:46 – UXI / UI UX Pro Max Skill: зачем нужен и как работает 01:15 – Формирование промпта и выбор модели (Gemini, Next.js) 01:51 – Генерация сайта и разбор результата 02:25 – Ограничения скилла и быстрые итерации 02:59 – Запуск проекта и просмотр сайта 03:24 – Проблема со шрифтами и поддержкой кириллицы 03:47 – Вторая итерация: замена шрифтов 04:05 – Адаптивность и проверка на мобилке 04:10 – Задача: отправка бронирований в Telegram 04:42 – Архитектура: фронтенд, бэкенд и Webhook в N8N 05:27 – Настройка Webhook в N8N 05:45 – Выбор модели: Gemini vs Claude 06:08 – Создание API-роута для формы бронирования 06:37 – Тестирование бронирования 07:03 – Получение данных в N8N 07:17 – Отправка бронирования в Telegram 07:52 – Итог: сайт + автоматизация за 10 минут 07:56 – Где взять автоматизацию и материалы 💡 Не забудьте поставить лайк и подписаться, чтобы не пропустить новые уроки по n8n и AI-агентам. Давайте сделаем AI-автоматизации простыми! 🙌 Я — Илья Бовкунов, основатель и СЕО Sendforsign — это компания, занимающаяся AI-автоматизацией договоров и документооборота. В прошлом был Директором по продукту и продуктовому дизайну в международных AI-стартапах. Позвать в подкаст или предложить другое сотрудничество aiiszdes@gmail.com Не забудьте поставить лайк, подписаться и нажать на колокольчик, чтобы не пропустить новые видео об AI-агентах и автоматизациях!

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

  1. 0:00 Введение: делаем сайт с лёгким бэкендом за 10 минут 94 сл.
  2. 0:30 Шаблон проекта и использование Antigravity 50 сл.
  3. 0:46 UXI / UI UX Pro Max Skill: зачем нужен и как работает 97 сл.
  4. 1:15 Формирование промпта и выбор модели (Gemini, Next.js) 99 сл.
  5. 1:51 Генерация сайта и разбор результата 87 сл.
  6. 2:25 Ограничения скилла и быстрые итерации 99 сл.
  7. 2:59 Запуск проекта и просмотр сайта 56 сл.
  8. 3:24 Проблема со шрифтами и поддержкой кириллицы 54 сл.
  9. 3:47 Вторая итерация: замена шрифтов 44 сл.
  10. 4:05 Адаптивность и проверка на мобилке 17 сл.
  11. 4:10 Задача: отправка бронирований в Telegram 77 сл.
  12. 4:42 Архитектура: фронтенд, бэкенд и Webhook в N8N 126 сл.
  13. 5:27 Настройка Webhook в N8N 45 сл.
  14. 5:45 Выбор модели: Gemini vs Claude 59 сл.
  15. 6:08 Создание API-роута для формы бронирования 75 сл.
  16. 6:37 Тестирование бронирования 54 сл.
  17. 7:03 Получение данных в N8N 33 сл.
  18. 7:17 Отправка бронирования в Telegram 77 сл.
  19. 7:52 Итог: сайт + автоматизация за 10 минут 11 сл.
  20. 7:56 Где взять автоматизацию и материалы 60 сл.
0:00

Введение: делаем сайт с лёгким бэкендом за 10 минут

Друзья, всем привет. Ну что, построим прикольный сайт. Мы за пару последних видео с вами изучили, что такое скилы, как пользуются антигравити. Теперь пора применить все эти навыки на практики. Причём мы сделаем сегодня сайт, который ещё будет с лёгким бэкэндом. Ну, чтобы он мог взаимодействовать с внешним миром. Думаю, займёт это всё минут 10. Будем делать максимально просто, так, чтобы вы сами могли это всё повторить. С вас лайк, подписка там внизу, ну и коммент, конечно же, чтобы это видео видело как можно больше людей. Помните, в прошлом видео я вам рекомендовал один
0:30

Шаблон проекта и использование Antigravity

раз создать шаблон, туда добавить все рулы, скилы, всё, чем вы обычно пользуетесь. Оставить это как отдельную папочку. И теперь каждый раз мы можем делать дублицирование этого каталога, сразу его кидать в наш антигравити. И вот у нас всё открывается и готово для работы. Мы с вами будем пользоваться в
0:46

UXI / UI UX Pro Max Skill: зачем нужен и как работает

этот раз топовым скилом, который мы тоже обсудили в прошлый раз. UXI Skill. Ну, я ещё опционально добавляю набор своих, э, правил, которые я либо сам писал, либо находил где-то в интернете. Они, в общем и целом обогащают и делают сильнее вот этот скилл. И результаты получаются более прикольные даже с первого раза. Сейчас мы всё это увидим. Для вас же минимальная рекомендация. Прямо этот скилл ставьте, если не знаете, как. В прошлом видео мы обсуждали, установили. Ну вот и прямо с места в карьер. Так, мне тебя нужен будет сайт для моего ресторана. Используй светлую тему.
1:15

Формирование промпта и выбор модели (Gemini, Next.js)

Ресторан называется Пересмешник. Коронное блюдо - это блюдо из попугая. должны быть все секции, которые должны быть у нормальных ресторанов. И не забудь про форму обратной связи для того, чтобы люди могли бронировать столик. Так, сразу меняю модельку на Gemini 3. Режим планирования. Погнали. А, забыл сказать, сейчас ещё добавим чуть-чуть технология. Меня интересует Next JS. Ну и, конечно же, не забудь использовать наш skкил UI UX Pro Max. Ну а теперь погнали. Так, скил юзается. Отлично. Без этого было бы плохо. Готовится implementation plan. Сейчас будем подтверждать. Да, все секции в порядке. Погнали. Пока у нас вся наша
1:51

Генерация сайта и разбор результата

кухня варится, я хочу напомнить про UI UX Pro Max Skill. Это вообще очень крутой скилл, который нацелен, а, я бы сказал, делать некоторые крепкие усреднённые дизайны. Это в разы лучше, чем умолчательные дизайны, которые делает Неронка с обычным промтингом, потому что в этом скеле собраны наборы того или правила того, что такое хорошо и что такое плохо. Там огромное количество сочетаний цветовых палитр, шрифтовых пар, структур, классических лендингов. То есть, по сути, этот скилл создан для того, чтобы прямо очень жёстко усечь нашу нейронку, дать ей
2:25

Ограничения скилла и быстрые итерации

некоторые базовые правила, чтобы она за них не выходила и создавала нам очень крепкие, усреднённые сайты. То есть это скорее не про то, чтобы строить какие-то мегатоповые сайты, как мы вот в этом видео делали, где будет очень много итерирования. Этот сайт я намереваю сделать вообще за три-четыре итерации. Так, ну вот подождали, говорит, я готов. Ну, звучит, конечно, всё вкусно. Акценты Рождества, золото, типографика с засечками, зажаренный пересмешник. Нам его даже сгенерировали. Ох, ну не знаю, вы таких попугаев видели. Я бы удивился, если бы увидел. Идём, открываем терминал, перемещаемся в нашу папочку пересмешник и говорим npm runf.
2:59

Запуск проекта и просмотр сайта

Запускаемся и идём по этому адресу. Так, жареный пересмешник. Да, картиночка приехала. Даже анимашка есть какая-то. Меню таверны. Зелье, напитки какие-то, анимашечки. В год дракона, когда звёзды сошлись. Ну ладно. И главная наша форма забронировать есть футер. Я думаю, тут большая проблема с тем, что шрифты, которые подобрала нейронка, у них нету кириллического начертания, поэтому всё
3:24

Проблема со шрифтами и поддержкой кириллицы

это выглядит настолько невыгрышно. Поэтому берём итерацию номер два, меняем фанты. Так, всё хорошо, но шрифты, которые ты подобрал, у них нету нормального кириллического начертания. И от этого сайт выглядит не очень. Подбери мне шрифты, которые будут круто смотреться для кириллицы, для кирилических букв. И замени только шрифты. Всё остальное не трогай. Так, он
3:47

Вторая итерация: замена шрифтов

говорит, я закончил. Идём смотреть. Угу. Ну ладно. Скажем так, классические конструкторы сайтов мы уже догнали. Причём руками делали мало, только лишь голосом болтали. Давайте проверим, как это всё гнётся. Да, хорошо. На мобилке наши клиенты смогут всё заказывать. Можно дорабатывать. Но давайте двинемся
4:05

Адаптивность и проверка на мобилке

дальше к самому интересному. Меня интересует вот эта прекрасная форма. Я хочу, чтобы каждый раз, когда кто-то
4:10

Задача: отправка бронирований в Telegram

бронирует столик на этом сайте, мой менеджер, менеджер этого ресторана получал оповещение, ну, скажем, в Telegram. Вы можете, конечно, делать сложнее. Нам сейчас главное концепт усвоить. И тут неожиданно мы идём в NVM. Я прекрасно понимаю, что многие зрители, которые смотрят мой канал, они не сильно погружены в тему разработки, но уже автоматизации NVC искусственного интеллекта. Поэтому бес для тех, кто будет делать это в первый раз, если очень просто, то наше приложение сейчас состоит из фронтэнда
4:42

Архитектура: фронтенд, бэкенд и Webhook в N8N

то есть это непосредственно сайт, который видит любой человек, который открывает его в браузере. И нам нужно, чтобы любой человек мог отправлять заявку на бронирование столика. Кажется логичным, что можно отправить всё в NVC с помощью ноды Webhook, и мы так и будем делать. Но нюанс в том, что нельзя этого делать с фронта, потому что тогда мы можем открыть любому пользователю URL адрес нашего вебхука, нас могут задосить и, в принципе, мы можем получить массу проблем. Поэтому классическая схема, вы разворачиваете ещё и эээнд. Ваш фронт коммуницирует сначала с бэкэндом. Бэкэнд делает все базовые механизмы защиты. И уже сам посылает запросы в ваш NVM. И NVC отвечает в backend, акэнд отвечает на фронт. Это самые базовые принципы, но вы должны их знать. Поэтому я добавляю
5:27

Настройка Webhook в N8N

ноду Webhookn man, открываю её и вижу, что у нас уже сгенерирован тестовый адрес и продуктовый адрес, куда мы можем слать наши запросы. Пока мы в тестовом режиме, я забираю вот этот адрес, возвращаюсь к нам в антигравити, меняю здесь модель на клодовскую. Вы наверняка
5:45

Выбор модели: Gemini vs Claude

заметили, что когда мы строим фронт-endнд, Gemini Pro справляется мегапрекрасно, когда мы уже строим что-то более полноценное. Рекомендую использовать клодовские модели, потому что иногда модели от Gemini - это прямо боль, но для фронта хорошо. Переключаемся на модель Clodus и говорим: "Смотри, у меня на сайте есть форма обратной связи. Мне нужно, чтобы клиент заполнял эту форму и данные
6:08

Создание API-роута для формы бронирования

уходили на мой вебху. Я тебе сейчас дам адрес. Естественно, делай всё через должен уходить из бэкэнда, поэтому сделай отдельный API root. Ну и позаботься обо всём необходимом. И прикладываю URL нашего вебхука. Нажимаю Enter и смотрим, что будет происходить. Так, ну он говорит, я готов. Смотрите, у нас добавилась папочка API, там букиing и наш root, который посылает запрос прямо в нашмен. Кажется, что надо идти тестировать. Возвращаемся в NVAN, нажимаем запустить отслушивание. Идём
6:37

Тестирование бронирования

теперь в наш ресторан. Идём на форму. Забронировать столик. Так, ну, Геральд, значит, Геральд из Ривии. Так, дата пускай сегодня. Количество гостей будет шесть. Большая компания. Время 20:57. Ну и пишем: "Ничего такого особенного, отправляем Ворона". Так, мы сейчас видим, что ваша бронь отправлена. Мы свяжемся с вами для подтверждения. Идём в наш N8N.
7:03

Получение данных в N8N

И вот наш Ворон прилетел. Видим все предпочтения, конкретное время, имя, дата, сколько гостей, всё, что нам нужно. Ну что, наш менеджер ждёт сообщения о том, что новая бронь прилетела. Добавляем ноду отослать
7:17

Отправка бронирования в Telegram

текстовое сообщение. И давайте прямо поленимся и перекинем полностью весь букинг. Давайте единственное превратим это всё в строчку, чтобы особо не морочиться. Закрываем, сохраняем, запускаем исполнение, чтобы всё было по-честному. Забронировать ещё раз. Говорим Павел. Дата визита будет тридцатого. Гостей будет двое. Время будет 18:41. Пишем Hello. Отправить Ворона. Теперь открываем наш Telegram. Имя Павел. Дата. Количество гостей два. Примечание. Hello. Всё. Ну что, мы уложились в 10 минут, потом на монтаже будет видно. Друзья, саму автоматизацию
7:52

Итог: сайт + автоматизация за 10 минут

NVN, вот эту простую, я положу в бесплатную Telegram-группу. Если вам
7:56

Где взять автоматизацию и материалы

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

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

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

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

ИИшенка | AI Automation | 21.12.2025 | 30 сегм. | 40 572
Твой N8N Никогда Не Будет Прежним с Gemini CLI 13:29

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

ИИшенка | AI Automation | 14.12.2025 | 25 сегм. | 38 476
Как Сделать RAG на Supabase 100% Бесплатно и Локально для ИИ Агента По Шагам (n8n, Ollama, Supabase) 32:13

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

ИИшенка | AI Automation | 10.06.2025 | 12 сегм. | 33 060
Используй Google Antigravity КРУЧЕ Чем 99% Людей (5 Способов) 12:01

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

ИИшенка | AI Automation | 22.01.2026 | 11 сегм. | 29 496
Скиллы Google Antigravity Это ЧИТЕРСТВО? 12:57

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

ИИшенка | AI Automation | 25.01.2026 | 23 сегм. | 23 207
Как Создать ИИ Ассистента с Данными Компании Без Кода Пошагово (n8n, Rag, Telegram) 43:21

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

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

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

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

Подписаться