Picture by Editor
# Introduction
Making a Product Necessities Doc (PRD) is a typical course of in product administration and a commonplace job in sectors like software program improvement and the tech trade as an entire. However the story does not finish with a PRD, and the subsequent massive step is popping it right into a product, e.g. a functioning software program.
This text follows up from this one, through which we turned a set of uncooked, messy items of knowledge right into a grounded PRD, and navigates you thru the identical use case (a mobile-friendly app known as FloraFriend) to show this PRD right into a functioning software program prototype utilizing Google Antigravity.
Whereas displaying the complete software program creation course of is impractical inside the scope of the article, we’ll spotlight the important thing elements to find out about utilizing Antigravity to this finish, together with some consultant excerpts of the generated software program for illustrative functions.
# Shifting From a PRD to a Software program Prototype
Prepare, as the method we’re about to explain is the place the magic occurs. If used correctly, Google Antigravity can partly act as a lead engineer. It’s a downloadable IDE accessible for a number of working programs: you may image it as a twist of VS Code, such that as an alternative of merely typing code, you may deal with AI brokers that may write it for you.
Evidently, step one is downloading Antigravity and putting in it in your machine.
The central aspect to familiarize with in Antigravity, to begin with, is its devoted Agent Supervisor view: a spot the place we introduce our software program necessities. After that, autonomous brokers will plan, implement, and even check the answer constructed.
Let’s begin by opening it — I extremely advocate selecting the “Tokyo Night time”, after all, by the best way! — theme and, in your native file explorer, create a brand new, empty mission folder, naming it flora-friend-app. In case you are acquainted with VS Code, you may discover Antigravity’s UI (Person Interface) very acquainted.
Under you may see the results of opening a newly created folder known as “flora-friend-app“, which is at present empty:
First steps with Antigravity
Now comes the thrilling half. Open the Agent Supervisor view by clicking the devoted button on the bar on the very high. You will note a beginner-friendly rationalization of what brokers within the agent supervisor can do:
Welcome display of the Agent Supervisor
We are going to ship this immediate to start with (don’t click on the ‘ship’ button but) that asks for an implementation plan for a mobile-friendly Internet app:
Act as a Senior Full Stack Engineer. Evaluate the hooked up PRD for ‘FloraFriend’. Create a complete implementation plan to construct this as a mobile-first net app utilizing Subsequent.js, Tailwind CSS, and Shadcn UI. Don’t write code but; strictly generate the Plan Artifact first.
This immediate needs to be accompanied by an precise PRD, as an example, just like the one it’s possible you’ll get should you adopted the earlier, associated article about NotebookLM for PRD era — or certainly one of your personal, for that matter. Both approach, you might have two most important choices to connect the PRD: both manually paste the code as a part of the immediate, proper after the above request, or by incorporating the PRD file (.docx, .pdf, or comparable) within the mission folder we created earlier — should you go for the copy-paste choice, rigorously use the Shift + Enter keys in your keyboard to make a few new strains and pasting the PRD proper after the request, earlier than sending the complete immediate. The nice information: Google Gemini LLMs, which gas Antigravity and its brokers, have an enormous context window dimension; in different phrases, we are able to embody a really lengthy bunch of pasted textual content to contextualize our immediate in a frictionless vogue.
After a minute or so, it’s possible you’ll get a response that appears like this:
Instance output in Antigravity’s Agent Supervisor
We are able to see a guidelines seem on the right-hand aspect of the agent supervisor window, with software program mission steps being listed, equivalent to “initialize Subsequent.js app (…)” as an example. Right here, we’ve got the choice of reviewing this listing and sending further prompts by way of the “Evaluate” button to amend gadgets or add new ones, for instance, by prompting:
Add the “construct element: Plantcard (with snooze logic)” and the “weekender logic” to the backend duties.
New or amended gadgets will “magically” seem on the guidelines.
Let’s transfer on and assume we’re pleased with the plan as it’s. This can be a difficult step, as discovering the proper button to click on on and transfer ahead just isn’t apparent, particularly after a number of interactions for refinement. The hot button is to scroll up by way of the generated artifact containers within the chat stream and discover the one labeled as “Implementation Plan”. Open it and, on the right-hand aspect, click on on the “Proceed” button. That is the place brokers begin absolutely performing, by executing actions like putting in dependencies, creating the database schema with a number of related tables by way of a file named schema.sql, and so forth. Under is an instance of the code generated for enterprise these actions:
Generated schema.sql for our software program database
Your complete course of is step-by-step, manually requiring evaluation and approval in your finish earlier than continuing to the subsequent step, however you’ll step by step see how the mission planning guidelines will get containers ticked. Typically you may must manually set up some dependencies in your PATH or carry out comparable necessities to let the brokers proceed doing their job. However in essence, all it takes is cautious interplay and prompting!
For a remaining instance, that is what a code excerpt for the ultimate app may appear to be:
// parts/PlantCard.tsx
import { useState } from 'react';
import { Card, Button, Badge } from '@/parts/ui';
import { WaterDropIcon, SnoozeIcon } from '@/icons';
interface PlantProps {
identify: string;
species: string;
nextWatering: Date;
onSnooze: (id: string) => void;
onWater: (id: string) => void;
}
export default operate PlantCard({ identify, 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">{identify}</h3>
<p className="text-sm text-slate-500 italic">{species}</p>
</div>
{/* Visible Cue for Overdue Vegetation */}
{isOverdue && (
<Badge variant="damaging" className="animate-pulse">
Thirsty!
</Badge>
)}
</div>
<div className="mt-4 flex gap-2">
<Button
onClick={() => onWater(identify)}
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(identify)}
title="Push this job 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>
);
}
# Wrapping Up
This text reveals methods to leverage Google’s Antigravity, one of many latest accessible instruments within the Google AI suite, to generate software program prototypes. Particularly, we illustrated the logic to show a PRD right into a software program prototype.
Iván Palomares Carrascosa is a pacesetter, author, speaker, and adviser in AI, machine studying, deep studying & LLMs. He trains and guides others in harnessing AI in the actual world.
