Вайбкодим супер-сайт для бизнеса за минуты с Gemini

Создание сайта с Gemini: вайбкодим бизнес-дизайн за минуты (гайд).

Представьте сайт с минималистичным, свежим дизайном, выверенной типографикой и органичной анимацией. Сайт, который выглядит так, будто за него заплатили профессиональной студии, но на самом деле он создан за считанные минуты. Звучит как фантастика?

В этой статье мы разберем процесс создания (или, как сейчас модно говорить, «вайбкодинга») полноценного лендинга для бизнеса. Мы не будем использовать тяжелые фреймворки — только чистый HTML, CSS и JavaScript. А главным инструментом станет нейросеть Gemini от Google.

Вы узнаете, как пройти путь от пустой папки до готового к публикации ресурса, используя правильные промты и референсы.

Подготовка инструментария: Google Antigravity.

Прежде чем начать «магию», нам потребуется среда разработки. В данном случае мы будем использовать инструмент, интегрирующий возможности ИИ прямо в редактор кода — Google Antigravity.

Почему Antigravity?

Это среда, позволяющая использовать модель Gemini Pro для генерации кода. Google предоставляет бесплатный доступ (free usage) с разумными лимитами, которых с запасом хватает на разработку полноценного одностраничного сайта. Вы можете установить Antigravity или использовать любую другую привычную IDE с интеграцией нейросетей, но логика работы останется неизменной.

Настройка рабочего пространства.

Создание структуры: в корневой папке проекта создайте каталог .agent, а внутри него — папку workflows.

Заготовка промтов: это ключевой момент для оптимизации. Чтобы не писать одни и те же инструкции вручную, создайте файлы с расширением .md (Markdown).

• md: Здесь описываем базовые требования (использовать только HTML/CSS/JS, не использовать фреймворки, брать иконки из открытых репозиториев и т.д.).
• md: Инструкция по семантической верстке (разделение на Header, Main, Footer).

Такой подход позволяет вызывать сложные команды одним нажатием, экономя время и нервы.

Шаг 1: поиск «идеального донора» и hero-секция.

Секрет качественной генерации не в том, чтобы просить нейросеть «придумать что-то красивое», а в том, чтобы дать ей четкий визуальный ориентир. Мы начнем с Hero-секции (первого экрана), так как она задает стиль всему сайту.

Где искать вдохновение?

Для поиска референсов рекомендуем использовать ресурс Superhero. Он специализируется на коллекциях крутых первых экранов.

• Критерии выбора: Ищите минимализм, «воздух» (большие расстояния между элементами), акцентную типографику.
• Наш выбор: Для примера мы выбрали дизайн студии с крупным изображением (помидор), рукописными элементами по краям и аккуратными шрифтами с засечками.

Запуск генерации.

Мы загружаем скриншот выбранной секции в Antigravity и применяем команду start. Промт для нейросети:

«У тебя есть картинка и инструкция. Создай идеальную первую секцию, максимально похожую на референс. Скопируй шрифты, отступы и стиль, используя чистый HTML/CSS».

Результат: Gemini создает файл index.html, подключает стили и скрипты. Нейросеть распознает типы шрифтов (с засечками для заголовков, моноширинные для подписей), расставляет элементы по краям и даже генерирует похожее изображение. Используются векторные иконки из библиотек типа Iconify, а не выдуманные артефакты.

Шаг 2: структурирование и локализация контента.

Первый набросок обычно хорош визуально, но может хромать технически. Самое время навести порядок в коде.

Семантическая структура.

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

• <header> — для меню и логотипа.
• <main> — для основного контента.
• <footer> — для подвала.

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

Адаптация под бренд (локализация).

Наш референс был на английском, а сайт мы делаем для магазина здорового питания «Натура». Промт:

«Измени тексты на сайте. Тематика: фермерские продукты, магазин здорового питания. Язык: русский. Грамматику и стиль дизайна сохрани, меняй только контент».

Gemini отлично понимает контекст. Вместо “Design Studio” появляются фразы “Чистый вкус”, “Живая еда”. Меняется логотип на текстовый «Натура», адрес и часы работы адаптируются под российский формат. Важно, что нейросеть сохраняет вайб оригинала: например, фразу “Chaos can wait” она может перевести как “Хаос может подождать”, сохраняя расслабленное настроение бренда.

Шаг 3: масштабирование дизайна (сетка и экосистема).

Когда первый экран готов, у нейросети появляется контекст. Теперь все новые секции она будет строить, основываясь на уже существующем коде и стилях.

Секция преимуществ (Bento Grids).

Для блока «Почему выбирают нас» используем популярный стиль Bento Grids (сетки в стиле Apple).

1. Референс: Находим пример на сайте Bent Grids — карточки разного размера с интересной компоновкой.
2. Задача: «Добавь новую секцию с преимуществами. Структуру возьми с картинки, но стиль адаптируй под наш текущий дизайн».

Результат: нейросеть генерирует анимированные карточки. При наведении (hover-эффект) элементы плавно движутся. Это добавляет сайту интерактивности, не перегружая внимание пользователя. Тексты автоматически генерируются про осознанное питание.

Секция «Экосистема».

Для демонстрации логистики (от фермы до стола) ищем референс на Mobbin.

• Промт: «добавь секцию про экосистему компании. Структура как на скриншоте, стиль — наш».
• Итог: появляется блок с этапами: Экологистика -> Локальные фермы -> Лаборатория -> Переработка. Иконки подтягиваются из правильных репозиториев, анимация появления элементов выглядит профессионально.

Шаг 4: прайсинг и футер.

Завершаем структуру страницы коммерческими блоками.

• Прайсинг: берем скриншот типовых карточек с ценами. Gemini адаптирует их, добавляя русские названия тарифов и сохраняя наши фирменные моноширинные шрифты.
• Футер: нейросеть сама предлагает структуру подвала, перенося туда логотип «Натура» и дублируя навигацию.

В этот момент сайт выглядит как цельный продукт, а не набор разрозненных блоков.

Шаг 5: магия анимации с Google Flow.

Чтобы сайт перестал быть статичной картинкой и стал по-настоящему «вайбовым», заменим статичное изображение помидора в Hero-секции на видео.

Создание видео-контента.

Мы используем инструмент Google Flow и функцию Ingredients in Video.

1. Проблема: обычная генерация видео может добавить лишние объекты (например, нож, разрезающий помидор), которые нам не нужны.
2. Решение: мы итеративно просим нейросеть показать «распадающийся» томат без использования ножа.
3. Оптимизация: полученное видео скачиваем в формате MP4. Важнейший момент — вес файла. Благодаря современным алгоритмам, качественная анимация весит менее 1.5 Мб, что идеально для быстрой загрузки даже на мобильном интернете.

Интеграция в код.

Загружаем видео в папку проекта и даем команду:

«Замени картинку в Hero-секции на видео video.mp4. Сделай так, чтобы оно проигрывалось автоматически (autoplay), бесконечно (loop) и без звука (muted)».

Теперь при загрузке сайта пользователь видит сочную, живую анимацию продукта.

Мобильная версия и выводы.

Последний штрих — проверка на мобильных устройствах. Поскольку мы использовали современные стандарты верстки (Flexbox/Grid) через Gemini, адаптивность часто работает «из коробки».

• Меню перестраивается.
• Карточки выстраиваются в одну колонку.
• Видео масштабируется по ширине экрана.

Если где-то текст вылезает за границы (например, длинное слово в заголовке), достаточно одной команды: «Поправь отступы в мобильной версии для заголовка», и нейросеть внесет правки в CSS медиа-запросы.

Итоги.

Мы создали сайт, который выглядит дорого и работает быстро.

Что мы использовали:

1. Google Antigravity (Gemini) — как мозг и руки разработчика.
2. Референсы (Superhero, Mobbin) — как визуальный ориентир.
3. Чистый код — для скорости и независимости от платформ.

Этот метод «вайбкодинга» позволяет предпринимателям и криэйтерам запускать бизнес-сайты за один вечер, получая результат, сопоставимый с работой дизайн-студии.

Хотите повторить этот путь? Скачайте исходный код и промты, упомянутые в статье, и попробуйте создать свою версию «Натуры» уже сегодня.