Vibe coding · конспект по субтитрам
Создаём сайт для бизнеса с Gemini
Пошаговый конспект сборки минималистичного сайта в Google Antigravity: один сильный референс, два reusable workflow, последовательное добавление секций и финальная мобильная проверка.
Главное за минуту
- Дизайн начинается с одного референса для hero, а не с генерации сайта целиком
- Workflows фиксируют правила старта проекта и структуру HTML-страницы
- Новые секции наследуют типографику и ритм уже принятого hero
- После сборки обязательно отдельно проверяется мобильная композиция
Разбор по главам
Нажмите на таймкод, чтобы открыть соответствующий фрагмент оригинального видео.
Что собирается в ролике
Автор показывает готовый адаптивный сайт магазина здоровых продуктов, собранный на HTML, CSS и JavaScript в Google Antigravity. Акцент сделан на типографике, аккуратных расстояниях и неброских анимациях.
- Сайт создаётся без отдельного UI-фреймворка.
- Визуальные решения последовательно переносятся из выбранных референсов.
Один hero как источник дизайн-системы
Вместо запроса на весь сайт выбирается одна сильная hero-секция из галереи референсов. Модели передаётся скриншот и просьба повторить структуру, типографический характер и композиционный принцип.
- За основу берётся не весь чужой сайт, а одна секция с нужным настроением.
- После принятия hero он становится визуальным ориентиром для остальных блоков.
Два reusable workflow
В каталоге .agent/workflows создаются инструкции start и structure. Первая ограничивает старт только hero-секцией и задаёт стек, вторая требует разнести header, main, footer и секции по понятной структуре с общей шириной контента.
- Start запрещает модели сразу раздувать проект до целого лендинга.
- Structure приводит уже сгенерированную страницу к поддерживаемому каркасу.
Генерация и разбор первого экрана
Antigravity получает скриншот и workflow, после чего создаёт первую секцию. В ролике оцениваются крупная типографика, асимметрия, работа с воздухом и использование стандартной библиотеки иконок вместо случайных AI-SVG.
- Сначала принимается визуальный язык, затем расширяется страница.
- Анимация должна поддерживать композицию, а не конкурировать с содержанием.
Меняем только содержание
После фиксации структуры модели отдельно поручается заменить тексты на тематику магазина здорового питания, не меняя уже удачный дизайн. Это помогает не потерять типографику и композицию во время контентной адаптации.
- Контентная правка формулируется как отдельная узкая задача.
- Принятые визуальные решения остаются стабильными между итерациями.
Добавляем секции по одному референсу
Блок преимуществ строится по референсу Bento Grid, а следующая секция — по примеру из Mobbin. Каждый раз модель переносит структуру и поведение, но подстраивает цвета, шрифты и содержание под уже существующий сайт.
- Новая секция не должна выглядеть как отдельный шаблон.
- Существующий код используется как локальная дизайн-система проекта.
Прайсинг, footer и живой hero
По той же схеме добавляются тарифные карточки и footer. Затем статичное изображение томата заменяется коротким MP4, созданным в Google Flow, чтобы дать hero заметное, но лёгкое движение.
- Видео оптимизируется до небольшого размера перед добавлением на страницу.
- Анимация остаётся частью композиции, а не отдельным спецэффектом.
Финальная мобильная проверка
В конце сайт проверяется на узком экране. Неудачный перенос текста и положение элементов корректируются отдельным запросом, после чего сверяются desktop- и mobile-версии.
- Адаптивность оценивается после появления реального контента.
- Финальные правки делаются по конкретному визуальному дефекту.