# Вайбкодим профессиональный сайт для бизнеса с 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`. Это команда, которая заставляет нейросеть разделить код на чёткие блоки:

```html
<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, который уже существует в вашем файле. Поэтому:

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

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

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

| Инструмент | Назначение | Стоимость |
|------------|-----------|-----------|
| Google Antigravity | Среда разработки с Gemini | Бесплатно (с лимитами) |
| Superhero | Референсы Hero-секций | Бесплатно |
| Bent Grids | Референсы секций с сетками | Бесплатно |
| Mobbin | База секций по категориям | Бесплатно (с регистрацией) |
| Google Flow | Генерация видеоанимаций | Бесплатно |
| Iconify | Open-source иконки | Бесплатно |

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

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

## Итог

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

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