从提示到应用部署，不到 2 分钟。

Google AI Studio 新构建功能的实战指南

你是否曾有过一个绝妙的应用创意，却苦于面对海量的样板代码、设置和调试工作，才能勉强做出一个原型？如果只需一句话就能描述你的应用，然后看着它一步步成型，结构完整，随时可以安全大规模地部署，那该有多好？

这不再是科幻小说了。这是Google AI Studio中全新的“使用 Gemini 构建应用”功能，这是一款革命性的工具，集 AI 联合创始人、架构师和开发人员于一身。

在本指南中，我们将带您了解整个过程，从一个简单的想法到实际部署的 Web 应用程序，并以视频中的示例为例：一个 AI 驱动的“万智牌”卡牌生成器。

第一步：阐述你的想法

一切都始于你的想法。这项新功能的关键在于用清晰自然的语言描述你想要构建的内容。你在初始提示中提供的细节越多，最终效果就越好。

我们的目标是创建一个人工智能增强的 TypeScript 应用程序，生成一张独特的万智牌，包括美术和文字。

以下是我们将使用的提示，与视频中一样：

“请创建一个应用程序，使用 Imagen 生成独特的全新万智牌卡牌，使用 Gemini 生成卡牌的文字描述和属性数据。”

请注意，这里的描述既具体又简洁。我们并非仅仅要求生成卡片；我们还要指定用于不同任务的 AI 模型（Imagen 用于图像，Gemini 用于文本）。这有助于 AI 助手做出更优的架构决策。如果您没有为原型指定要使用的模型，Gemini 会在后台尽力为您选择合适的模型。如有需要，您随时可以在构建界面中编辑模型字符串，我们稍后会详细介绍。

输入提示信息后，点击“运行提示信息”按钮（向上箭头图标）。

步骤 2：进入构建界面

运行提示符后，AI Studio 会立即带您进入一个类似 IDE 的全新界面，您的应用程序将在这里创建，您也可以在这里递归地迭代 Gemini 的输出。让我们来详细了解一下您看到的内容：

• 代码助手（左侧面板）：这是您的人工智能合作伙伴的控制中心。它会显示其思考过程、Gemini 正在创建的文件，以及模型遇到并修复的任何错误。
• 文件资源管理器和代码编辑器（中心）：这是标准的代码编辑器视图。您将在此处看到完整的文件结构（文件夹、组件、服务），您可以单击任何文件以实时查看正在编写的代码。
• 预览窗格（右侧面板）：应用程序代码生成后，您将在此处看到应用程序的显示。

替代文字：提示运行后，可以看到示例应用程序可视化效果的空白构建界面的全屏截图。使用注释标记“代码助手”、“文件资源管理器”和“代码编辑器”面板。

步骤三：双子座的“思考”过程

这是体验中最有趣的部分之一。在代码助手面板中，您会看到一个“思考中……”部分，它利用了 Gemini 2.5 全新的“思考”功能。展开该部分，您可以按照 Gemini 提供的分步指南，设计和开发这款人工智能应用程序。

这并非一个黑箱——AI Studio 的 Build 部分中，Gemini 对其战略是透明的：

• 概念分析：理解核心需求。
• 优化用户输入：规划如何最好地利用提示。
• 概述 API 集成：决定如何连接到 Gemini 和 Imagen API。
• 项目组件映射：将应用程序构建成逻辑 React 组件。
• 开发应用程序逻辑：编写驱动应用程序运行的功能。

这让您深入了解复杂的 AI 代理如何从零开始进行软件开发，并且随着您创建新的、更复杂的应用程序，它将如何改变。

步骤 4：自动代码生成

当 AI Studio Code Assistant 执行其计划时，您会看到文件资源管理器逐渐显示内容。这不仅仅是一个脚本或几个文件；而是一个结构良好、现代化的 Web 应用程序项目，使用了最新的 Gemini GenAI SDK 和模型。

你会看到类似这样的文件和文件夹：

• components/（例如，CardDisplay.tsx、UserInput.tsx）
• services/（例如，geminiService.ts）
• types.ts用于健壮的 TypeScript 定义
• index.html作为入口点
• App.tsx作为主要应用程序组件

代码采用 TypeScript 编写，并使用 React 框架，遵循现代最佳实践。AI 助手使用最新版本的 Google Gemini SDK 和模型，因此您始终能够使用最前沿的技术，并遵循正确的语法和规范。

步骤五：自动纠错

即使是人工智能也会犯错！在生成过程中，助手可能会出现一些小错误，例如类型不匹配或导入错误。

但神奇之处在于：Gemini 能够发现并纠正自身的错误，而无需您进行干预。

在下面的 GIF 动画中，您可以看到一个弹出通知：“正在分析 10 个错误……” 代码助手随后会逐一处理这些错误，例如“解决类型导入冲突”和“修复导入声明”，直到所有文件都显示绿色对勾。这种自我修复功能可以节省大量的调试时间。

步骤 6：预览您的应用程序

代码生成完毕，错误也修复完毕后，就可以看看你的作品了。

在界面顶部，您可以隐藏代码助手和代码编辑器，以便专注于预览窗格。您描述的应用现在会直接显示在您的 IDE 中，您可以与之交互来测试新功能或迭代设计。

例如，我们看到的是“MTG Card Forge AI”界面。我们可以输入一个想法（例如“一只精通时间魔法的睿智老龟”），然后点击“生成我的卡牌！”。应用程序会显示加载状态，然后使用Gemini和Imagen API生成一张完整的卡牌“Chronoshell Ancient”，其中包含精美的插画和描述文字。

步骤 7：公开发布 - 部署与共享

原型固然重要，但部署后安全可靠且可扩展的应用程序才是最佳选择。AI Studio 和 Google Cloud Run 让这个过程变得无比简单。

在右上角，您有几个选项：

• 下载：获取包含整个项目的 .zip 文件，以便在本地运行和编辑。
• 分享：生成一个链接，以便与他人分享您的小程序。
• 部署到 Cloud Run（火箭图标）：这是最强大的选项。只需单击一下，即可将应用部署到 Google Cloud Run。您只需选择一个已启用结算功能的 Google Cloud 项目。应用将通过公共 URL 上线，您的 API 密钥在后端安全保存，绝不会暴露给客户端。

现在轮到你来建造了！

短短几分钟内，我们就从一句话变成了功能齐全、已部署的 Web 应用程序，它拥有结构化的代码库、API 集成和实时用户界面。Google AI Studio 的这项全新构建功能彻底改变了快速原型设计、学习和将想法变为现实的方式，速度前所未有。

快去Google AI Studio体验一下，然后分享你的作品吧！我们迫不及待地想看看你的杰作！