Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Пошаговый гайд по созданию приложений через Google Stitch и Anti-Gravity. Автоматизация дизайна, MCP-протоколы и деплой на Vercel без кода.
🎯 О чём этот конспект: Разбор связки двух мощнейших инструментов от Google: Stitch (AI-агент для UI/UX дизайна) и Anti-Gravity (агентная среда разработки/ADA). В видео показано, как объединить их через MCP-протокол для создания полноценных веб-приложений «под ключ» — от генерации макета до деплоя в интернет.
👤 Кому будет полезно: Вайбкодерам, UI/UX дизайнерам, фаундерам стартапов и всем, кто хочет создавать работающие IT-продукты без написания кода вручную.
✨ Что получите: Пошаговый алгоритм настройки автономного цикла (loop), где AI сам проектирует дизайн в Stitch, пишет код в Anti-Gravity и выкладывает готовый сайт на GitHub и Vercel.
Контекст: Google Stitch — это специализированный AI-инструмент для создания интерфейсов, работающий на модели Gemini 1.5 Flash (лучшая для визуала). Главная фишка — режим 3X, который генерирует сразу три варианта дизайна параллельно. Вы можете скармливать ему URL конкурентов или референсы, чтобы AI мгновенно копировал стиль и адаптировал под ваши задачи.
Выгода: Сокращение времени на прототипирование с нескольких дней до пары минут. Бесплатная генерация качественных ассетов через встроенную модель Imagen (Nano Banana).
Как применить:
Vercelapple.com) или загрузите скриншот.Результат: Готовый многостраничный дизайн в высоком разрешении, который можно экспортировать в Figma или в виде кода (React/ZIP).
Контекст: Anti-Gravity — это агентная среда (аналог VS Code + AI агенты), которая умеет запускать терминал, писать код и тестировать его. Чтобы Anti-Gravity мог напрямую управлять дизайном в Stitch, используется протокол MCP (Model Context Protocol). Это превращает ручной перенос макетов в автоматизированный процесс.
Выгода: Агенты могут сами создавать проекты в Stitch, выкачивать из них код и дорабатывать его до рабочего состояния без вашего участия.
Как применить:
MCP Servers -> введите Stitch -> Install.Используй Stitch MCP, получи все мои проекты за последние 7 дней.Я загрузил код приложения. Запусти его на localhost, пожалуйста. Используй модель Gemini 1.5 Pro.Результат: Anti-Gravity видит все ваши дизайны и может превращать их в интерактивные React-приложения.
Контекст: Это «чит-код» вайбкодинга. Вместо того чтобы контролировать каждый шаг, вы настраиваете скиллы (Stitch Skills), которые позволяют агенту работать циклично. Агент сам идет в Stitch, создает проект, генерирует страницы по очереди, проверяет их и переходит к следующей задаче.
Выгода: Возможность параллельно создавать десятки страниц или даже несколько разных проектов одновременно, пока вы занимаетесь другими делами.
Как применить:
Установи эти скилы в репозиторий для Stitch: [ссылка на GitHub]Используй MCP и Stitch Loop Skill. Создай два отдельных проекта в Stitch.
Первый: интернет-магазин кофе. Второй: личный блог.
Используй стиль Apple, сделай всё на русском, примени режим 3X для выбора лучших вариантов.Результат: Полностью готовые структуры проектов в Stitch без единого клика в интерфейсе дизайнера.
Контекст: Финальный этап — превращение кода в публичную ссылку. Мы используем GitHub как хранилище и Vercel как хостинг. Благодаря связке, любые правки, которые агент внесет в код позже, будут автоматически отображаться на живом сайте (CI/CD).
Выгода: Профессиональный процесс разработки, доступный новичку. Сайт доступен всему миру по стабильной ссылке.
Как применить:
Собери это в полноценное приложение и запуш на мой GitHub через MCP сервер.
Используй Brandbook гайдлайны из Stitch.Add New Project, импортируйте ваш репозиторий и нажмите Deploy.Приложение не загрузилось на Vercel. Вот ошибка: [вставить текст ошибки]. Исправь код и запуш обновление.Результат: Работающее веб-приложение, доступное по адресу your-project.vercel.app.
В: Что делать, если 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