Picture by Editor
# Introduction
Making a Product Necessities Doc (PRD) is a typical course of in product administration and a commonplace process in sectors like software program growth and the tech business as an entire. However the story would not finish with a PRD, and the subsequent large step is popping it right into a product, e.g. a functioning software program.
This text follows up from this one, during which we turned a set of uncooked, messy items of data right into a grounded PRD, and navigates you thru the identical use case (a mobile-friendly app referred to 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’ll spotlight the important thing points to learn 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 out there for a number of working techniques: 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 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 check the answer constructed.
Let’s begin by opening it — I extremely suggest selecting the “Tokyo Evening”, after all, by the way in which! — theme and, in your native file explorer, create a brand new, empty mission 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 referred to as “flora-friend-app“, which is at the moment 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 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. Evaluation the connected 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 ought to be accompanied by an precise PRD, for example, just like the one you might get in the event you adopted the earlier, associated article about NotebookLM for PRD technology — or certainly one of your personal, for that matter. Both means, you could have two primary 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 mission folder we created earlier — in the event you go for the copy-paste possibility, rigorously use the Shift + Enter keys in your keyboard to make a few new traces 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 vogue.
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 mission steps being listed, corresponding to “initialize Subsequent.js app (…)” for example. Right here, we have now the choice of reviewing this record and sending extra prompts through the “Evaluation” button to amend objects 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 objects 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 fitting button to click on on and transfer ahead is just not apparent, particularly after a number of interactions for refinement. The secret’s to scroll up by means of 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 absolutely 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
All the course of is step-by-step, manually requiring assessment 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 packing containers ticked. Generally you will have to 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 may appear to be:
// elements/PlantCard.tsx
import { useState } from 'react';
import { Card, Button, Badge } from '@/elements/ui';
import { WaterDropIcon, SnoozeIcon } from '@/icons';
interface PlantProps {
identify: string;
species: string;
nextWatering: Date;
onSnooze: (id: string) => void;
onWater: (id: string) => void;
}
export default perform PlantCard({ identify, species, nextWatering, onSnooze, onWater }: PlantProps) {
const isOverdue = new Date() > nextWatering;
return (
{/* Visible Cue for Overdue Vegetation */}
{isOverdue && (
Thirsty!
)}
{/* The "Matt Characteristic" - Snooze Button */}
Subsequent scheduled: {nextWatering.toLocaleDateString()}
);
}
# Wrapping Up
This text exhibits how one can leverage Google’s Antigravity, one of many latest out there 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 frontrunner, author, speaker, and adviser in AI, machine studying, deep studying & LLMs. He trains and guides others in harnessing AI in the true world.
