1. Введение
В этом практическом занятии вы создадите готовый к использованию веб-сайт, объединив дизайн, основанный на искусственном интеллекте, с средой разработки, ориентированной на агентов. Вы будете использовать Google Stitch для генерации высококачественного пользовательского интерфейса, а затем подключите его к IDE Antigravity через протокол контекста модели (MCP) . Наконец, вы используете автономного агента для получения «ДНК дизайна» и реализации идеально проработанного приложения React.
Что вы будете делать
- Создание пользовательского интерфейса в Stitch: используйте естественный язык для создания полномасштабного веб-дизайна в Google Stitch.
- Подключение приложения Antigravity к проекту Stitch с помощью протокола контекста модели (MCP) .
- Автономная реализация: используйте вкладку «Агенты» в Antigravity для получения дизайн-токенов и создания структуры проекта React/Tailwind.
- Проверка и уточнение: используйте встроенный браузер для "Vibe Check" кода, чтобы сравнить его с исходным дизайном.
Что вы узнаете
- Как использовать Google Stitch для быстрого создания высококачественных прототипов пользовательского интерфейса.
- Как настроить серверы MCP в среде разработки Antigravity IDE.
- Как использовать автономных агентов для преобразования метаданных визуального дизайна в модульный код.
Что вам понадобится
- Веб-браузер Chrome
- Установлена среда разработки Antigravity IDE.
- Аккаунт Google Stitch
- Ключ API Stitch
- Node.js (версия 18+) установлен локально.
Прежде чем начать
- В консоли Google Cloud на странице выбора проекта выберите или создайте проект Google Cloud.
- Убедитесь, что для вашего облачного проекта включена функция выставления счетов. Узнайте, как проверить, включена ли функция выставления счетов для проекта .
Для получения кредитов Google Cloud: Чтобы использовать Antigravity с проектами Google Cloud, активируйте свои бесплатные кредиты Google Cloud, перейдя по этой ссылке . Вы можете следовать инструкциям здесь , чтобы активировать кредиты и создать новый проект.
- Перейдите на сайт stitch.withgoogle.com и убедитесь, что у вас есть возможность войти в систему.
- Убедитесь, что у вас установлена среда разработки Antigravity IDE (доступна по адресу antigravity.google ).
2. Создайте дизайн в Google Stitch.
Агенту необходим визуальный «источник истины», за которым он будет следить. Прежде чем писать код, мы должны определить эстетику.
- Доступ к платформе: перейдите по адресу stitch.withgoogle.com .
- Выберите тип проекта: на главной панели управления найдите переключатель «Начать новый дизайн» . Нажмите «Веб» , чтобы убедиться, что ваш дизайн оптимизирован для макетов, отображаемых в браузере.
- Выберите свою модель: Щелкните раскрывающееся меню модели (в данный момент отображается 3.0 Flash ) в окне запроса. Убедитесь, что выбрана модель Gemini 3 для наиболее продвинутого анализа и генерации макета.
- Опишите своё видение: В текстовом поле с надписью «Опишите свой проект» введите свой запрос:
«Разработайте современную целевую страницу SaaS для стартапа в сфере космических технологий под названием LaunchPad. Используйте палитру темно-синего и неоново-фиолетового цветов. Включите главный раздел с кнопкой «Начать», трехколоночную сетку характеристик и таблицу цен glassmorphism». 5. Генерация: Нажмите на значок стрелки (рядом с селектором модели), чтобы начать процесс генерации. 6. Доработка и название: После генерации пользовательского интерфейса дайте проекту имя в верхнем заголовке. Назовите его LaunchPad . Вы можете использовать боковую панель чата для уточнения любых конкретных элементов перед переходом в IDE.
[!TIP] Вы также можете выбрать из
Попробуйте выполнить эти задания.
Раздел, если вам нужен быстрый старт.
3. Настройка антигравитационного MCP
Чтобы позволить Antigravity Agent «прочитать» ваш проект, необходимо сгенерировать защищенный ключ API и добавить сервер Stitch MCP.
Сгенерируйте ключ API Stitch.
- В Google Stitch нажмите на свою фотографию профиля в правом верхнем углу.
- Выберите «Настройки стежка» из выпадающего меню.
- Перейдите в раздел «Ключ API» .
- Нажмите кнопку «Создать ключ» .
- Скопируйте ключ: Немедленно скопируйте сгенерированный ключ и сохраните его в надежном месте. Он понадобится вам на следующем шаге.
Настройте Stitch MCP в режиме Antigravity.
- Откройте среду разработки Antigravity IDE .
- Откройте менеджер агентов.
В любой момент вы можете переключаться между Диспетчером агентов и редактором, нажав CMD+E (Mac) или CTRL+E (Windows), либо с помощью кнопок «Открыть редактор» и «Открыть Диспетчер агентов» в правом верхнем углу строки меню.
- Нажмите + Открыть рабочее пространство .
Чтобы начать новую беседу в рамках рабочего пространства, выберите нужное рабочее пространство на вкладке «Начать беседу» или нажмите кнопку «Плюс» рядом с названием рабочего пространства на боковой панели.
- Нажмите «Открыть новую рабочую область», назовите рабочую область
LaunchPad-Projectи выберите локальный каталог. Это гарантирует, что у агента будет определенная корневая папка для генерации файлов, не загромождая другие проекты.
Настройте Stitch MCP.
- В новом рабочем пространстве вернитесь в Диспетчер агентов (CMD+E для Mac или CTRL+E для Windows) и выберите Серверы MCP .
Откройте магазин MCP, используя выпадающее меню "..." в верхней части панели агента редактора.
Antigravity поддерживает протокол контекста модели (MCP), стандарт, позволяющий редактору безопасно подключаться к вашим локальным инструментам, базам данных и внешним сервисам. Эта интеграция предоставляет ИИ контекст в реальном времени, выходящий за рамки просто открытых в редакторе файлов.
MCP выступает в качестве связующего звена между Antigravity и Google Stitch . Вместо ручного экспорта дизайн-токенов или копирования шестнадцатеричных кодов и метаданных макета в редактор, MCP позволяет Antigravity получать Design DNA непосредственно из вашего проекта Stitch, когда это необходимо.
- Найдите "Stitch" и нажмите " Установить" .
- Когда появится соответствующий запрос, вставьте свой API-ключ Stitch в поле конфигурации.
- Проверка: В чате агента введите:
List my Stitch projects.Если в ответ отобразитсяLaunchPad, значит, вы готовы.
- Проверка: В чате с агентом введите:
List my Stitch projects.Если агент вернетLaunchPad, значит, мост успешно настроен.
4. Получение контекста проектирования
Теперь агенту необходимо обработать метаданные проекта, чтобы обеспечить точность кода.
- В чате Antigravity напишите: «Используйте Stitch MCP, чтобы загрузить проект 'LaunchPad'. Извлеките цветовую палитру и типографику, затем сгенерируйте файл
DESIGN.mdв корневом каталоге». - Проверка: Откройте созданный файл
DESIGN.md, чтобы увидеть шестнадцатеричные коды и правила компоновки, извлеченные агентом.
5. Внедрение (Разработка)
Используйте агента для преобразования дизайна в работающее приложение React.
- Введите команду "Сборка":
«Сейчас я хочу создать полноценный веб-сайт. Использовать React и Tailwind CSS. Убедиться, что компоненты модульные. После завершения запустить сервер разработки и показать мне результат во встроенном браузере». 2. Наблюдайте за работой агента: он создаст структуру проекта в терминале, напишет компоненты в редакторе и откроет предварительный просмотр во встроенном браузере.
6. Пересмотр и доработка
Проверьте выходные данные и используйте агент для исправления любых визуальных несоответствий.
- Сравните результат, полученный через встроенный браузер, с вашим исходным дизайном Stitch.
- Если какой-либо элемент (например, отступы кнопки или толщина шрифта) не соответствует, сообщите агенту: «Отступы кнопки „Начать“ немного смещены. Вернитесь к дизайну Stitch и обновите классы Tailwind».
- Агент повторно получит контекст проектирования и мгновенно применит исправление.
7. Резюме и дальнейшие шаги
Поздравляем! Вы успешно преодолели разрыв между высокоточным проектом и функциональным кодом, используя Antigravity и Stitch MCP.
Краткое описание ваших действий:
- Разработал пользовательский интерфейс в Stitch с использованием Gemini 3.
- Сгенерирован защищенный API-ключ и настроен Antigravity MCP .
- Использовал автономного агента для создания и проверки сайта на основе React + Tailwind .