在 Google AI Studio 中进行氛围编码：从自然语言提示构建应用
作者：Boxu Li 于 Macaron
介绍
Google AI Studio 的全新 氛围编码 界面让用户只需描述他们想要的功能，而无需逐行编写代码即可构建应用程序。术语 氛围编码（由 AI 研究员 Andrej Karpathy 于 2025 年创造）指的是一种工作流程，在这种流程中，开发人员的角色从手动编码转变为通过对话的方式指导 AI 助手进行迭代过程[1]。随着这种方法现在集成到 AI Studio 中，Google 旨在让 AI 应用开发对所有人都可及——从经验丰富的程序员到完全的初学者。事实上，Google 设定了一个雄心勃勃的目标，即在年底前在 AI Studio 上构建 一百万个 AI 应用，将氛围编码作为驱动这一规模的引擎[2]。此次发布是 Google 战略中的重要一步，旨在让创建 AI 驱动的应用程序“如同建立网站一样主流”[3]，降低学生、企业家和非程序员的门槛。
Vibe 编码在 AI Studio 中的工作原理
在 AI Studio 的构建模式中，创建应用程序变成了与 AI 的互动对话。您可以用自然语言描述您想创建的应用程序，例如，“构建一个园艺规划助手，让我可以绘制布局，然后为每个区域推荐植物”。AI 默认使用 Google 的 Gemini 模型，解析此高层次请求并自动生成应用程序的初版，包括用户界面、所需代码（前端和后端），甚至项目文件结构。从这里，您可以通过对话或直接编辑来逐步完善应用程序。如果某些功能无法按预期工作或需要改进，只需告诉 AI 要更改什么（或切换到代码编辑器手动调整），AI 将相应更新代码。这种“提示-生成-完善”循环会持续进行，直到您对结果满意。重要的是，AI Studio 支持编程和无代码方法并行使用——非技术用户可以完全依赖自然语言指令，而开发者可以根据需要检查和细化生成的 React/TypeScript 或 Python 代码。一旦应用程序看起来不错，部署只需点击一下：AI Studio 集成了一键发布到 Google Cloud Run，立即在实时 URL 上托管您的应用程序以供测试或共享。总而言之，AI Studio 的 vibe coding 工作流程可以被视为几个广泛的步骤：
- 构思（提示）： 用一个高级提示描述整个应用程序的目的和功能。例如：“创建一个个人预算追踪应用，包括按类别显示支出的图表和一个提供储蓄建议的AI聊天机器人。”[11][12]
- 生成： AI Studio 后端（Gemini 2.5 Pro 和相关 API）生成应用程序的初始版本——构建 UI 布局、编写前端逻辑（例如，React 组件）、设置所需的后端路由或 API 调用，并组装项目文件[13][5]。对于简单的应用程序，这个过程通常在几分钟内完成，甚至只需几秒钟。
- 测试与预览： 应用程序会加载到您的浏览器中的交互式 预览 窗格中。您可以立即与之互动，查看其功能。（在后台，应用程序在一个沙盒环境中运行——无需手动设置或服务器即可进行预览[14]。）
- 优化： 通过对话或直接修改代码来优化应用程序。您可以说，“现在添加一个登录页面”或“让图表使用不同的颜色”，AI 会通过修改代码来应用这些更改[15][7]。AI Studio 的助手还可以根据请求调试问题或添加新功能。这种迭代循环让您可以自然地逐步增强应用程序的功能和解决问题。
- 部署： 一旦满意，您可以通过最终提示或单击将应用程序上线。AI Studio 会在后台处理代码的打包和部署到可扩展平台（Google Cloud Run）[16][9]。最终结果是一个可以分享或继续开发的在线应用程序 URL。
在整个过程中，您始终保持控制：您可以随时查看生成的代码，测试应用的表现，并确保它在部署前符合您的需求。高层次的简单性与低层次的透明性相结合，使得在 AI Studio 中进行 vibe 编码对于初学者和有经验的开发者都非常强大。谷歌将其比作一个 AI 配对程序员或副驾驶，处理样板代码和繁重的工作，而您则专注于引导应用的 「vibe」——您设想的想法和用户体验[17][18]。
Vibe 编码界面的主要功能
Google AI Studio 的 vibe 编码环境提供了多种功能和用户界面元素，使提示到应用的旅程顺畅且直观。主要功能包括：
- 模型和功能选择器： 在提示之前，构建选项卡可让您配置应用程序将使用的 AI 模型和服务。默认情况下，它选择Gemini 2.5 Pro（通用 LLM），但您可以通过点击来混合使用专用模块——例如，用于图像生成的 Imagen、用于视频理解的 Veo、用于特定任务的小型模型如 Nano Banana，甚至可以启用 Google 搜索集成[19][20]。这些模块化的“AI 超能力”以切换开关的形式呈现，因此您可以轻松地说，包含图像识别或使用网络搜索数据，系统会将这些功能集成到生成的应用程序代码中。Gemini 识别这些组件并在应用程序组装期间将它们绑定在一起[20][21]。这意味着即使是复杂的多模态应用程序（例如，可以显示图像或地图的语音聊天机器人）也可以轻松创建。
- 自然语言提示输入： Vibe 编码的核心是提示框——您只需用简单的英语（或任何支持的语言）输入您想要应用程序执行的操作。例如：“构建一个互动问答游戏，向我提问数学问题并使用 AI 导师提供反馈”。系统还可能提供示例提示或模板来指导您（例如“使用 Gemini 的食谱生成器”入门提示）[22]。您无需指定技术细节，例如框架或语法——AI 会根据您的描述找出必要的技术栈（通常是用于 Web UI 的 React + TypeScript，以及任何后端逻辑）[12]。这降低了门槛，使非程序员也可以通过描述他们的想法来启动应用程序开发。
- 双重聊天 + 代码界面： 一旦生成应用程序，AI Studio 会将视图分为两个窗格的编辑器。在左侧，您可以通过与 AI 助手（Gemini）的对话聊天界面提出关于代码的问题、请求更改或新功能，并获得解释。在右侧，您可以看到带有文件选项卡（用于前端、后端、配置文件等）的完整项目代码编辑器[23]。每个文件都附有工具提示或简要说明其用途（对于初学者了解 App.tsx 或 constants.ts 之类的东西有帮助）[24]。您可以直接在此窗格中编辑代码——例如，开发人员可能会在 CSS 文件中微调样式或调整硬编码值。所有更改都可以立即在实时预览中进行测试。这种分屏界面服务于两类受众：非编码者可以主要停留在聊天“氛围”中指导更改，而编码者可以在需要时深入到实际代码库中[7]。
- 上下文感知建议： AI Studio 不仅仅是被动地等待您的指令——它会主动提供智能建议以改进应用程序。Gemini 模型分析当前的应用程序，可能会通过 Flashlight 功能推荐相关的增强功能[25][26]。例如，如果您构建了一个图像画廊应用程序，它可能会建议“添加显示最近查看图像历史记录的功能”[25]。这些建议会出现在界面中，指导您下一步尝试什么，就像一个 AI 产品经理提供想法一样。您可以点击接受建议，让 AI 实施它，或者忽略它。这有助于用户发现他们可能没有想到的功能，并展示了 AI 迭代优化项目的能力。
- “我感觉幸运”提示生成器： 为了激发创造力或帮助您在不确定要构建什么时，Google 添加了一个有趣的我感觉幸运按钮[27]。每次按下此按钮都会生成一个随机的应用程序概念，包含一个提示和一组预配置的 AI 功能。它可能会提出一些疯狂或小众的想法——例如*“一个使用图像生成来可视化您的后院的梦幻花园设计师”或“一个有 AI 主持人与你开玩笑的问答游戏”*[28]。这些都是完全功能性的起点；如果您继续，系统将实际组装建议的应用程序。Google AI Studio 的产品负责人 Logan Kilpatrick 解释说，这一功能鼓励探索：“您可以获得一些非常非常酷的不同体验”，而这些体验可能是您之前不会构建的[29]。这是一个一键式的方式来探索可能的艺术，也许还会偶然发现您的下一个大应用程序创意。
- 秘密变量和 API 密钥： 许多有用的应用程序需要调用外部 API 或服务（例如，天气应用程序可能会调用天气 API）。AI Studio 现在包括一个秘密变量保险库，以安全地存储项目中的 API 密钥或其他敏感凭证[30][31]。这意味着您可以提示 AI 集成外部服务（例如，“从 AlphaVantage API 获取实时股票价格”），而无需在代码中硬编码秘密密钥。您在 Secrets UI 中添加 API 密钥，AI 知道安全地引用它。这个功能对于将原型转化为生产就绪应用程序至关重要，因为它支持即使在 AI 生成的代码中也能保持良好的安全实践。
- 细粒度 UI 编辑工具： 虽然您始终可以用文本描述 UI 更改（例如“将按钮变为蓝色”），但 AI Studio 也允许您更直接地与预览交互。您可以在预览中单击 UI 元素，并为 Gemini 添加说明[32]。例如，您可能会选择一个标题并说“将标题放大并居中”。AI 会识别该元素并调整相应的代码（HTML/CSS）以实现更改[33]。这是一个强大的功能，桥接了所见即所得编辑和 AI 编码——感觉就像在与界面对话以进行自定义。它减少了在代码中寻找样式或布局调整的需要；相反，您只需指向屏幕并告诉 AI 您想要的内容。
- 一键部署： 当您的应用程序准备就绪时，部署非常简单。AI Studio 与 Google Cloud Run 集成，提供一键部署到云端[10]。在 Studio 内只需一个操作，您的应用程序（前端和后端）就会被容器化并部署到 Google 的基础设施上，并且您会得到一个可以让他人访问的实时 URL。这消除了传统上设置服务器或托管的复杂步骤。在 Google 的演示中，仅使用 Studio 界面和提示就可以在不到五分钟内从头到尾部署一个功能齐全的 AI 聊天机器人应用程序[34]。对于轻量级应用程序或原型，您甚至不需要在文件中提供信用卡信息——AI Studio 的免费层允许您自由构建和测试，只有在调用某些高级模型（例如最大的视频模型）或想要在生产中扩展时才需要付费计划[35][36]。这里的理念是*“免费构建，增长时付费”*，因此创作者可以无障碍地进行实验，但在需要时仍然可以进行企业级托管[37]。
- 导出和协作： 除了部署到 Cloud Run，AI Studio 提供了多种选项来管理或共享您的项目。您可以通过几次点击将完整代码保存到您的 GitHub 存储库，下载项目为 zip 文件，甚至可以在 AI Studio 的画廊中分叉应用程序进行再创作[38]。这意味着您永远不会被锁定——代码是您的，可以在平台外查看和使用。它还暗示着未来的社区功能：一个应用画廊展示示例应用程序和模板（目前由 Google 提供以及您自己的过去创作，计划包括用户共享的应用程序）[39]。这个画廊可能会演变成一种应用商店或社区中心，人们可以在其中发现 AI Studio 应用程序、从中学习并基于彼此的工作进行构建，通过共享进一步加速开发。
实时展示 Vibe 编码：从提示到原型
没有什么比亲眼看到 Vibe 编码会话更能展示 AI Studio 的能力了。Google 团队和早期用户分享了几个演示，展示了一个想法如何快速变成一个可用的应用程序。例如，一位 Googler 展示了一个*“花园规划助手”*应用，只需几次点击即可完成：他输入提示，系统就生成了一个完整的应用，包括可视化布局工具和对话式植物推荐功能，所有这些都在瞬间完成[40][41]。在另一个官方演示中，一个功能齐全的聊天机器人（带有自定义知识库）在不到 5 分钟内构建并实时部署——完全通过自然语言指令和功能切换，无需手动编码[34]。这些快速结果强调了 Vibe 编码的生产力：过去需要几天的编程工作现在可以在喝咖啡的时间内完成。
作为一次动手试验，VentureBeat 的一名记者通过请求一个简单的游戏来测试 AI Studio。他给 Gemini 提供了一个描述：“一个随机掷骰子的网站应用程序，用户可以选择不同的骰子（d6，d20 等），看到动画滚动，并选择骰子的颜色。” 在大约 65 秒 内，AI Studio 生成了一个符合这些规格的可运行的 web 应用程序[42][43]。生成的应用程序具有简洁的用户界面（由 React、TypeScript 和 Tailwind CSS 构建），用户可以选择一个 6 面、10 面或 20 面的骰子，自定义其颜色，并点击按钮进行掷骰。每次掷骰都会显示动画并随机显示结果——完全符合要求。平台不仅生成了一个代码文件，还创建了一个结构化项目，包括多个组件（如主界面的 App.tsx，骰子数据的 constants.ts，以及滚动逻辑和控件的独立模块）[44]。这种模块化输出表明 AI 并不是在拼凑一个脆弱的脚本，而是真正以干净、可维护的方式架构应用程序，类似于人类开发者的做法。记者随后决定通过添加骰子滚动时的音效来增强应用程序。他只需告诉 AI 他的想法，并通过一个后续提示，助手就编写了额外的代码，使每次滚动时播放声音——将其无缝集成到已有代码库中[44]。这一切都在一个浏览器标签页内完成，没有人工手动编写任何代码。这些例子突显了使用 vibe coding 时开发过程的快速和迭代性：你描述一个想法，几乎立即得到一个可用的原型，然后在与 AI 的对话中对其进行完善。
值得注意的是，尽管这些演示令人印象深刻，但人类开发者仍在审核和指导结果方面扮演着重要角色。AI Studio 生成的应用程序有时可能需要针对边缘情况或性能进行调整，特别是对于更复杂的项目来说。Vibe 编码哲学鼓励在人类参与的情况下进行专业使用——您让 AI 先进行繁重的工作，然后您验证功能，调整细节，确保最终产品符合质量和安全标准[45][16]。实践中，早期用户报告称，界面中 AI 建议与直接代码访问的结合使得审核过程相当直观[46]。最重要的是：AI Studio 可在几分钟内交付一个可用的应用程序，经过用户的指导和打磨后，这个原型可以迅速发展成生产级应用程序。
您可以构建的应用示例（带提示）
为了激发一些灵感，这里有五个不太复杂但实用的应用示例，您可以使用 Google AI Studio 的 vibe 编码来构建。对于每个示例，我们都附上一个您可以输入给 AI 以创建应用程序的提示：
- 智能建议的个人待办事项清单 – 一个简单的任务跟踪网页应用，由AI增强功能。 例如，该应用可以分析您的任务并建议提醒或子任务。
- 提示： “构建一个基于网页的待办事项应用。它应允许我添加、编辑和勾选任务。包含一个AI助手，能建议截止日期或将任务分解为更小的步骤。界面应简洁且适合移动设备。”
- 在此情况下，Gemini将生成任务管理UI并使用其推理能力提供建议 – 例如，如果您添加“计划度假”，AI可能会建议子任务如“预订航班”。
- 输出： https://ai.studio/apps/drive/1_ow-8TYDMWxms56bzQ-QKHsNWCA_F0fr
- 提示： “构建一个基于网页的待办事项应用。它应允许我添加、编辑和勾选任务。包含一个AI助手，能建议截止日期或将任务分解为更小的步骤。界面应简洁且适合移动设备。”
- 计划与地图指南 – 一个移动友好的旅行行程规划器，集成地图数据。 这可以利用Google Maps和实时信息。
- 旅行
- 提示： “创建一个城市旅行规划应用。用户输入城市，应用生成为期3天的行程，包括每日的景点、餐厅和酒店。包含一个互动地图，标记每个推荐地点，并允许用户点击获取详情（使用实时数据或搜索）。设计应适应手机使用。”
- 在这种情况下，AI可能会使用Google搜索工具和Maps API基础（通过提供的凭证）来获取热门地点，然后将它们显示在地图组件上。vibe编码界面对外部API密钥（通过秘密变量）的支持将使得安全使用Google Places API等成为可能。结果是一个感觉像个性化导游的应用，只需描述想法即可创建。
- 输出： https://ai.studio/apps/drive/1QO0OnH8vjUZuX3e1IqtQ4-1pqSZYAJLO
- 互动数据仪表板 – 一个将数据转化为图表和见解的分析仪表板。 例如，小企业可能想要可视化销售数据。
- 提示： “构建一个用于销售分析的数据仪表板网页应用。它应有一个上传销售数据CSV文件的功能。数据上传后，应用显示汇总（总销售额、平均订单价值）并生成两个图表：一个月度销售额随时间变化的折线图和一个按产品类别划分的销售饼图。在图表下方包含AI总结，突出任何趋势或异常，以简单语言表述。”
- 使用此提示，AI Studio可能会生成一个多面板仪表板。它可能会结合Chart.js或D3等图表库来渲染图表，并使用Gemini的推理来输出文本总结（例如“由于夏季促销，7月销售激增”）。这展示了vibe编码如何通过结合UI元素（文件输入、图表画布）的编码与数据的AI分析来处理互动数据可视化。这样的仪表板可以比传统BI工具更轻松地构建和调整 – 且无需用户自己编写图表绘制代码。
- 输出： https://ai.studio/apps/drive/1qW2V3lfyEF0QDDXQxuYCF0O90QdL3_uB
- 提示： “构建一个用于销售分析的数据仪表板网页应用。它应有一个上传销售数据CSV文件的功能。数据上传后，应用显示汇总（总销售额、平均订单价值）并生成两个图表：一个月度销售额随时间变化的折线图和一个按产品类别划分的销售饼图。在图表下方包含AI总结，突出任何趋势或异常，以简单语言表述。”
- AI驱动的学习闪卡 – 一个为学生设计的迷你学习游戏。 该应用可以测试用户并根据其表现进行调整。
- 提示： “创建一个用于语言学习的闪卡测验网页应用。应用应测试用户的西班牙语词汇。每个闪卡显示一个英语单词，用户需输入西班牙语翻译。应用应告知他们是否正确并记录分数。添加AI导师模式：如果用户错误，AI会给出提示或简要说明。使用简单、丰富多彩的设计，并确保其在移动设备上正常运行。”
- 在这种情况下，生成的应用可能包括一组预定义的问答对（您可以进行细化或扩展）、一个用于答案的输入框以及检查正确性的逻辑。AI导师的有趣之处在于：可以在后台提示Gemini在用户犯错时生成有用的提示或记忆法，使学习体验更具吸引力。这个例子展示了一个迷你游戏/教育工具 – 这是vibe编码应用可以通过结合动态AI反馈脱颖而出的一个类别，而传统闪卡应用缺乏这一点。
- 输出： https://ai.studio/apps/drive/1rpxIsuwLz7cqypH9oYjGCwSIh5PBKXxL
- 提示： “创建一个用于语言学习的闪卡测验网页应用。应用应测试用户的西班牙语词汇。每个闪卡显示一个英语单词，用户需输入西班牙语翻译。应用应告知他们是否正确并记录分数。添加AI导师模式：如果用户错误，AI会给出提示或简要说明。使用简单、丰富多彩的设计，并确保其在移动设备上正常运行。”
- AI厨师的食谱查找器 – 一个根据现有食材建议食谱的烹饪助手。
- 提示： “构建一个食谱查找应用。用户可以输入或选择他们拥有的食材（如‘鸡肉、番茄、罗勒’），应用将找到使用这些食材的食谱。它应显示食谱建议列表，包括标题、图片和简要描述。添加AI聊天厨师，用户可以提问烹饪建议或替代品（例如，‘我没有黄油，可以用什么代替？’）。应用应具有吸引人的美食设计。”
- 这个应用创意结合了几个元素：食材选择界面，可能调用食谱API（用于获取真实食谱 – 您可以使用由秘密变量管理的服务如Spoonacular的API密钥）以及使用Gemini模型回答烹饪问题的集成聊天机器人角色（“AI厨师”）。AI Studio的多模态能力意味着如果没有可用的图像URL，您甚至可以启用Imagen为每个建议的菜肴生成图片，真正将创造性与实用性结合起来。从vibe编码的角度来看，这个例子展示了如何指示AI在一个应用中编织数据检索、图像生成和对话式问答 – 所有这些都通过一个简单的提示和后续的细化。
- 输出： https://ai.studio/apps/drive/19VWB2qpa7bEtFB8hAjsQfSpJ6SPmf5KC
- 提示： “构建一个食谱查找应用。用户可以输入或选择他们拥有的食材（如‘鸡肉、番茄、罗勒’），应用将找到使用这些食材的食谱。它应显示食谱建议列表，包括标题、图片和简要描述。添加AI聊天厨师，用户可以提问烹饪建议或替代品（例如，‘我没有黄油，可以用什么代替？’）。应用应具有吸引人的美食设计。”
以上每个示例都可以在 AI Studio 中通过几个提示和选择来构建，然后进行迭代改进。它们展示了氛围编码可以处理的应用范围——从简单的网络工具到互动教育游戏和 AI 增强的创意工具。共同点在于，作为创造者的你专注于产品理念和用户体验，而 AI 则负责将这一愿景转化为可运行的代码。
最后思考
Google AI Studio 的 vibe 编程界面代表了软件构建方式的重大演变。通过将自然语言描述转化为可运行的应用程序，它使更多不具备深厚编码专业知识的人能够创造科技解决方案。对于产品负责人或开发人员来说，这开启了一个新的、更快速的原型制作循环——你可以通过字面意义上的构建一个最低可行产品在几分钟内立即测试想法。从网络应用程序、移动友好工具到数据仪表板和小游戏，随着 Google 集成更多的 AI 工具包（以及像 Gemini 3 这样的更大模型在平台上出现），可能性的范围不断扩大。虽然传统开发不会消失，但 vibe 编程 以 AI 优先的方法增强了它：你设定愿景并“引导”AI，作为回报，你会得到一个可以进一步完善和扩展的功能应用程序。这种人类创造力与 AI 能力之间的协同作用是 Google AI Studio 的核心。该平台仍在发展中（在接下来的几个月中承诺会有更多功能[47][48])，但已经很明显，vibe 编程有潜力加速创新并降低将新应用想法实现的门槛[49][50]。在速度和可访问性至关重要的世界中，Google 对 vibe 编程的投入——让人们通过聊天来“构建”——很可能在软件开发中带来革命性变化。
来源： Google Cloud & AI Studio Documentation[51][52]; News9live (2025年10月)[53][10]; VentureBeat (2025年10月)[54][43]; SiliconANGLE (2025年10月)[49][55]; TestingCatalog (2025年10月)[4][56]; Learn Prompting 博客 (2025年9月)[5][6]。
[1] [11] [13] [15] [16] [17] [18] [45] [51] [52] Vibe 编程解析：工具和指南 | Google Cloud
https://cloud.google.com/discover/what-is-vibe-coding
[2] [3] [7] [10] [12] [20] [26] [31] [34] [47] [53] Google 为 AI Studio 添加了 vibe 编码：通过与 AI 聊天来构建应用程序 | 人工智能新闻 - News9live
[4] [21] [32] [39] [48] [56] 谷歌对 AI Studio 进行了改版，增加了新的功能以支持 vibe 编程
https://www.testingcatalog.com/google-revamps-ai-studio-with-new-features-for-vibe-coding/
[5] [6] [8] [22] 在 Google AI Studio 中用 Vibe 编写你的下一款 AI 驱动的应用
[9] [30] [33] [49] [50] [55] 谷歌在最新版本的 AI Studio 应用开发平台中采用了 Vibe 编码 - SiliconANGLE
[14] 免费在线 Vibe 编程与 Google AI Studio：任何人都可以构建应用程序！| 作者：Abish Pius | 人工智能世界写作 | 2025 年 9 月 | Medium
[19] [23] [24] [25] [27] [28] [29] [35] [36] [37] [38] [40] [41] [42] [43] [44] [46] [54] Google的新Vibe Coding AI Studio体验让任何人在几分钟内构建和部署应用 | VentureBeat
