Вайбкодим профессиональный сайт для бизнеса с Gemini О чём этот экстракт Пошаговое руководство по созданию профессионального, минималистичного сайта для бизнеса с помощью Google Gemini (среда разработки Antigravity). Без фреймворков, без навыков программирования — только HTML, CSS, JavaScript и диалог с нейросетью. Автор демонстрирует весь процесс на примере сайта магазина здорового питания «Натура». Кому будет полезно Предпринимателям, которым нужен сайт, но нет бюджета на дизайнера Начинающим вайбкодерам, которые хотят создавать красивые сайты без знания фреймворков Маркетологам, которые хотят быстро делать лендинги для тестирования гипотез Всем, кто хочет научиться работать с нейросетями в контексте веб-дизайна Подготовка к работе Что понадобится 1. Google Antigravity — среда разработки с встроенной нейросетью Gemini. Бесплатная, с разумным лимитом использования в неделю 2. Сайты с референсами — визуальные примеры секций, которые станут основой дизайна: - Superhero — коллекция Hero-секций (первый экран сайта) - Bent Grids — секции с нестандартными сетками (тренд, популяризированный Apple) - Mobbin — огромная база секций по категориям (бесплатная регистрация) 3. Google Flow — инструмент для создания коротких видеоанимаций (опционально) Структура проекта Создайте в Antigravity пустую папку и внутри неё: Workflow-файлы — это ваши сохранённые промпты. Вместо того чтобы каждый раз писать длинную инструкцию, вы вызываете её через или в чате Antigravity. Пошаговый процесс создания сайта Шаг 1: Найдите референс Hero-секции Hero-секция — это первый экран, на который попадает посетитель. Именно она задаёт стиль всего сайта. Идём на Superhero и ищем секцию, которая: Соответствует вашему стилю (минимализм, аккуратность, хорошие расстояния) Имеет интересную типографику (шрифты с засечками, моноширинные акценты) Содержит элементы, которые можно адаптировать под ваш бизнес Важно: Вы не копируете секцию один-в-один. Вы берёте её как структурный и стилистический ориентир. Шаг 2: Создайте Hero-секцию 1. Вставьте скриншот референса в чат Antigravity 2. Вызовите workflow 3. Инструкция указывает нейросети: создай только одну секцию, используй только HTML/CSS/JS, повтори стиль из картинки Нейросеть создаёт с: Подходящими шрифтами (угадывает тип: с засечками, моноширинный) Сгенерированным изображением по референсу Правильной структурой элементов Базовыми анимациями Шаг 3: Структурируйте HTML Вызовите workflow . Это команда, которая заставляет нейросеть разделить код на чёткие блоки: Визуально сайт почти не меняется, но код становится «крепким» — каждая секция на своём месте, общая ширина и отступы зафиксированы. Это критически важно для дальнейшего развития. Шаг 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 промптов создан полноценный лендинг с: Минималистичным дизайном профессионального уровня Анимациями, которые не раздражают Адаптивной мобильной версией Видеоанимацией продукта Полностью русскоязычным контентом Главный вывод: дизайн-навыки нужны не для рисования, а для выбора референсов и формулирования промптов. Нейросеть — это инструмент исполнения, а вы — арт-директор.