用 Google AI Studio 从提示词构建并部署多模态应用

Google AI Studio 的 Build 界面解决的是一个很具体的问题：把「我想要一个能做某件事的应用」这句话，直接变成一个可以点击、可以预览、可以继续修改的网页应用。它面向三类人——想快速验证产品想法的创业者、需要给团队做可交互原型的产品经理、以及希望跳过脚手架直接看逻辑的开发者。整个流程不需要先申请 API 密钥、不需要在多个工具之间切换，模型调用、界面生成、后端逻辑都在同一个工作区里完成。如果你更习惯先看现成的工具条目，可以从 Google AI Studio 这一页进入，再回到本文按步骤操作。

需要先说明一点：AI Studio 生成的是真实代码，不是一张静态设计稿。你描述得越具体，它生成的组件、状态管理和数据流就越接近可用状态；描述得含糊，它也会给你一个能跑但很粗糙的版本。所以本文的重点不是「点哪里」，而是「怎么把需求写成它听得懂的提示词」，以及生成之后怎么继续改。

准备工作

账号与访问

打开 aistudio.google.com，用 Google 账号登录即可。构建和测试阶段不需要绑定信用卡，这一点对想先试水的人很关键。登录后你会看到三个主要区域：

• Chat / Playground：用来单独测试模型、试提示词、观察模型能力边界。写应用之前先在这里把提示词调顺，能省掉很多返工。
• Build：应用构建器，本文的主角。所有生成、预览、迭代、部署都在这里。
• API Keys：用于手动集成。如果你打算把模型接到自己的后端服务里，才需要来这里；走 Build 流程的话，前期可以完全跳过。

先逛一遍项目画廊

在动手写第一个提示词之前，建议先花几分钟浏览 AI Studio 的项目画廊。画廊里是别人做出来的成品，能让你快速建立对「这个工具能做到什么程度」的直觉——比如复刻经典小游戏、做交互式小工具这类项目，看一眼就知道生成结果的上限在哪。这一步不是浪费时间，它能显著降低你第一次写提示词时的盲目感。

了解 Build 界面的几个区域

点击顶部导航的 Build 进入构建器，界面上有几块需要认识：

• 「I'm Feeling Lucky」按钮：随机生成一个应用创意，适合完全没有想法时找灵感。
• 提示词输入框：你描述需求的地方，也是后续所有迭代的入口。
• 画布（Canvas）：应用生成后的实时预览区，改动会立刻反映在这里。
• 代码视图：查看和直接编辑底层代码。生成结果不满足要求时，可以在这里手动改。
• 设置面板：模型选择、参数调整、集成配置。

关于成本

构建和测试阶段本身不产生费用；产生费用的是部署到 Cloud Run，以及调用 Veo 这类高级模型。具体的计费规则、免费额度、各模型的价格会随时间调整，务必以官网当前公布的信息为准，不要按任何二手文章里的数字做预算。

操作步骤

第一步：写第一个提示词

从最简单的需求开始，目的是先跑通「描述 → 生成 → 预览」这个循环。在提示词框里输入类似这样的内容：

Build a motivational quote generator that shows a random inspiring quote
with a beautiful background image. Add a "Get New Quote" button.

回车之后，AI Studio 会依次完成几件事：生成 React 组件、套上样式做出界面、给按钮接上交互逻辑、在画布中渲染出实时预览。整个过程通常在十几秒到半分钟之间。

这里有一个值得注意的细节：提示词里同时包含了功能（随机展示名言）、视觉要求（漂亮的背景图）和交互元素（换一条按钮）。三者都写清楚，生成结果才完整。只写「做一个名言生成器」，它可能给你一个没有按钮、只能刷新页面的静态页面。

第二步：用对话迭代界面

第一次生成的结果几乎不会正好符合你的审美，这很正常。不需要重新写提示词，直接在输入框里继续提要求即可，比如：

Make the background darker with better text contrast.
Use a modern sans-serif font.
Add fade-in animation when quotes change.

每提一次，应用就会实时更新。这种「描述氛围、由模型负责实现」的方式，就是所谓的 vibe coding。它的效率来自一个事实：你不需要知道 CSS 怎么写、动画用哪个属性，只需要说清楚你想要什么效果。

第三步：用标注做局部修改

除了整体描述，还可以针对界面上的具体元素做修改。做法是在预览里选中某个元素，然后对它单独下指令，例如：

• 选中一张卡片，输入「Make this draggable.」
• 选中一个面板，输入「Add progress chart here.」

这类局部指令比整段重写提示词更精准，也更省事。每次修改都会即时反映在预览里，不满意就继续改，直到界面符合预期。

第四步：查看和编辑代码

AI Studio 会把生成的逻辑暴露出来，你可以查看组件结构、数据连接方式和 UI 分层。这一步的价值在于：它让你确认生成的东西不是黑盒，而是可以接手继续开发的工程产物。如果某处逻辑不对，可以直接在代码视图里改，不必绕回提示词。

第五步：部署或导出

满意之后有两条路：

• 部署到 Cloud Run：点击右上角的 Deploy，选择 Cloud Run，很快就能拿到一个可分享的线上地址。适合做演示、给团队看、收集反馈。
• 导出到 GitHub：点击 Export，把代码推到 GitHub 仓库，然后在 VS Code 或 Cursor 里继续做正式开发。适合需要长期维护、要接入自有后端或数据库的项目。

两条路并不互斥。常见做法是先部署一个版本用于演示，同时导出代码作为正式开发的起点。

一个完整示例：语音任务管理器

下面用一个从零到部署的完整例子，把上面几个步骤串起来。这个应用的目标是：用户对着麦克风说出任务，应用自动解析出任务名、日期、时间和优先级，并按日期分组展示；同时支持用语音指令完成任务或删除任务。

初始提示词

把需求写成结构化的描述，明确列出要提取的字段、要展示的形式、要用的能力：

Build a voice-controlled task manager.
Users can speak tasks like "Add dentist appointment tomorrow at 2pm" and the AI should:
- Extract task name, date, time, priority
- Add to a task list with proper formatting
- Show tasks grouped by date
- Allow voice commands to mark tasks complete or delete them
Use the Live API for real-time voice interaction.
Display a microphone button and visual feedback when listening.

生成结果通常包含：带麦克风按钮的 React 组件、Live API 的语音输入接入、语音转文字处理、任务解析逻辑，以及按日期分组的任务列表展示。

测试与修正解析逻辑

点击麦克风图标，说一句「Add buy groceries today at 5pm, high priority」，观察应用是否正确转写、是否正确拆出任务名、日期、时间、优先级，以及是否按格式加进了列表。

日期解析往往是最先出问题的地方。如果发现结果不稳定，不要笼统地说「修一下日期」，而是把规则写清楚：

The date parsing is inconsistent. Use a more structured approach:
- Parse relative dates (today, tomorrow, next Monday)
- Default to today if no date specified
- Show date in format "Mon, Oct 28"
- Add color coding: red for overdue, yellow for today, green for future

把「相对日期怎么理解」「没写日期时默认什么」「显示成什么格式」「用什么颜色区分状态」逐条列出来，生成结果的确定性会明显提高。

加入语音指令

在基础功能稳定之后，再追加一组语音指令，并让应用用语音回应：

Add these voice commands:
- "What's on my list for today?"
- "Mark [task name] as complete"
- "Delete all completed tasks"
- "What's my next task?"
The AI should respond verbally using text-to-speech.

完善交互细节

功能齐了之后再处理体验层，可以一次性提出：

• 任务增删时的平滑动画
• 一张每日概览卡片，显示今日到期数、已完成数、逾期数
• 全部任务完成时的庆祝动画
• 深色模式开关

部署

把所有语音指令逐条测一遍，确认没有遗漏，然后点击 Deploy 选择 Cloud Run，拿到分享链接发给团队。这个例子的构建时间大致在二三十分钟量级，稍作打磨就可以作为内部工具使用。

这类语音优先的应用适合几个场景：无障碍辅助、需要解放双手的现场作业、以及驾驶等不方便打字的场合。

第二个示例：竞品情报看板

这个例子演示的是另一类能力——用 Google Search grounding 拉取实时网络数据，再做结构化展示。

核心提示词

Build a competitive intelligence dashboard.
Users enter competitor URLs and the app should:
1. Use Google Search to find recent news and updates about each competitor
2. Extract key information: product launches or feature updates, pricing changes,
customer reviews and sentiment, news articles and press releases
3. Display a comparison table with: competitor name, last major update (with date),
overall sentiment score (1-10), top 3 strengths, top 3 weaknesses, recent news headlines
4. Add a "Refresh" button to get latest data
Use Google Search grounding for all data collection.
Display results in a clean, professional dashboard layout.

生成结果包括：竞品 URL 输入表单、自动接入的 Google Search、数据抽取与解析、可排序的对比表格、情感可视化。

追加可视化与趋势视图

在表格之上，可以要求为每个竞品生成一张定位卡片，包含从官网提取的 logo、标语、公开的关键指标，以及一张按功能、价格、体验、支持、创新五个维度打分的雷达图。如果拿不到真实 logo，可以用图像生成能力做占位图。

再追加一条时间线视图，把过去六个月的产品更新、价格变动、重要新闻和融资事件按时间轴排列，配上图标和说明，历史数据同样通过搜索获取。

自动报告与提醒

加一个「Generate Report」按钮，生成可下载的报告，内容包含基于检索结果撰写的摘要、竞争定位矩阵、功能对比表、威胁评估和行动建议。

如果要做定时监控和邮件提醒，需要注意：这部分超出了 AI Studio 单次生成的范围。实际做法是导出到 GitHub，接入邮件服务，用 Cloud Scheduler 定时触发，再带着环境变量部署到 Cloud Run。同时还需要引入数据持久化，否则每次运行都是无状态的一次性抓取。

这个例子的构建时间大致在四十五分钟到一小时量级，但要做到生产可用，数据持久化和邮件服务这两块必须补齐。

注意事项

提示词要具体到字段级别

从上面的例子可以看出一个规律：凡是把「要提取哪些字段」「按什么格式展示」「边界情况怎么处理」写清楚的提示词，生成结果的可用度都明显更高。反过来，只描述一个模糊目标，得到的就是一个能跑但需要大量返工的骨架。

迭代要分阶段

不要试图用一条提示词把所有功能一次说完。更稳的顺序是：先让核心功能跑通，再修解析和边界逻辑，然后加语音或搜索等能力，最后处理动画、配色、深色模式这类体验细节。每一阶段都先测再往下走，出问题时也更容易定位是哪一步引入的。

部署与计费

构建和测试不收费，但部署到 Cloud Run 以及调用高级模型会产生费用。免费额度、各模型的计费方式、区域可用性都可能变化，做预算前请查官网当前信息。

需要外部服务的功能要自己接

邮件发送、定时调度、数据持久化这类能力，AI Studio 不会替你配好。涉及这些需求时，正确路径是导出代码，在自己的环境里接入相应服务，再部署。不要指望在生成阶段就把它们一并解决。

生成结果需要人工验收

尤其是涉及日期解析、数据抽取、情感打分这类判断性逻辑时，生成出来的规则未必符合你的业务定义。上线前应当用真实样本逐条验证，而不是看到界面能跑就认为功能正确。