Picture by Editor
# Introduction
Making a Product Necessities Doc (PRD) is a typical course of in product administration and a commonplace activity in sectors like software program improvement and the tech business as a complete. 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, wherein 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 exhibiting the complete software program creation course of is impractical throughout the scope of the article, we are going to 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.
# Transferring 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.
For sure, step one is downloading Antigravity and putting in it in your machine.
The central factor to familiarize with in Antigravity, to start 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 take a look at the answer constructed.
Let’s begin by opening it — I extremely suggest selecting the “Tokyo Night”, after all, by the way in which! — theme and, in your native file explorer, create a brand new, empty venture folder, naming it flora-friend-app. If you’re acquainted with VS Code, you will discover Antigravity’s UI (Consumer Interface) very acquainted.
Beneath you may see the results of opening a newly created folder known as “flora-friend-app“, which is presently 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 prime. You will notice a beginner-friendly rationalization of what brokers within the agent supervisor can do:
Welcome display of the Agent Supervisor
We’ll ship this immediate to start with (don’t click on the ‘ship’ button but) that asks for an implementation plan for a mobile-friendly Net 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 you might get in case you adopted the earlier, associated article about NotebookLM for PRD era — or considered one of your personal, for that matter. Both manner, you will have two principal 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 related) within the venture folder we created earlier — in case you go for the copy-paste choice, fastidiously 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 good information: Google Gemini LLMs, which gas Antigravity and its brokers, have an enormous context window measurement; in different phrases, we will embrace a really lengthy bunch of pasted textual content to contextualize our immediate in a frictionless trend.
After a minute or so, you might get a response that appears like this:
Instance output in Antigravity’s Agent Supervisor
We will see a guidelines seem on the right-hand facet of the agent supervisor window, with software program venture steps being listed, corresponding to “initialize Next.js app (…)” as an example. Right here, now we have the choice of reviewing this listing and sending extra prompts through the “Review” button to amend gadgets or add new ones, for instance, by prompting:
Add the “build component: 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 tough step, as discovering the best button to click on on and transfer ahead isn’t apparent, particularly after a number of interactions for refinement. The secret’s to scroll up via the generated artifact packing containers within the chat stream and discover the one labeled as “Implementation Plan”. Open it and, on the right-hand facet, click on on the “Proceed” button. That is the place brokers begin totally appearing, by executing actions like putting in dependencies, creating the database schema with a number of related tables through a file named schema.sql, and so forth. Beneath is an instance of the code generated for enterprise these actions:
Generated schema.sql for our software program database
Your entire course of is step-by-step, manually requiring assessment and approval in your finish earlier than continuing to the subsequent step, however you’ll regularly see how the venture planning guidelines will get packing containers ticked. Generally you will must manually set up some dependencies in your PATH or carry out related 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 would possibly appear like:
// 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 (
{/* Visible Cue for Overdue Vegetation */}
{isOverdue && (
Thirsty!
)}
{/* The "Matt Feature" - Snooze Button */}
Subsequent scheduled: {nextWatering.toLocaleDateString()}
);
}
# Wrapping Up
This text exhibits tips on how 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.
