🎯 О чём этот конспект: Разбор связки двух мощнейших инструментов от Google: Stitch (AI-агент для UI/UX дизайна) и Anti-Gravity (агентная среда разработки/ADA). В видео показано, как объединить их через MCP-протокол для создания полноценных веб-приложений «под ключ» — от генерации макета до деплоя в интернет.

👤 Кому будет полезно: Вайбкодерам, UI/UX дизайнерам, фаундерам стартапов и всем, кто хочет создавать работающие IT-продукты без написания кода вручную.

✨ Что получите: Пошаговый алгоритм настройки автономного цикла (loop), где AI сам проектирует дизайн в Stitch, пишет код в Anti-Gravity и выкладывает готовый сайт на GitHub и Vercel.

1. Google Stitch: Быстрый UI/UX дизайн на стероидах

Контекст: Google Stitch — это специализированный AI-инструмент для создания интерфейсов, работающий на модели Gemini 1.5 Flash (лучшая для визуала). Главная фишка — режим 3X, который генерирует сразу три варианта дизайна параллельно. Вы можете скармливать ему URL конкурентов или референсы, чтобы AI мгновенно копировал стиль и адаптировал под ваши задачи.

Выгода: Сокращение времени на прототипирование с нескольких дней до пары минут. Бесплатная генерация качественных ассетов через встроенную модель Imagen (Nano Banana).

Как применить:

• Шаг 1: Настройка референса — В поле ввода источников вставьте URL (например, apple.com) или загрузите скриншот.
• Шаг 2: Промптинг — Опишите структуру страниц. Для лучшего результата прогоните запрос через Claude/ChatGPT для детализации.
• Шаг 3: Итерация — Используйте инструмент «Аннотация», чтобы кликнуть на конкретный блок и попросить AI изменить только его (например, «замени картинку на более футуристичную»).

Результат: Готовый многостраничный дизайн в высоком разрешении, который можно экспортировать в Figma или в виде кода (React/ZIP).

2. Подключение Anti-Gravity к Stitch через MCP

Контекст: Anti-Gravity — это агентная среда (аналог VS Code + AI агенты), которая умеет запускать терминал, писать код и тестировать его. Чтобы Anti-Gravity мог напрямую управлять дизайном в Stitch, используется протокол MCP (Model Context Protocol). Это превращает ручной перенос макетов в автоматизированный процесс.

Выгода: Агенты могут сами создавать проекты в Stitch, выкачивать из них код и дорабатывать его до рабочего состояния без вашего участия.

Как применить:

• Шаг 1: Установка MCP сервера — В Anti-Gravity нажмите MCP Servers -> введите Stitch -> Install.
• Шаг 2: Получение API ключа — Перейдите по ссылке в настройках Stitch, создайте API-key и вставьте его в Anti-Gravity.
• Шаг 3: Проверка связи — Дайте агенту команду:

Используй Stitch MCP, получи все мои проекты за последние 7 дней.

• Шаг 4: Запуск локально — Попросите агента развернуть код на localhost для предпросмотра:

Я загрузил код приложения. Запусти его на localhost, пожалуйста. Используй модель Gemini 1.5 Pro.

Результат: Anti-Gravity видит все ваши дизайны и может превращать их в интерактивные React-приложения.

3. Автономный Loop: Создание приложений «на автопилоте»

Контекст: Это «чит-код» вайбкодинга. Вместо того чтобы контролировать каждый шаг, вы настраиваете скиллы (Stitch Skills), которые позволяют агенту работать циклично. Агент сам идет в Stitch, создает проект, генерирует страницы по очереди, проверяет их и переходит к следующей задаче.

Выгода: Возможность параллельно создавать десятки страниц или даже несколько разных проектов одновременно, пока вы занимаетесь другими делами.

Как применить:

• Шаг 1: Установка скиллов — Скопируйте URL репозитория со скиллами (из описания видео) и дайте команду в Anti-Gravity:

Установи эти скилы в репозиторий для Stitch: [ссылка на GitHub]

• Шаг 2: Настройка Docker и GitHub MCP — Для работы скиллов установите Docker Desktop и подключите GitHub через персональный токен (Classic) в настройках MCP.
• Шаг 3: Запуск цикла — Используйте промпт для массовой генерации:

Используй MCP и Stitch Loop Skill. Создай два отдельных проекта в Stitch. 
Первый: интернет-магазин кофе. Второй: личный блог. 
Используй стиль Apple, сделай всё на русском, примени режим 3X для выбора лучших вариантов.

Результат: Полностью готовые структуры проектов в Stitch без единого клика в интерфейсе дизайнера.

4. Деплой: Вывод приложения в Production (GitHub + Vercel)

Контекст: Финальный этап — превращение кода в публичную ссылку. Мы используем GitHub как хранилище и Vercel как хостинг. Благодаря связке, любые правки, которые агент внесет в код позже, будут автоматически отображаться на живом сайте (CI/CD).

Выгода: Профессиональный процесс разработки, доступный новичку. Сайт доступен всему миру по стабильной ссылке.

Как применить:

• Шаг 1: Создание репозитория — Создайте пустой репо на GitHub и дайте ссылку агенту.
• Шаг 2: Пуш кода — Промпт для агента:

Собери это в полноценное приложение и запуш на мой GitHub через MCP сервер. 
Используй Brandbook гайдлайны из Stitch.

• Шаг 3: Деплой на Vercel — Зайдите на Vercel, нажмите Add New Project, импортируйте ваш репозиторий и нажмите Deploy.
• Шаг 4: Исправление ошибок — Если Vercel выдает ошибку (например, 404 или билд упал), скопируйте лог ошибки и отправьте агенту в Anti-Gravity:

Приложение не загрузилось на Vercel. Вот ошибка: [вставить текст ошибки]. Исправь код и запуш обновление.

Результат: Работающее веб-приложение, доступное по адресу your-project.vercel.app.

FAQ

В: Что делать, если Anti-Gravity не доступен в моем регионе (РФ)?

О: Используйте гайды по обходу ограничений (через смену DNS или прокси), которые автор канала «Мастадонт» выкладывает в своем закрепленном сообщении в Telegram. Без этого зайти в среду разработки Google может быть проблематично.

В: Сколько это стоит?

О: На данный момент инструменты находятся в бета-тесте. Stitch бесплатен, Anti-Gravity предоставляет щедрые лимиты токенов. Vercel имеет бесплатный Tier для хобби-проектов.

В: Можно ли редактировать дизайн после того, как агент написал код?

О: Да. Вы можете вернуться в Stitch, внести правки в UI, а затем попросить агента в Anti-Gravity «подтянуть» обновленные стили в существующий код через MCP.

В: Обязательно ли знать React или Python?

О: Нет. В этом и суть вайбкодинга. Вы выступаете в роли архитектора и контролера, а всю техническую работу (написание компонентов, настройка API) выполняют агенты.

В: Безопасно ли подключать карту к Vercel?

О: Будьте осторожны. Если ваше приложение станет вирусным, бесплатный лимит может кончиться. Обязательно попросите AI (ChatGPT/Claude) написать инструкцию, как выставить лимиты потребления (Spend Management) в настройках вашего хостинга.

Конспект создан на основе видео «Google Stitch + Anti-Gravity: Новая эра AI разработки» канала Мастадонт. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/2idtoxMSyAY