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

## Метаданные

- **Спикер:** ИИшенка | AI Automation
- **Канал:** ИИшенка | AI Automation
- **Тема:** Создание профессионального сайта с нуля с помощью Google Gemini (Antigravity)
- **Длительность:** ~23 минуты
- **YouTube:** https://www.youtube.com/watch?v=S3m36N26EP4
- **Источник:** https://ekstraktznaniy.ru/workbook/33

## Ключевые тезисы

1. **Начинайте с одной Hero-секции, а не с целого сайта** — Ключевой принцип: сначала создайте одну идеальную первую секцию (Hero). Нейросеть будет использовать её как эталон стиля для генерации всех остальных секций, обеспечивая визуальную целостность.
2. **Референс — фундамент хорошего дизайна** — Перед тем как давать нейросети задание, найдите визуальный референс на специализированных сайтах (Superhero, Bent Grids, Mobbin). Референс задаёт структуру, стиль и уровень качества результата.
3. **Только HTML, CSS и JavaScript — без фреймворков** — Весь сайт строится на чистых веб-технологиях без React, Vue или других фреймворков. Это делает код понятным любому новичку и не создаёт лишних зависимостей.
4. **Workflow-файлы экономят время и обеспечивают стабильность** — Создайте в папке .agent/workflows набор markdown-инструкций (промптов), которые можно переиспользовать. Это избавляет от необходимости каждый раз писать одни и те же промпты.
5. **Структурируйте HTML с первого шага** — Отдельные header, main, footer и секции внутри main — обязательное правило. Структуризация на раннем этапе делает макет крепче и предсказуемее при дальнейшем развитии.
6. **Иконки — из open-source репозиториев, не из генерации ИИ** — Нейросеть часто генерирует некачественные SVG-иконки. Лучше указать в инструкции использовать Iconify или аналогичные репозитории — результат выглядит профессионально.
7. **Вайбкодинг — это итеративный процесс** — Дизайн сайта строится через диалог с нейросетью: вы просите, она генерирует, вам что-то нравится, что-то нет, вы просите исправить. Каждый промпт — маленький шаг к идеалу.
8. **Секции добавляются по одной — от референса к адаптации** — Для каждой новой секции (преимущества, прайсинг, футер) ищите отдельный визуальный референс. Нейросеть копирует структуру из референса, но адаптирует стиль под уже существующий дизайн.
9. **Анимации должны быть органичными, а не кричащими** — Хорошие анимации не забирают внимание на себя — они добавляют плавность и ощущение завершённости. У второстепенных элементов задача — поддерживать настроение, а не отвлекать.
10. **Минимализм держится на расстояниях и типографике** — В минималистичном дизайне критически важны правильные расстояния между элементами, выбор шрифтов (с засечками, моноширинные) и их иерархия. Не цвета, а пространство создаёт стиль.
11. **Google Flow для видеоанимаций** — Для создания анимированных элементов (например, анимация продукта) используется Google Flow — инструмент генерации коротких видео. Результат весит менее 1.5 МБ и подходит для веба.
12. **Мобильная адаптация проверяется на каждом этапе** — Нейросеть автоматически перестраивает секции под мобильный формат. Но проверять адаптивность нужно самостоятельно — иногда слова свисают или элементы смещаются.

## Практические задания

### Задание 1: Создайте Hero-секцию по референсу
**Цель:** Найти референс на Superhero или Bent Grids, скачать скриншот, передать нейросети с инструкцией создать первую секцию для вашего бизнеса на чистом HTML/CSS/JS. Добиться результата, который вас устраивает, за 2-3 итерации.

### Задание 2: Постройте полный лендинг из 4-5 секций
**Цель:** Используя метод «одна секция за раз», создайте полноценный лендинг: Hero, преимущества, экосистема/услуги, прайсинг, футер. Для каждой секции — отдельный референс и отдельный промпт.

### Задание 3: Настройте workflow-файлы для повторного использования
**Цель:** Создайте папку .agent/workflows с двумя markdown-инструкциями: (1) start — правила создания первой секции, (2) structure — правила структуризации HTML. Проверьте, что нейросеть корректно подхватывает их при вызове через /

### Задание 4: Проверьте мобильную адаптивность и допилите
**Цель:** Откройте готовый сайт в мобильном режиме браузера. Найдите минимум 3 проблемы (свисающие слова, некорректные отступы, слишком мелкий текст) и исправьте их через промпты к нейросети.

## Ключевые цитаты

> «Вся эта красота сделана с помощью одной нейронки Gemini от Гугла. И вы можете сделать себе такую же красоту, которая выглядит так, будто вы заплатили профессиональному дизайнеру.»
> — ИИшенка

> «Когда у нас есть первая секция, у нейронки есть, по сути, пример, на основе которого она генерит всё оставшееся. Нейронка генерирует все последующие секции, основываясь на секции, которая у нас уже есть.»
> — ИИшенка

> «У второстепенных анимаций никогда нету задачи забирать на себя внимание, а есть задача добавлять плавность и настроение к вашему сайту.»
> — ИИшенка

> «Часто нейронки сами пытаются придумать иконки и сделать их в SVG — часто это какая-то лажа. Используйте правильные репозитории.»
> — ИИшенка

> «Можно уже брать это, менять тексты под свои и закидывать себе на домен и пользоваться как своим профессиональным сайтом.»
> — ИИшенка

## Полный текст экстракта

# Вайбкодим профессиональный сайт для бизнеса с 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 промптов создан полноценный лендинг с:
- Минималистичным дизайном профессионального уровня
- Анимациями, которые не раздражают
- Адаптивной мобильной версией
- Видеоанимацией продукта
- Полностью русскоязычным контентом

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