📢 转载信息
原文链接：https://www.kdnuggets.com/from-prd-to-functioning-software-with-google-antigravity
原文作者：Iván Palomares Carrascosa, KDnuggets Technical Content Specialist
Image by Editor
# 引言
创建一份产品需求文档（PRD）是产品管理中的常见流程，也是软件开发和整个技术行业中一项日常任务。但故事并未止于 PRD，下一步的重大举措是将其转化为产品，例如可运行的软件。
本文是对这篇文章的后续跟进，我们在那篇文章中将一堆原始、混乱的信息转化为一份有根据的 PRD。本文将引导您通过同一个用例（一个名为 FloraFriend 的移动友好应用），使用 Google Antigravity 将该 PRD 转化为可运行的软件原型。
虽然在文章范围内展示完整的软件创建过程是不切实际的，但我们将重点介绍使用 Antigravity 实现此目的的关键方面，并附带一些生成的软件的代表性摘录以供说明。
# 从 PRD 到软件原型
请做好准备，因为我们将描述的过程就是奇迹发生的地方。如果使用得当，Google Antigravity 可以部分充当首席工程师的角色。它是一个可下载的 IDE，适用于多种操作系统：您可以将其视为 VS Code 的一个变体，不同之处在于，您不仅是输入代码，还可以管理将为您编写代码的 AI 智能体。
毋庸置疑，第一步是在您的机器上下载并安装 Antigravity。
首先，Antigravity 中需要熟悉的核心元素是其专用的智能体管理器（Agent Manager）视图：在这里我们输入我们的软件需求。之后，自主智能体会规划、实现，甚至测试所构建的解决方案。
让我们开始吧——我强烈建议选择“东京之夜”（Tokyo Night）主题，顺便提一下！——然后在本地文件资源管理器中，创建一个新的、空的工程文件夹，命名为 flora-friend-app。如果您熟悉 VS Code，您会发现 Antigravity 的 UI（用户界面）非常熟悉。
下面是打开名为“flora-friend-app”的新建文件夹的结果，该文件夹当前为空：
Antigravity 的初步操作
现在是最激动人心的部分。点击顶部栏上的专用按钮打开智能体管理器视图。您将看到一个对智能体在智能体管理器中能做什么的初学者友好解释：
智能体管理器欢迎界面
我们首先要发送这个提示词（请勿立即点击“发送”按钮），要求实现一个移动友好型 Web 应用的实施方案：
扮演一位资深全栈工程师。审查‘FloraFriend’的附带 PRD。创建一个全面的实施计划，使用 Next.js、Tailwind CSS 和 Shadcn UI 将其构建为一个移动优先的 Web 应用。暂时不要编写代码；严格生成计划构件（Plan Artifact）。
此提示词应附带一个实际的 PRD，例如，如果您关注了前面关于使用 NotebookLM 生成 PRD 的相关文章所获得的那份 PRD——或者您自己的 PRD。无论哪种方式，您都有两个主要选项来附加 PRD：要么在提示词中手动粘贴代码，紧跟在上述请求之后，要么将 PRD 文件（.docx、.pdf 或类似文件）包含在我们在前面创建的项目文件夹中——如果您选择复制粘贴选项，请小心地使用键盘上的 Shift + Enter 键在新行上粘贴 PRD，紧跟在请求之后，发送完整提示词之前。好消息是：为 Antigravity 及其智能体提供动力的 Google Gemini LLM 具有巨大的上下文窗口大小；换句话说，我们可以无缝地包含一大段粘贴文本来为我们的提示词提供背景信息。
大约一分钟后，您可能会得到如下所示的响应：
Antigravity 智能体管理器中的示例输出
我们可以在智能体管理器窗口的右侧看到一个复选框列表，其中列出了软件项目步骤，例如“初始化 Next.js 应用 (...)”。在这里，我们可以选择查看此列表，并通过“审查（Review）”按钮发送附加提示词来修改项目，或者添加新项目，例如，通过提示：
将“构建组件：植物卡片（含小睡逻辑）”和“周末逻辑”添加到后端任务中。
新的或修改后的项目将“神奇地”出现在复选框列表中。
让我们继续，假设我们对当前的计划感到满意。这是一个棘手的步骤，因为找到正确的按钮来点击并继续推进并不明显，尤其是在进行了几次细化交互之后。关键是向上滚动聊天流中生成的构件框，找到标记为“实施计划”（Implementation Plan）的那个。打开它，然后在右侧单击“继续（Proceed）”按钮。这就是智能体开始完全采取行动的地方，通过执行安装依赖项、通过名为 schema.sql 的文件创建数据库架构及其多个相关表等操作。下面是为执行这些操作而生成的代码示例：
为我们的软件数据库生成的 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 AI 套件中最新的工具之一 Google Antigravity 来生成软件原型。特别是，我们说明了将 PRD 转化为软件原型的逻辑。
Iván Palomares Carrascosa 是人工智能、机器学习、深度学习和大型语言模型的领导者、作家、演讲者和顾问。他培训并指导他人如何在现实世界中利用人工智能。
🚀 想要体验更好更全面的AI调用？
欢迎使用青云聚合API，约为官网价格的十分之一，支持300+全球最新模型，以及全球各种生图生视频模型，无需翻墙高速稳定，文档丰富，小白也可以简单操作。
评论区