Von PRD zu funktionierender Software program mit Google Antigravity

Bild vom Herausgeber

# Einführung

Erstellen eines Produktanforderungsdokument (PRD) ist ein häufiger Prozess in Produktmanagement und eine alltägliche Aufgabe in Branchen wie der Softwareentwicklung und der gesamten Technologiebranche. Aber mit einem PRD ist die Geschichte noch nicht zu Ende, und der nächste große Schritt besteht darin, daraus ein Produkt, beispielsweise eine funktionierende Software program, zu machen.

Dieser Artikel folgt aus Dieses hierin dem wir eine Reihe roher, chaotischer Informationen in ein fundiertes PRD umgewandelt haben und Sie durch denselben Anwendungsfall (eine mobilfreundliche App namens FloraFriend) führen, um dieses PRD mithilfe von Google Antigravity in einen funktionierenden Software program-Prototyp umzuwandeln.

Obwohl es im Rahmen des Artikels unpraktisch ist, den gesamten Software program-Erstellungsprozess zu zeigen, werden wir die wichtigsten Aspekte hervorheben, die Sie über die Verwendung von Antigravity zu diesem Zweck wissen sollten, zusammen mit einigen repräsentativen Auszügen der generierten Software program zur Veranschaulichung.

# Übergang von einem PRD zu einem Software program-Prototyp

Machen Sie sich bereit, denn der Prozess, den wir gleich beschreiben, ist der Ort, an dem die Magie geschieht. Bei sachgemäßer Anwendung Google Antigravity kann teilweise als leitender Ingenieur fungieren. es ist ein herunterladbare IDE Verfügbar für mehrere Betriebssysteme: Sie können es sich als eine Variante von VS-Code vorstellen, sodass Sie, anstatt nur Code einzugeben, mit KI-Agenten umgehen können, die ihn für Sie schreiben.

Der erste Schritt besteht natürlich darin, Antigravity herunterzuladen und auf Ihrem Pc zu installieren.

Das zentrale Factor, mit dem man sich in Antigravity vertraut machen sollte, ist zunächst einmal seine Widmung Agentenmanager Ansicht: ein Ort, an dem wir unsere Softwareanforderungen vorstellen. Anschließend planen, implementieren und testen autonome Agenten die erstellte Lösung.

Beginnen wir damit, es zu öffnen – ich empfehle übrigens natürlich dringend, die „Tokio-Nacht“ zu wählen! – Theme und erstellen Sie in Ihrem lokalen Datei-Explorer einen neuen, leeren Projektordner und benennen Sie ihn flora-friend-app. Wenn Sie mit VS-Code vertraut sind, wird Ihnen die Benutzeroberfläche (Benutzeroberfläche) von Antigravity sehr vertraut vorkommen.

Unten sehen Sie das Ergebnis des Öffnens eines neu erstellten Ordners mit dem Namen „Flora-Pal-App„, das derzeit leer ist:

Erste Schritte mit Antigravitation

Jetzt kommt der spannende Teil. Öffnen Sie die Agent-Supervisor-Ansicht, indem Sie ganz oben in der Leiste auf die entsprechende Schaltfläche klicken. Sie erhalten eine einsteigerfreundliche Erklärung, was Agenten im Agentenmanager tun können:

Begrüßungsbildschirm des Agent Managers

Wir senden zunächst diese Aufforderung (klicken Sie noch nicht auf die Schaltfläche „Senden“), in der Sie um einen Implementierungsplan für eine mobilfreundliche Internet-App gebeten werden:

Fungieren Sie als Senior Full Stack Engineer. Sehen Sie sich die beigefügte PRD für „FloraFriend“ an. Erstellen Sie einen umfassenden Implementierungsplan, um diese als Cell-First-Webanwendung mit Subsequent.js, Tailwind CSS und Shadcn UI zu erstellen. Schreiben Sie noch keinen Code; Generieren Sie unbedingt zuerst das Planartefakt.

Das immediate sollte von einem tatsächlichen PRD begleitet sein, zum Beispiel wie dem, den Sie möglicherweise erhalten, wenn Sie dem vorherigen gefolgt sind, verwandter Artikel über NotebookLM für die PRD-Generierung – oder auch eines Ihrer eigenen. In jedem Fall haben Sie zwei Möglichkeiten Bringen Sie das PRD an: Fügen Sie den Code entweder manuell als Teil der Eingabeaufforderung ein, direkt nach der obigen Anfrage, oder indem Sie die PRD-Datei (.docx, .pdf oder ähnlich) in den Projektordner einfügen, den wir zuvor erstellt haben – wenn Sie sich für die Possibility „Kopieren und Einfügen“ entscheiden, verwenden Sie sorgfältig die Shift + Enter Tasten auf Ihrer Tastatur, um ein paar neue Zeilen zu erstellen und die PRD direkt nach der Anfrage einzufügen, bevor die vollständige Eingabeaufforderung gesendet wird. Die gute Nachricht: Google Gemini LLMs, die Antigravity und seine Agenten antreiben, haben eine riesige Kontextfenstergröße; Mit anderen Worten: Wir können eine sehr lange Menge eingefügten Textes einfügen, um unsere Eingabeaufforderung reibungslos zu kontextualisieren.

Nach etwa einer Minute erhalten Sie möglicherweise eine Antwort, die wie folgt aussieht:

Beispielausgabe im Agent Supervisor von Antigravity

Auf der rechten Seite des Agent-Supervisor-Fensters wird eine Checkliste angezeigt, in der die Schritte des Softwareprojekts aufgelistet sind, z. B. „Subsequent.js-App initialisieren (…)“ zum Beispiel. Hier haben wir die Möglichkeit, diese Liste zu überprüfen und über die Schaltfläche „Überprüfen“ zusätzliche Aufforderungen zu senden, Elemente zu ändern oder neue hinzuzufügen, beispielsweise durch Aufforderung:

Fügen Sie den Backend-Aufgaben die „Construct-Komponente: Plantcard (mit Snooze-Logik)“ und die „Weekender-Logik“ hinzu.

Neue oder geänderte Punkte erscheinen „wie von Zauberhand“ auf der Checkliste.

Machen wir weiter und gehen wir davon aus, dass wir mit dem Plan in seiner jetzigen Type zufrieden sind. Dies ist ein kniffliger Schritt, da es nicht offensichtlich ist, die richtige Schaltfläche zum Anklicken und Weitergehen zu finden, insbesondere nach mehreren Interaktionen zur Verfeinerung. Der Schlüssel besteht darin, durch die generierten Artefaktfelder im Chat-Stream nach oben zu scrollen und das Feld mit der Bezeichnung „Implementierungsplan“ zu finden. Öffnen Sie es und klicken Sie auf der rechten Seite auf die Schaltfläche „Weiter“. Hier beginnen die Agenten voll zu agieren, indem sie Aktionen wie die Set up von Abhängigkeiten und die Erstellung des Datenbankschemas mit mehreren relevanten Tabellen über eine benannte Datei ausführen schema.sqlund so weiter. Nachfolgend finden Sie ein Beispiel für den Code, der zum Durchführen dieser Aktionen generiert wurde:

Generierte schema.sql für unsere Softwaredatenbank

Der gesamte Prozess erfolgt schrittweise und erfordert eine manuelle Überprüfung und Genehmigung durch Sie, bevor Sie mit dem nächsten Schritt fortfahren. Sie werden jedoch nach und nach sehen, wie die Checkliste für die Projektplanung angekreuzt wird. Manchmal müssen Sie einige Abhängigkeiten manuell in Ihrem PATH installieren oder ähnliche Anforderungen erfüllen, damit die Brokers weiterhin ihre Arbeit erledigen können. Aber im Grunde genügt eine sorgfältige Interaktion und Aufforderung!

Als letztes Beispiel könnte ein Codeauszug für die endgültige App so aussehen:

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

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

export default perform PlantCard({ title, 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">{title}</h3>
          <p className="text-sm text-slate-500 italic">{species}</p>
        </div>
        {/* Visible Cue for Overdue Vegetation */}
        {isOverdue && (
          <Badge variant="harmful" className="animate-pulse">
            Thirsty!
          </Badge>
        )}
      </div>

      <div className="mt-4 flex gap-2">
        <Button 
          onClick={() => onWater(title)}
          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 Function" - Snooze Button */}
        <Button 
          variant="define" 
          onClick={() => onSnooze(title)}
          title="Push this process 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">
        Subsequent scheduled: {nextWatering.toLocaleDateString()}
      </p>
    </Card>
  );
}

# Zusammenfassung

In diesem Artikel wird gezeigt, wie Sie Antigravity von Google, eines der neuesten verfügbaren Instruments in der Google AI-Suite, nutzen können, um Software program-Prototypen zu erstellen. Insbesondere haben wir die Logik veranschaulicht, eine PRD in einen Software program-Prototyp umzuwandeln.

Iván Palomares Carrascosa ist ein führender Autor, Redner und Berater in den Bereichen KI, maschinelles Lernen, Deep Studying und LLMs. Er schult und leitet andere darin, KI in der realen Welt zu nutzen.