3 сайта с нуля в Google Antigravity. Gemini и Claude Opus собирают магазин, лендинг и брутализм

Три сайта, три подхода к ИИ-разработке, один ролик. Первый, магазин кофейного бренда: ИИ сам придумывает структуру, тексты и визуал. Второй, лендинг фитнес-клуба: референс с Dribbble переносится в код блок за блоком. Третий, автосервис в стиле брутализм: сначала дизайн в Google Stitch, потом сборка в Antigravity. Каждый проект сложнее предыдущего. Сразу предупреждаю: я не гуру фронтенда, а показываю, как ИИ ускоряет работу в десятки и сотни раз, и всё, что делает нейросеть, нужно перепроверять.

Знакомство с Antigravity

Antigravity позиционируется как agent first: агент сам пишет код, строит интерфейсы, решает фоновые задачи и ищет нужную информацию. Под капотом форк Visual Studio Code, поэтому проводник, контроль версий, отладчик и расширения привычные. Скачайте версию для вашей системы, перетащите иконку в Applications (на Mac), при первом запуске выберите начало с чистого листа и режим Agent Driven Development, чтобы дать помощнику максимум свободы, и войдите через Google.

Справа панель ИИ-агента с выбором модели: по умолчанию Gemini 3 Pro, но есть и Claude от Anthropic, и открытая модель от OpenAI. Две уникальные функции:

• Agent Manager: отдельная вкладка для сложных фоновых задач, которые несколько агентов выполняют параллельно.
• Browser Control: при установленном Chrome агент сам открывает браузер, кликает, скроллит и тестирует написанный код, делает скриншоты, может записать видео и анализирует логи.

Из России при входе с обычного аккаунта можно получить ошибку «Сервис недоступен в вашем регионе»: я сменил регион аккаунта через настройки конфиденциальности Google, подробная инструкция есть в моём Telegram. Одобрение занимает от 30 минут до суток, бывают отказы, тогда запрос подают повторно.

Проект 1. Магазин кофе, полная генерация

Задача: онлайн-магазин D2C-бренда молотого и зернового кофе с доставкой, максимально быстро. Я загружаю в проект файлы Rules и Skills: правила, шаблоны и рабочие процессы, объединённые управляющим навыком. Это обычные текстовые Markdown-файлы, где прописан нужный стиль (здесь стандартный премиальный). Графических референсов нет, ИИ опирается только на текстовый стиль.

ИИ формирует рабочий план, запускает Nano Banana Pro для картинок товаров и стартует проект. Агент сам листает страницу в субраузере, тестирует элементы и проверяет логи. Результат: выдержан стиль D2C-бренда, есть презентация товаров, мобильная адаптация, рабочая корзина. Проблема: картинки кофе вышли в разном стиле, потому что при потоковой генерации ИИ трудно держать единую концепцию.

После этого у бренда появилась единая айдентика. Дальше я попросил добавить информационные блоки: агент сам просматривает изменения, оценивает результат, вносит правки и пишет документацию проекта. Визуальные правки без кода: откройте сгенерированную документацию, выделите проблемную область (у меня это странная полоса-переход) и добавьте комментарий. Комментарии подтягиваются в чат, и в режиме планирования агент сначала продумывает решение, потом правит. Проект можно развивать: подключить n8n, базу данных, CMS или оплату.

Проект 2. Фитнес-клуб, копирование референса по блокам

Задача: перенести стиль концепта с Dribbble. Правила и Skills остаются теми же, создаётся новая папка Second Project. Структуру берём из референса, цветовую схему можно слегка изменить. Работаем поблочно: скриншот блока, промпт, агент составляет план и генерирует.

1. Первый экран

   Фоновая картинка, анимации, активные ссылки на магазины и приложения. Не понравился сгенерированный фон: я попросил другой, получил дым в зале и вернул первый вариант. Качество поднял сторонним приложением для апскейла.

2. Второй блок

   Агент выдал HTML без CSS и забыл его добавить. Достаточно указать на ошибку, и он исправляет.

3. Третий блок с каруселью

   ИИ плохо справляется со сложными слайдерами. Прокрутка работала криво, секция обрезалась. Я потребовал зайти на сайт как агент, проверить на разных разрешениях и поправить отступы. Для таких случаев есть сайты с готовыми HTML и CSS секциями, их можно скачать и скормить агенту.

4. Истории успеха, карта, подвал

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

5. Глобальное ревью

   Я переключился на Claude Opus 4.6 с рассуждением и поручил перепроверить весь проект. Модель сделала скриншоты, сама выделила, что исправлять, вычистила мелкие недочёты, поправила анимации, довела слайдеры и добавила бургер-меню.

Под конец я указал мастер-картинку и попросил сгенерировать остальные изображения строго по ней: так стиль сохранился. Мобильная версия на iPhone 14 Pro Max: ничего не вылезает за края, анимации и прокрутка плавные, все элементы кликабельны.

Проект 3. Автосервис в брутализме через Google Stitch

Брутализм это крупные шрифты и нестандартная сетка, а нейросети обычно всё выравнивают и портят стиль. Поэтому здесь сначала дизайн, потом код. Я делаю скриншот референса с Dribbble и иду в Google Stitch: это ИИ для UI/UX-дизайна от Google на Gemini 3 Flash, Gemini 3 Pro и Nano Banana Pro. Его плюсы: несколько вариантов на выбор, экспорт готового кода и возможность подключить Antigravity как MCP-сервер.

Stitch написал стартовую кодовую базу и подготовил эталонные скриншоты. Дальше всё переносится в Antigravity: это имитирует частый сценарий, когда вы загружаете готовый сайт и просите доработать.

1. Собрать страницу и догенерировать недостающие блоки

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

2. Перевести на русский и провести ревью кода

   Одна комплексная задача: перевод, проверка вёрстки. Есть небольшие грехи с подбором шрифтов. Светлая и тёмная темы переключаются, кнопка записи ведёт на рабочую форму, которую легко подключить к CMS для заявок.

3. Проверить адаптивность

   Агент сам протестировал мобильную и планшетную версии и поправил отступы там, где вёрстка ломалась.

4. Доработать карту филиалов

   ИИ сгенерировал точки Москвы и Санкт-Петербурга: это не плагин Яндекса или Google, а кастомная векторная сборка. На первой итерации слабо. Я отправил три скриншота недочётов, потом потребовал сделать карту по-дизайнерски и переключил модель на Claude Opus 4.6: карта подтянулась, брутализм выдержан.

Что сработало

Главы ролика

12 глав, весь ролик 22 минуты. Нажмите на главу, и ролик начнётся с неё

1. 0:00Вступление, три проекта и подходы к ИИ-разработке3 минуты
2. 3:03Знакомство с Antigravity2 минуты
3. 5:24Agent Manager и Browser Controlменьше минуты
4. 6:08Проект 1, магазин кофе, полная автономная генерация2 минуты
5. 8:16Проблема потоковой генерации, единый стиль картинок1 минута
6. 9:26Визуальные правки без кода1 минута
7. 10:29Проект 2, фитнес-клуб, копирование дизайна с Dribbble поблочно2 минуты
8. 12:47Борьба с кривой вёрсткой и сломанной каруселью2 минуты
9. 14:36Глобальное ревью на Claude Opus 4.62 минуты
10. 16:25Проект 3, брутализм и Google Stitch2 минуты
11. 18:10Перевод сайта на русский и проверка адаптивностименьше минуты
12. 18:56Сложная векторная карта с филиалами3 минуты

Не открывается плеер? Смотреть на YouTube