1. 概览
在此 Codelab 中，您将构建一个“Snake & Beats”Web 应用，这是一个集成了音乐播放器的复古版 Snake 游戏。您将使用 Gemini 生成具有霓虹美学的单文件 React 应用，然后对其进行版本控制并将其部署到 Cloud Run。
您将执行的操作
- 构建和提示：使用 Google AI Studio 的“构建”模式，通过单个提示生成可运行的游戏。
- 使用系统指令进行优化：通过设置持久的角色，让 AI 了解您的风格，以便在日后进行修改。
- 保存到 GitHub：直接从 AI Studio 启动新代码库。
- 部署到 Cloud Run：只需点击一下，即可将游戏部署到 Google Cloud Run。
学习内容
- 如何在 Google AI Studio 中使用“构建模式”快速进行应用原型设计。
- 如何使用系统指令在迭代期间保持一致的“编码氛围”。
- 如何将 Google AI Studio 连接到 GitHub 和 Cloud Run。
所需条件
- Chrome 网络浏览器
- Gmail 账号
- 启用了结算功能的 Cloud 项目
- Gemini API 密钥
- GitHub 账号
2. 准备工作
- 在 Google Cloud Console 的项目选择器页面上，选择或创建一个 Google Cloud 项目。
- 确保您的 Cloud 项目已启用结算功能。了解如何检查项目是否已启用结算功能。
3. 构建和提示（核心）
我们将首先一次性构建整个应用。登录 Google AI Studio，确保您位于构建界面。
- 输入构建提示：将以下详细提示粘贴到聊天框中：
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- 选择模型：在右侧的设置面板中，确保选择 Gemini 3.0 Pro（或最新的预览版模型），以便更快地生成代码。
- 运行：点击 Build（或按 Cmd + Enter）。
- 预览：Gemini 将生成代码，并通常在右侧呈现实时预览（如下所示）：
4. 使用注释、图片和语音进行优化
有时，很难用文字描述视觉变化。借助注释模式，您可以直接在应用预览上绘制内容，以便立即传达您的想法。
使用注释模式
- 启用注释模式：在 AI Studio 界面中（查看预览窗口的左侧面板或底部工具栏），选择“注释”或“优化”工具。
- 为应用添加标记：
- 绘制：使用方框工具在得分计数器周围绘制一个矩形。
- 评论：在相应框中输入提示：“让此字体更大、更具数字感和故障感。”
- 草图：使用箭头工具指向“播放”/“暂停”按钮。
- 评论：类型：“将这些图标更改为发光的霓虹灯图标。”
- 迭代：点击“添加到对话”，然后点击发送提示。Gemini 将解读您的视觉标记和文本命令，以更新代码。
- 验证：实时观看预览更新。现在，您的视觉反馈应该会反映在代码中！
语音输入（The Spoken Vibe）
有时，“氛围”这个词说起来比写起来更容易。
- 操作：点击输入栏中的麦克风图标（位于“+”按钮旁边）。
- 说：“嘿，蛇的动画太慢了。加快速度，让尾巴留下闪闪发光的轨迹。”
- 发送：Gemini 会将您的语音转换为文字并应用更改。
5. 设置系统指令和重建
与普通提示不同，系统指令在整个会话期间都会保持有效。这是定义编码标准、命名规范或不应更改的特定视觉形象的最佳位置。
- 打开“高级设置”：在 Google AI Studio 界面（构建模式）中，找到“系统指令”框。如果未显示该选项，请点击聊天面板顶部或侧边的“设置”（齿轮图标）或“高级设置”。
- 添加“氛围”指令：将以下指令粘贴到文本框中。这为我们的游戏定义了一个“故障艺术”角色：
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- 触发更改：更改系统指令不会自动重写代码。您必须告知 Gemini 应用这些新规则。
- 关闭设置面板。
- 在聊天/提示输入框中，输入：“Rebuild the application UI to strictly follow the new System Instructions.”
- 点击“运行 / 发送”。
- 观察更新：Gemini 会确认更改。
6. 保存到 GitHub
我们将使用内置的 GitHub 集成功能来立即启动代码库，而不是下载文件并与命令行作斗争。
- 找到集成：在 Google AI Studio 界面的顶部工具栏中，找到位于“下载”和“部署”图标之间的 GitHub 图标。
- 关联账号：点击相应图标。如果您是首次使用此功能，系统会提示您授权 Google AI Studio 访问您的 GitHub 账号。
- 创建代码库：系统会显示一个对话框，标题为“填写以下信息以创建代码库”。
- 代码库名称：输入一个名称，例如 “使用 React 生成的 AI 蛇游戏。”
- 代码库说明：输入代码库说明。
- 公开范围：选择“公开”（以便您轻松分享）或“不公开”。
- 推送到 GitHub：点击“创建 Git 代码库”按钮。
7. 部署到 Cloud Run
现在，应用已准备就绪并已保存到 GitHub，接下来我们将其部署到 Cloud Run。
- 开始部署：点击下方突出显示的按钮。它位于 AI Studio 页面的右上角。
- 选择项目：点击“选择 Cloud 项目”下拉菜单，然后从下拉菜单中选择您的项目。
- 问题排查：如果您无法在下拉菜单中找到自己的项目，请点击“导入项目”，然后从“导入项目”窗格中选择您的项目。
- 结算验证：选择项目后，系统会验证该项目是否已启用结算功能。由于我们在“准备工作”部分已将结算账号附加到项目，因此此验证将自动通过。
- 部署：点击“部署应用”按钮，然后等待应用部署到 Cloud Run。注意：系统会自动生成 Cloud Run 服务名称。
- 部署应该会在几分钟内完成，您将获得应用网址。点击该网址，您就可以在互联网上实时查看已部署的 Web 应用了！
8. 清理
为避免系统因本博文中使用的资源向您的 Google Cloud 账号收取费用，请按照以下步骤操作：
- 在 Google Cloud 控制台中，前往管理资源页面。
- 在项目列表中，选择要删除的项目，然后点击“删除”。
- 在对话框中输入项目 ID，然后点击“关停”以删除项目。
9. 恭喜
恭喜！您已成功在 AI Studio 上完成了应用 Vibe-Coding，并将其部署到了 Cloud Run！
AI Studio 是开发和测试应用的理想平台，可让用户立即直观地看到其设计在实际应用中的效果。
AI Studio 与 Cloud Run 的无缝集成可让用户轻松地将应用直接部署到 Google Cloud 上。利用 Cloud Run 可获得无服务器环境的所有固有优势，摆脱复杂的基础设施管理和开销。