Prompt 到上线只需 2 分钟：AI 驱动开发工作流加速

Google AI Studio 全新 Build 功能实操指南

你是否曾有过一个绝妙的应用创意，却一想到仅仅为了让原型运行起来，就要面对堆积如山的样板代码、环境配置和调试工作，便望而却步？如果你只需用一句话描述自己的应用，就能看着它从无到有地诞生，不仅结构完整，还能以安全、可扩展的方式随时部署，那会怎样？

这已经不再是科幻小说里的情节。它正是 Google AI Studio 新推出的“Build apps with Gemini”功能——一款革命性的工具，集 AI 联合创始人、架构师和开发者于一身。

在这篇指南中，我们将使用视频里的示例——一个由 AI 驱动的《Magic: The Gathering》卡牌生成器——带你走完整个流程：从一个简单的想法开始，最终得到一个已经上线部署的 Web 应用。

第 1 步：清晰表达你的想法

一切都始于你的想法。这项新功能的关键，在于使用清晰、自然的语言描述你想构建什么。初始 prompt 提供的细节越多，最终结果就越好。

我们的目标是创建一个由 AI 增强的 TypeScript 应用，用于生成独一无二的《Magic: The Gathering》卡牌，其中包含完整的插画和文字。

下面就是我们要使用的 prompt，与视频中的内容完全相同：

“请创建一个应用，用于生成一张独一无二的全新《Magic: The Gathering》卡牌。使用 Imagen 生成视觉内容，并使用 Gemini 创建卡牌的文字描述和属性数据。”

注意，这个 prompt 虽然简洁，但非常具体。我们不只是要求它创建一个卡牌生成器，还明确指定了不同任务应该使用的 AI 模型：Imagen 负责生成图像，Gemini 负责生成文字。这可以帮助 AI Assistant 做出更合理的架构决策。如果你没有为原型指定要使用的模型，Gemini 会在后台尽力为你选择合适的模型。如果有需要，你随时可以在 Build 界面中修改模型字符串，稍后我们就会看到这一点。

输入 prompt 后，点击“Run prompt”按钮，也就是向上箭头图标。

第 2 步：进入 Build 界面

运行 prompt 后，AI Studio 会立即将你带到一个类似 IDE 的全新界面。你的应用将在这里被创建，你也可以基于 Gemini 的输出不断进行递归式迭代。下面来逐一了解界面中的内容：

Code Assistant（左侧面板）：这里是你的 AI 搭档的控制中心。你可以在这里看到它的思考过程、Gemini 正在创建的文件，以及模型遇到并修复的错误。

File Explorer 和 Code Editor（中间区域）：这里采用了标准的代码编辑器视图。你会看到完整的文件结构，包括文件夹、组件和服务等内容逐步出现在这里。点击任意文件，还可以实时查看正在编写的代码。

Preview pane（右侧面板）：应用代码生成完成后，你将在这里看到应用的实际显示效果。

替代文本：一张全屏截图，展示运行 prompt 后最初的空白 Build 界面，以及示例应用可视化效果出现后的界面。使用标注指出“Code Assistant”“File Explorer”和“Code Editor”面板。

第 3 步：Gemini 的“Thinking”过程

这是整个体验中最有意思的部分之一。在 Code Assistant 面板中，你会看到一个“Thinking...”区域，它使用了 Gemini 2.5 全新的“Thinking”能力。展开这个区域后，你可以查看 Gemini 为设计和开发这个 AI 应用而制定的分步计划。

这并不是一个黑盒。AI Studio 的 Build 区域会透明地展示 Gemini 采用的策略：

分析概念：理解请求的核心内容。

细化用户输入：规划如何以最佳方式使用 prompt。

规划 API 集成：决定如何连接 Gemini API 和 Imagen API。

梳理项目组件：将应用组织为逻辑清晰的 React 组件。

开发应用逻辑：编写驱动应用运行的函数。

这能让你深入了解一个成熟的 AI Agent 如何从零开始进行软件开发。随着你创建出更新、更复杂的应用，它采用的处理方式也会随之变化。

第 4 步：自动生成代码

随着 AI Studio Code Assistant 按照计划逐步推进，你会看到 File Explorer 中不断出现新的内容。这并不只是一个脚本或寥寥几个文件，而是一个结构完善的现代 Web 应用项目，并且使用了最新的 Gemini GenAI SDK 和模型。

你会看到类似以下内容的文件和文件夹：

• components/，例如 CardDisplay.tsx、UserInput.tsx
• services/，例如 geminiService.ts
• 用于提供健壮 TypeScript 类型定义的 types.ts
• 作为入口点的 index.html
• 作为应用主组件的 App.tsx

这些代码使用 TypeScript 编写，并采用 React 框架，遵循现代开发的最佳实践。AI Assistant 使用最新版 Google Gemini SDK 和模型，因此你始终是在技术前沿之上进行构建，同时也能获得正确的语法和编码约定。

第 5 步：自动纠正错误

即使是 AI 也会犯错！在生成过程中，Assistant 可能会引入一些小 bug，例如类型不匹配或错误的 import。

但神奇之处就在这里：不需要你介入，Gemini 就能发现并修复自己的错误。

在下方的 GIF 中，你可以看到一条通知弹出：“Analyzing 10 errors...”随后，Code Assistant 会逐一处理这些错误，执行“Resolving Type-Import Conflicts”和“Fixing Import Declarations”，直到所有文件旁边都出现绿色对勾。这种自我修复能力可以节省大量调试时间。

第 6 步：预览你的应用

代码生成完毕、错误也全部修复后，就该看看你的作品了。

你可以在界面顶部隐藏 Code Assistant 和 Code Editor，将注意力集中在 Preview pane 上。此时，你描述的应用已经直接呈现在 IDE 中。你可以与它交互，测试新功能，或者继续迭代设计。

在我们的示例中，可以看到“MTG Card Forge AI”界面。我们可以输入一个创意——“A wise old turtle that practices time magic.”——然后点击“Forge My Card!”。应用会先显示加载状态，随后调用 Gemini API 和 Imagen API，生成一张完整的卡牌“Chronoshell Ancient”，其中包含精美的插画和描述性文字。

第 7 步：公开发布——部署与分享

原型固然很好，但一个已经部署、安全且可扩展的应用显然更胜一筹。AI Studio 和 Google Cloud Run 让这个过程变得极其简单。

在界面右上角，你可以看到以下几个选项：

Download：获取包含整个项目的 .zip 文件，以便在本地运行和编辑。

Share：生成一个链接，与其他人分享你的 applet。

Deploy to Cloud Run（火箭图标）：这是最强大的选项。只需点击一次，就能将应用部署到 Google Cloud Run。你只需要选择一个已经启用结算功能的 Google Cloud 项目。应用随后便会通过一个公开 URL 上线，而你的 API key 会被安全地保存在后端，绝不会暴露给客户端。

现在轮到你来构建了！

短短几分钟内，我们就从一句话出发，创建出了一个功能完整、已经部署的 Web 应用。它不仅拥有结构清晰的代码库，还完成了 API 集成，并提供了可以直接使用的 UI。Google AI Studio 的这项全新 Build 功能，将彻底改变快速原型开发、学习实践和创意落地的方式，让想法以前所未有的速度变成现实。

现在就前往 Google AI Studio 亲自试一试，并分享你的作品吧。我们迫不及待地想看看你会构建出什么！

部分评论可能只有登录后的访客才能看到。请登录以查看全部评论。

如需采取进一步措施，你可以考虑屏蔽此人和／或举报滥用行为。