Вайбкодим сайт для бизнеса с Gemini

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

О чём этот экстракт

Пошаговое руководство по созданию профессионального, минималистичного сайта для бизнеса с помощью Google Gemini (среда разработки Antigravity). Без фреймворков, без навыков программирования — только HTML, CSS, JavaScript и диалог с нейросетью. Автор демонстрирует весь процесс на примере сайта магазина здорового питания «Натура».

Кому будет полезно

• Предпринимателям, которым нужен сайт, но нет бюджета на дизайнера
• Начинающим вайбкодерам, которые хотят создавать красивые сайты без знания фреймворков
• Маркетологам, которые хотят быстро делать лендинги для тестирования гипотез
• Всем, кто хочет научиться работать с нейросетями в контексте веб-дизайна

Подготовка к работе

Что понадобится

1. Google Antigravity — среда разработки с встроенной нейросетью Gemini. Бесплатная, с разумным лимитом использования в неделю
2. Сайты с референсами — визуальные примеры секций, которые станут основой дизайна:
   • Superhero — коллекция Hero-секций (первый экран сайта)
   • Bent Grids — секции с нестандартными сетками (тренд, популяризированный Apple)
   • Mobbin — огромная база секций по категориям (бесплатная регистрация)
3. Google Flow — инструмент для создания коротких видеоанимаций (опционально)

Структура проекта

Создайте в Antigravity пустую папку и внутри неё:

проект/
├── .agent/
│   └── workflows/
│       ├── 1-start.md        ← инструкция для создания первой секции
│       └── 2-structure.md    ← инструкция для структуризации HTML
├── index.html                ← сюда нейросеть будет писать код
└── tomato.mp4                ← видеоанимация (если нужна)

Workflow-файлы — это ваши сохранённые промпты. Вместо того чтобы каждый раз писать длинную инструкцию, вы вызываете её через /start или /structure в чате Antigravity.

Пошаговый процесс создания сайта

Шаг 1: Найдите референс Hero-секции

Hero-секция — это первый экран, на который попадает посетитель. Именно она задаёт стиль всего сайта.

Идём на Superhero и ищем секцию, которая:

• Соответствует вашему стилю (минимализм, аккуратность, хорошие расстояния)
• Имеет интересную типографику (шрифты с засечками, моноширинные акценты)
• Содержит элементы, которые можно адаптировать под ваш бизнес

Важно: Вы не копируете секцию один-в-один. Вы берёте её как структурный и стилистический ориентир.

Шаг 2: Создайте Hero-секцию

1. Вставьте скриншот референса в чат Antigravity
2. Вызовите workflow /start
3. Инструкция указывает нейросети: создай только одну секцию, используй только HTML/CSS/JS, повтори стиль из картинки

Нейросеть создаёт index.html с:

• Подходящими шрифтами (угадывает тип: с засечками, моноширинный)
• Сгенерированным изображением по референсу
• Правильной структурой элементов
• Базовыми анимациями

Шаг 3: Структурируйте HTML

Вызовите workflow /structure. Это команда, которая заставляет нейросеть разделить код на чёткие блоки:

<header>...</header>
<main>
    <section class="hero">...</section>
    <!-- Сюда будут добавляться новые секции -->
</main>
<footer>...</footer>

Визуально сайт почти не меняется, но код становится «крепким» — каждая секция на своём месте, общая ширина и отступы зафиксированы. Это критически важно для дальнейшего развития.

Шаг 4: Адаптируйте тексты

Простой промпт: «Измени тексты на русском языке, тематика — магазин здорового питания. Больше ничего не меняй, только тексты».

Нюансы:

• Если шрифт не поддерживает кириллицу — попросите нейросеть его не менять (оставить латинские декоративные элементы)
• Проверьте, что точки, запятые и выравнивание не сломались
• Тексты от нейросети обычно неплохие, но при необходимости можно заменить

Шаг 5: Добавляйте секции по одной

Для каждой новой секции:

1. Найдите референс на Bent Grids, Mobbin или аналогичном сайте
2. Скриншот + промпт: «Добавь новую секцию про [тема]. Структуру скопируй из картинки. Стиль адаптируй под текущий дизайн. Тексты на русском»
3. Проверьте результат и доработайте за 1-2 дополнительных промпта

Типичные секции лендинга:

• Hero (первый экран) — уже готова
• Преимущества компании (карточки с иконками)
• Экосистема / как это работает (схема процесса)
• Прайсинг (тарифные карточки)
• Футер (контакты, навигация, логотип)

Шаг 6: Добавьте видеоанимацию (опционально)

Для эффектного Hero-элемента:

1. Откройте Google Flow
2. Загрузите изображение продукта
3. Выберите стиль анимации (2-3 итерации для хорошего результата)
4. Скачайте видео (~1.5 МБ, подходит для веба)
5. Промпт: «Замени картинку в Hero-секции на это видео MP4»

Шаг 7: Проверьте мобильную версию

Откройте сайт в мобильном режиме браузера и проверьте:

• Тексты не свисают за пределы экрана
• Секции корректно перестраиваются в одну колонку
• Иконки и анимации на месте
• Расстояния и отступы выглядят гармонично

Ключевой принцип: почему это работает

Весь метод строится на одной идее: первая секция — эталон для всех остальных.

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

• Шрифты остаются единообразными
• Цветовая палитра не расползается
• Отступы и расстояния выдерживаются
• Анимации стилистически совпадают

Это превращает хаотичную генерацию в предсказуемый процесс наращивания дизайна.

Ресурсы и инструменты

Частые ошибки и как их избежать

1. Пытаться создать весь сайт за один промпт — результат будет хаотичным. Всегда по одной секции
2. Не давать референс — без визуального примера нейросеть генерирует шаблонный дизайн
3. Использовать фреймворки — для простого лендинга чистый HTML/CSS/JS проще, понятнее и не ломается
4. Игнорировать структуризацию — без чёткого разделения на header/main/footer секции начинают конфликтовать
5. Позволять нейросети генерировать иконки — SVG от ИИ часто выглядят криво. Указывайте использовать Iconify

Итог

За 23 минуты и ~10 промптов создан полноценный лендинг с:

• Минималистичным дизайном профессионального уровня
• Анимациями, которые не раздражают
• Адаптивной мобильной версией
• Видеоанимацией продукта
• Полностью русскоязычным контентом

Главный вывод: дизайн-навыки нужны не для рисования, а для выбора референсов и формулирования промптов. Нейросеть — это инструмент исполнения, а вы — арт-директор.