От PRD к работающему ПО с Google Antigravity

Введение

Составление документа требований к продукту (PRD) входит в стандартные задачи продуктового менеджмента, особенно в разработке софта и IT-сфере. Но после его создания начинается ключевой этап — превращение описания в реальный продукт, такой как готовое приложение.

Мы продолжаем разбирать пример мобильного веб-приложения FloraFriend, где ранее из сырых данных сгенерировали PRD с помощью NotebookLM. Теперь на основе этого документа создадим прототип с использованием Google Antigravity.

Полностью уместить процесс разработки в статью не получится, поэтому разберем основные моменты работы с инструментом и приведем фрагменты сгенерированного кода для наглядности.

От PRD к прототипу ПО

Дальше начинается самое интересное — именно здесь проявляется вся сила инструмента. При правильном подходе Google Antigravity заменяет ведущего инженера. Это скачиваемая среда разработки для разных ОС — представьте VS Code, но с ИИ-агентами, которые пишут код вместо вас.

Сначала скачайте и установите Antigravity на компьютер.

Главный элемент интерфейса — панель Agent Manager: сюда вводят требования к софту, а агенты сами планируют, реализуют и проверяют решение.

Запустите среду — кстати, советую выбрать тему "Tokyo Night" — и в файловом менеджере создайте пустую папку проекта с названием flora-friend-app. Если вы работали с VS Code, интерфейс покажется знакомым.

Вот как выглядит открытая пустая папка flora-friend-app:

Теперь перейдите в Agent Manager, кликнув кнопку в верхней панели. Появится подсказка для новичков о возможностях агентов:

Начните с такого промта (не отправляйте пока), который запрашивает план реализации мобильного веб-приложения:

Act as a Senior Full Stack Engineer. Review the attached PRD for 'FloraFriend'. Create a comprehensive implementation plan to build this as a mobile-first web app using Next.js, Tailwind CSS, and Shadcn UI. Do not write code yet; strictly generate the Plan Artifact first.

К этому промту нужно добавить PRD — например, тот, что получился из предыдущей статьи про NotebookLM, или свой собственный. Варианты прикрепления: вставить текст прямо в промт после запроса или положить файл (.docx, .pdf) в папку проекта. Для вставки используйте Shift + Enter для переноса строк. Модели Google Gemini в Antigravity поддерживают огромный контекст, так что длинный текст влезет без проблем.

Через минуту ответ может выглядеть так:

Справа в окне менеджера агентов возникнет чек-лист с шагами проекта, вроде "initialize Next.js app (...)". Можно проверить список и доработать его через кнопку "Review", отправив доппромт:

Add the "build component: Plantcard (with snooze logic)" and the "weekender logic" to the backend tasks.

Новые пункты мгновенно добавятся в чек-лист.

Предположим, план готов. Чтобы продолжить, проскролльте чат вверх, найдите артефакт "Implementation Plan", откройте его и нажмите "Proceed" справа. Агенты активируются: установят зависимости, создадут схему БД в файле schema.sql с нужными таблицами и выполнят другие действия. Пример сгенерированной схемы:

Процесс идет поэтапно: на каждом шаге требуется ваше подтверждение. Чек-лист постепенно заполняется галочками. Иногда придется вручную установить пакеты в PATH или выполнить похожие действия, чтобы агенты продолжили. Главное — внимательное общение с ними через промты!

Вот пример фрагмента кода для финального приложения:

// components/PlantCard.tsx
import { useState } from 'react';
import { Card, Button, Badge } from '@/components/ui';
import { WaterDropIcon, SnoozeIcon } from '@/icons';

interface PlantProps {
  name: string;
  species: string;
  nextWatering: Date;
  onSnooze: (id: string) => void;
  onWater: (id: string) => void;
}

export default function PlantCard({
  name,
  species,
  nextWatering,
  onSnooze,
  onWater
}: PlantProps) {
  const isOverdue = new Date() > nextWatering;

  return (
    <Card className="p-4 border-l-4 border-green-500 shadow-sm hover:shadow-md transition-all">
      <div className="flex justify-between items-start">
        <div>
          <h3 className="font-bold text-lg text-slate-800">{name}</h3>
          <p className="text-sm text-slate-500 italic">{species}</p>
        </div>
        {/* Visual Cue for Overdue Plants */}
        {isOverdue && (
          <Badge variant="destructive" className="animate-pulse">
            Thirsty!
          </Badge>
        )}
      </div>
      <div className="mt-4 flex gap-2">
        <Button
          onClick={() => onWater(name)}
          className="flex-1 bg-green-600 hover:bg-green-700 text-white"
        >
          <WaterDropIcon className="mr-2 h-4 w-4" />
          Water Now
        </Button>
        {/* The "Matt Feature" - Snooze Button */}
        <Button
          variant="outline"
          onClick={() => onSnooze(name)}
          title="Push this task to the weekend"
        >
          <SnoozeIcon className="h-4 w-4 text-slate-600" />
        </Button>
      </div>
      <p className="text-xs text-slate-400 mt-2 text-center">
        Next scheduled: {nextWatering.toLocaleDateString()}
      </p>
    </Card>
  );
}

Итоги

Материал демонстрирует, как применять Google Antigravity — один из свежих инструментов в экосистеме Google AI — для создания прототипов софта. Особое внимание уделено превращению PRD в рабочий прототип.