---
url: /aistudio/build_mode_tutorial.md
description: >-
  手把手带你玩转 Google AI Studio 的 Build 模式（vibe coding）——Antigravity Agent 驱动、React +
  Node.js 全栈自动生成、Firebase 与 Cloud SQL 一键接入、Cloud Run 免费部署、原生 Android 应用生成，以及
  Annotate 圈选改 UI 的技巧与配额限制。
---

# Google AI Studio Build 模式实战：一句话把 App 从 0 做到上线

先说个让我有点破防的事。

上个月我想做个小工具——一个能把我每周的开销记下来、自动画个饼图的网页。需求简单到我用纸笔画都只要五分钟。但我愣是拖了三周没动手。

不是不会写。是**一想到要开项目、配环境、装依赖、建数据库、搞登录、再找个地方部署**，那股劲就泄了一半。为了一个"记个账"的念头，我要付出的启动成本是整整一个周末。

这就是大部分小想法死掉的方式：**不是死在难，是死在烦。**

后来我在 AI Studio 里用一句话把它做出来了，前后不到二十分钟，还顺手拿到了一个能发给别人的 HTTPS 链接。整个过程没打开过终端，没填过信用卡。

> 我承认那一刻有点恍惚。我们这行花了十几年把"写代码"这件事搞得越来越专业、越来越重，结果现在有人把它按回了一句人话。这不是"程序员要失业了"那种廉价结论——这是**启动成本被抽掉之后，想法终于跑得动了的那种爽**。

今天这篇，就讲这个能让你"想到就做到"的东西：**Google AI Studio 的 Build 模式**。

## 什么是 Build 模式

**Build 模式是 Google AI Studio 里的应用生成功能**，官方给它的另一个名字你大概听过——**vibe coding（氛围编程）**。

它的工作方式是：你在输入框里用**一段自然语言**描述你想要什么，然后点 Build，AI 就把一个**完整可运行、可部署的应用**给你生成出来，右边实时预览。

注意关键词是"完整可运行"，不是"一段代码片段"。它会给你：

* 前端代码（Web 应用默认 **React**，也支持 Angular 和 Next.js）
* 服务端运行时（**Node.js**，能装 npm 包、连数据库、安全地调 API）
* 一个能点、能交互的**实时预览面板**
* 一条通往**公网部署**的路

> 这里有个容易被忽略的信息：**驱动 Build 模式的，是 Antigravity Agent**——就是 Google Antigravity 那套 Agent 框架的核心组件。换句话说，你在 AI Studio 里点下的那个 Build，背后跑的是和 Antigravity 同一套"理解整个项目、跨文件改代码、验证执行结果"的引擎。它不是补全代码，它是**在替你当那个记得住全局的人**。

区分一下两件事，免得混淆：

* **AI Studio 的普通模式（Playground）**：调 prompt、试模型、拿 API Key。适合"我想验证 Gemini 能不能干这个"。
* **AI Studio 的 Build 模式**：直接造应用。适合"我想要个能用的东西"。

前者是实验室，后者是工厂。

## Build 模式到底能干到什么程度

别把它想成"生成个静态页面"的玩具。它现在的能力清单有点离谱：

* **全栈而不只是前端**：Web 应用会生成 React 前端 + Node.js 服务端。所有需要保密的逻辑（API 调用、数据库连接）都跑在服务端，不会裸奔在浏览器里。你可以直接说"装个画图库"，它自己去装 npm 包。
* **原生 Android 应用**：不只是网页。它能生成 **Kotlin + Jetpack Compose** 的真·原生安卓项目，在浏览器里的**安卓模拟器**里预览，还能通过 ADB 装到你插着的真机上，最后推到 Play Store 的内部测试轨道。
* **数据库一键配好**：需要存数据？说一句，它自动拉起 **Firebase Firestore** 和 **Firebase Authentication**（Google 登录），配置文件、初始化代码、安全规则一条龙写好。要用关系型数据库也行——**Cloud SQL for PostgreSQL** 同样是一句话的事，它会建实例、建表、改 schema。
* **Google Workspace 直接打通**：Gmail、Sheets、Docs、Drive、Calendar、Maps。OAuth 那堆让人头大的配置，AI Studio 全部自动处理，凭据存在服务端。
* **密钥自动托管**：你的 `GEMINI_API_KEY` 会被自动配成服务端密钥，你在 Settings 的 Secrets 面板里能看到它，但**它永远不会出现在前端代码里**。分享应用给别人用，别人也看不到你的 Key。
* **实时多人协作**：服务端运行时直接管状态，你可以做"多人同时编辑"这类应用，不用自己搭 WebSocket。
* **AI 能力随手加**：输入框旁边的 **AI Chips** 可以往 prompt 里塞特定能力，比如图像生成、Google Maps 数据。嫌打字麻烦还能**用嘴说**——输入框支持语音转文字。
* **部署到 Cloud Run**：右上角 Publish，两三分钟后你就有一个公网 HTTPS 地址，可以自定义 `你的名字.ai.studio` 前缀。
* **代码完全属于你**：可以**双向同步到 GitHub**（还帮你写 commit message），也可以直接下载 ZIP 拿走。

## 场景：它适合用来做什么

**1. 内部小工具，用完就扔的那种**

前面说的记账工具是最典型的例子。还有一种更常见的：运营同事每周要从上百行表格里筛数据、贴到文档里。以前要么求工程师排期，要么自己手动熬一下午。现在可以让 AI Studio 生成一个"上传 Excel、按规则清洗、导出结果"的小网页——**一次做完，长期复用**。

> 这类需求的共同点是：逻辑不复杂，但**不值得为它开一个正式项目**。AI Studio 正好卡在这个生态位上。

**2. 验证一个想法值不值得做**

你有个产品点子，找人做要几万块，自己学要几个月。但在 AI Studio 里，你可以花半小时做出一个能点的原型，发给五个潜在用户试试。**验证的成本从"一个季度"降到了"一个下午"**，这是它最大的价值——不是省钱，是省掉"想了半年最后发现没人要"的遗憾。

**3. 需要 AI 能力的小应用**

比如"上传一张冰箱照片，告诉我今晚能做什么菜"，或者"把这段会议录音整理成待办清单"。这类应用在 Build 模式里特别顺，因为 Gemini 的调用已经帮你接好了——你只需要描述业务，不用操心怎么调模型。

**4. 原生安卓的小玩意**

想给家人做个"家庭药品提醒"的 App？描述一下，它会生成 Kotlin + Compose 的原生项目，用浏览器里的模拟器预览，手机插上电脑就能装进去试试。GPS、蓝牙、NFC 这些硬件能力都能用上——这已经不是"网页套壳"了。

## 初体验：20 分钟从零到上线

按这个顺序走一遍，你会对整个流程有体感。

**第 1 步：进 Build 模式**

打开 [aistudio.google.com](https://aistudio.google.com)，点 **Build** 标签页。第一次进来会看到 Google Cloud Starter Tier 的条款，看一眼、接受就行——**不需要信用卡**。

没灵感也没关系，点那个 **"I'm Feeling Lucky"** 按钮，Gemini 会自己编一个项目点子给你。跑一遍，你就能在大约一分钟内看完整个循环是怎么转的。

**第 2 步：写一段"人话"需求**

这是**唯一的真功夫**。诀窍是：**说清楚"谁用、几个页面、点下去会发生什么"**，别玩文艺。

反例：> "做一个很酷的效率工具。"

正例：> "给餐厅服务员做的小费记录工具。一个页面录入每班数据：日期、工时、现金小费、刷卡小费。下面列出历史班次。顶部汇总本周总额和平均时薪。数据存在设备上。"

看出区别了吗？后者有**具体的人、具体的字段、具体的动作**。模糊的需求只能产出模糊的应用——这是绝大多数人第一次用这类工具就失望的根本原因。

**第 3 步：点 Build，然后当个挑剔的用户**

代码开始生成，右侧预览面板会实时出现你的应用。这时候**别急着改**，先像真实用户那样去用它：填真实的数字，点每个按钮，**试着把它弄坏**。

把你发现的问题记下来，攒够五六条再说。千万别发现一个改一个——来回对话会白白消耗你的生成次数。

**第 4 步：用 Annotate 模式圈着改**

这是 Build 模式里最爽的功能，也是很多人不知道的。

点 **Edit 工具 → Annotate**，然后**直接在预览画面上画圈**，圈住你不满意的按钮、文字、色块，输入"把圈起来的都去掉"或者"这块换成深色"。Gemini 会同时看你的圈和代码，精准改掉，还不破坏周围布局。

同一个 Edit 工具里还有两个好东西：

* **Design Variations**：对整个应用生成好几套 HTML/CSS  redesign 方案，并排给你挑，逻辑和文字原样保留。想换风格不用重做。
* **直接元素检查**：点页面上任意元素，手动调 padding、margin、尺寸、颜色。比跟 AI 说"左边第二个容器再加 8 像素内边距"精确一百倍。

> 说句实话：**最容易被一眼看出是 AI 生成的应用，往往不是功能不行，是 UI 上堆了一堆没用的 chip 和状态标签**。模型太想表现了。用 Annotate 圈掉它们，五分钟，你的应用就能从"粗糙原型"变成"像那么回事"。

**第 5 步：需要的话，加后端**

在聊天里直接说"加个登录"或者"数据存到数据库"，它会弹出一张 **Enable Firebase** 的卡片，点确认，Firestore 和 Google 登录就在后台配好了。要关系型数据库就说"用 Cloud SQL"，同样弹卡片确认。

**第 6 步：Publish**

右上角点 **Publish**，选 Cloud Run，填个描述和联系邮箱，等 **2 到 4 分钟**。完成后你会拿到一个公网 URL，复制下来发给任何人都能打开。

## 那些官方没大声讲的限制

用过都说好，但有几件事最好提前知道：

* **免费额度是有天花板的**。Google Cloud Starter Tier 让你不用账单账户就发布应用，但**Web 应用限 2 个**，带 Cloud SQL 的也是 2 个。想再多，就得绑一个真实的 Google Cloud 项目（标准项目每个用户每区域上限 10 个）。Starter Tier 的 Cloud SQL 实例规格也小：**0.5 vCPU、2GB 内存、1GB 存储**，做小工具够，跑生产别想。
* **分享出去，账单算你的**。你把应用分享给别人用，别人触发的 API 调用**计入你的用量限额**；如果用的是付费模型，**费用也是你出**。AI Studio 会在配置和分享前提醒你，但别当没看见。
* **下载 ZIP 跑别处，Key 要自己配**。在 AI Studio 里 Key 是自动注入的，但你把代码打包走，就得在自己的托管环境里手动设置 `GEMINI_API_KEY` 环境变量。
* **Build 模式有每日配额**，而且 Google **故意不公布具体数字**——你自己账户里显示的那个才是真的。所以别把"无限白嫖"写进计划里。
* **改 UI 的时间往往比造功能长**。这是 vibe coding 的普遍规律：生成只要一分钟，打磨要一小时。省下来的是启动成本，不是全部成本。

## 进阶

想再往深走几步，这几个方向值得试：

* **App Gallery 偷师**：进 Gallery 找看着顺眼的应用，点 **Remix** 拿一份可编辑的副本，看它的 prompt 是怎么写的、UI 是怎么搭的。这是学 vibe coding 最快的方式。
* **从 GitHub 导入现有项目**：Build 模式输入框的 `+` 菜单里有 Import from GitHub，可以接着你已有的代码往下做。
* **同步到 GitHub 做长期维护**：小工具长成大项目之后，把代码同步到仓库，回到你熟悉的 IDE 里继续。AI Studio 是起点，不是终点。
* **关注 Antigravity**：既然 Build 模式跑的是 Antigravity Agent，那 Antigravity 那边的每一次升级，迟早会回流到这里。两边一起看，会比你只盯一个工具更清楚方向。

最后啰嗦一句我的立场：**别急着问"它能取代程序员吗"**。真正值钱的从来不是写代码的手速，是"知道该做什么、给谁用、做到什么程度算够"的判断力。Build 模式干掉的，是把这个判断变成现实中间那道又厚又烦的墙。墙没了，判断力反而更值钱了。

更多开源技术干货和学习资料，关注公众号「遇码」，领取专属福利。