8.0
热点
AI SCORE
编程提效2026-03-20 01:48
Google AI Studio 快速编程秘诀
DEV Community · Guillaume Vernade#Prompt技巧#Google AI#工作流
Editor brief · 编辑速览
开发者分享在 AI Studio 中优化 Prompt 和快速原型的实用技巧。高效利用 AI 编程工具的必读指南。
你可能已经知道，Google AI Studio 是一个用来体验 DeepMind 模型、调整各种参数的沙盒。但你是否知道，你还可以免费用它来 vibe coding Web 应用，并且只需点击几下就能发布？
它的 Build 模块彻底改变了「vibe coding」的玩法：你不需要亲手编写一行代码，就能生成可正常运行的应用。借助 Gemini 模型，你可以快速构建并迭代自己的想法，在几分钟内把一个简单概念变成完整部署的原型。
结合过去一年里我对这个平台的亲身探索，这篇指南将介绍 AI Studio 的核心能力、它与其他工具的区别，以及如何通过更有效的 prompt 构建应用。
本文将包含以下内容：
为什么使用 AI Studio？
App Gallery 与 Remix
开始 Vibe Coding
创建带数据库的应用
让 Vibe Coding 效果更好的技巧
AI Studio 与 Antigravity：分别应该在什么时候使用？
我最喜欢的作品
在深入讨论「怎么做」之前，我们先回答一个最常见的问题：市面上已经有许多流行的 AI 应用构建工具，为什么还要选择 AI Studio？
第一个理由是 AI Studio 原生支持 Gemini。它能够创建使用 Gemini 模型的应用，而且只要你一直在 AI Studio 内使用，就无须额外配置任何东西。你以及与你共享应用的人都可以使用免费额度，免费体验由 Gemini 驱动的应用。
注意：部分高级模型需要付费 API key，但始终会有提供免费额度的替代模型。
不过，真正让 AI Studio 与众不同的是隐私保护。
在许多竞品平台的免费方案中，除非你付费，否则生成的所有应用默认都是公开的。任何人都能看到你正在做什么。而在 AI Studio 中，你的应用会保持完全私密。当你要验证个人创意、处理敏感的客户项目，或者只想自由试验而不必担心被公开看到时，这一点是非常大的优势。
它采用了与 Google Drive 文件相同的共享机制，因此共享应用非常方便，其他人也无须创建新账户就能试用。
专业提示：和所有 Drive 文件一样，你可以把应用设置为「知道链接的任何人」均可访问。我在 LinkedIn 上发帖时就是这么做的，示例可以参考本文最后一节。
无论如何，即使你并不使用 AI Studio，我接下来分享的技巧应该依然适用，因为大多数 vibe coding Agent 的工作方式都很相似。
如果你刚接触 vibe coding，理解代码如何生成的最佳方式，就是直接探索 AI Studio 内置的 App Gallery。
探索：看看 AI Studio 团队已经构建出的优秀示例。我个人最喜欢其中的 Spatial understanding 和 Comic Book Creator。它们需要付费 API key 才能使用 Nano-banana Pro，不过你可以尝试 Remix，并将其改成只使用 Nano-Banana 的免费额度。
查看代码：对于每个应用，你都可以点击左上角的「code」，访问应用的全部代码，了解具体功能是如何实现的——或者更有可能的是，把代码复制粘贴给一个 AI coding Agent。
Remix：如果你喜欢某个应用，只想做出自己的版本，可以点击「remix」创建一份归你所有的副本。这是一种很棒的起步方式：从一个已经能够正常运行的现有代码库出发，再把它改造成自己的应用。
准备好构建自己的应用了吗？整个过程非常直接：打开 Build 页面，在 prompt 中描述你希望应用实现什么功能，按下回车，然后看着 coding Agent——与 Antigravity 中的 Agent 类似——生成 UI 和业务逻辑。
注意：生成过程可能需要相当长的时间，平均大约 5 分钟。所以你可以去冲杯咖啡，或者读篇博客，等 coding Agent 完成工作后再回来。
得到一个可以运行的应用后，你可以继续在左侧 code assistant 的聊天框中输入 prompt，不断添加新功能。
新功能：过去几周新增的一项很酷的能力是，code assistant 现在可以在服务端运行。这意味着你可以关闭标签页或者切换设备，它仍然会继续替你工作。
根据实际情况，你还可以使用那两个按钮，直接在界面上绘制内容，为模型提供视觉线索。用这种方式反馈 UI 问题非常方便。
另一个选择是直接口述你需要进行哪些修改。当你在手机上临时想给应用添加新功能时，这种方式很方便，但如果修改要求非常精确，我并不推荐这么做。
从本周开始，你还可以要求 coding Agent 创建能够跨 session 或跨用户保存数据的应用。只需要明确告诉它使用数据库即可。（没错，我一直想做一个属于自己的购物清单应用，而且已经想了很久。）
当它询问时，点击「Enable」，接下来见证奇迹发生就行。
在后台，它会配置 Firebase 集成，并创建一个 Firestore 来存储数据。它还会为应用添加 Google 账户身份验证，以便应用知道当前是谁在尝试访问哪些数据。
你不需要知道数据库的具体结构。code Agent 会根据应用的需要替你管理一切。你希望每个用户都有自己的购物清单？砰，已经完成！现在又希望用户可以共享清单？同样完成！给商品添加标签？小菜一碟。
唯一的限制就是你的想象力！
如今，「vibe coding」已经成为我的一种本能反应。在真正转向复杂 IDE 之前，它绝对是验证用户体验原型的最佳方式。但如果不够谨慎，你也很容易浪费大量时间，无法让 Agent 高效工作。
下面是我充分发挥 AI Studio 能力的几个实用技巧，排列不分先后。
如果你对于应用应该长什么样有明确看法——我个人通常没有，管他的，先冲再说——那么一个好办法是先使用 Stitch 之类的工具迭代设计。Stitch 使用 Nano-Banana。然后把生成的图片交给 coding Agent，让它清楚你期望得到什么。
AI 会犯错。它可能误解你的 prompt，也可能写出破坏原本正常应用的代码。发生这种情况时，你可以让它「fix the error」，大多数时候都能奏效，但有时也不行。
在 vibe coding 中，一项非常重要的能力是判断：什么时候应该继续尝试用 AI 修复，什么时候应该从头开始，以及什么时候应该亲自动手修复。
我的个人建议是，如果 Agent 尝试两轮后仍然不知道怎么修复，就别再坚持，直接退回之前的版本。否则，你可能会浪费一个小时，毫无意义地和 AI 争论。如果你发现，向 AI 解释需求所花的时间已经和自己动手差不多——比如「把这个时间改成另一个时间」——那就直接自己改。
好在 AI Studio 可以让你轻松返回之前的版本。
Checkpoints 是内置的版本历史功能，可以让你立即回退到上一个正常工作的状态。这是恢复到之前可用版本最方便的方式。
警告：有一点需要特别小心。你可以回退代码，却不能回退数据库变更，因此不要加载数据库更新之前创建的 checkpoint。我的处理方式是：加载旧 checkpoint，复制代码，然后重新加载较新但已经损坏的代码，再要求 assistant 参考旧代码进行修复。
对于里程碑版本，我推荐使用 GitHub 进行保存。每当应用到达某个里程碑时，例如刚刚完成一项新功能，就应该用它保存应用当前的状态。只需点击几下就能启用：
然后，你只需要描述新功能，再把它 commit 到 GitHub。
不过，目前的一项限制是同步只能单向进行。因此，它很适合用来把当前状态保存在一个方便日后复用的位置，但你还不能在 GitHub 中更新代码，再将其同步回 AI Studio——至少目前还不行。
别再只依赖文本了。正如前面提到的，AI Studio 还提供了其他选择。
语音：非常适合快速迭代，尤其是在手机上调整应用时。
「Annotate App」工具：这是我在处理 UI 时最喜欢的功能，没有之一。截取应用截图，直接在上面画出修改要求，例如「把这个按钮移动到这里」「删除这个菜单」，然后把它发送出去。
专业提示：始终为标注后的图片配上一段清晰的文字说明，为模型提供尽可能完整的上下文。
随着应用规模增长，模型可能会开始「产生幻觉」、忘记之前实现的功能，或者把逻辑搅成一团。这几乎总是一个结构问题。
默认情况下，AI 往往会把所有内容都塞进一个巨大的 app.tsx 文件。应该从一开始就否决这种做法。
黄金法则：从项目一开始就告诉模型，把不同功能拆分到独立的文件和组件中。
为什么？这样可以显著减少错误，并加快生成速度。同时，你也能立刻发现 AI 是否正在乱改代码。例如，如果你只是要求修改 UI 颜色，它却开始重写 auth-service.js，那么你就知道它已经完全跑偏，可以立即叫停。这种方式能在代码审查时节省大量时间，至少让你一眼就能确认代码库中正确的部分是否得到了更新。
为了帮助 AI 记住应用应该实现什么功能，要让它尽可能多地维护文档，从微观到宏观都要覆盖。
Docstrings：始终要求应用为所有函数编写文档，说明函数的作用，以及输入和输出分别是什么。
文件文档：既然你会为每项功能创建独立文件，就要求 AI 在每个文件顶部维护一段文档，详细说明该功能的用途、需要覆盖哪些 use case，等等。
Design.md：最后，要求它在应用根目录维护一份描述整个应用的设计文档。
为什么？让 AI 多次重复记录所有内容，既能帮助它，也可能帮助你自己，找到每项功能的实现位置，并明确预期行为。这有点像纠错码的工作方式：让同一项内容出现多次，可以降低它被意外删除的概率。
过一段时间后，你会发现自己总是在向 coding Agent 重复相同的要求，最后肯定会厌倦。这就是 AI Studio 允许你自定义底层「System Instructions」的原因。不要把它留空！你可以在里面定义自己偏好的技术栈、框架、编码风格，当然也可以写入我前面提到的所有要求。
你可以把它看成提供给新入职初级开发者的 onboarding 资料包。他们需要了解你希望他们采用什么工作方式，如何编写代码、维护文档和沟通，等等。第一次可能无法把它做到完美，但重要的是不断复盘、持续改进这套资料，让之后加入的新人获得更好的 onboarding 体验，从而更快地产生实际价值。
除了一些更有针对性的指令——例如相信我提供的模型名称，不要擅自修改——下面这些是我一直在使用的内容：
## Coding/documenting guidelines
* Create a file per feature or related features, split as much as possible in different files;
* add docstrings to all functions to explain what they do;
* start each file with a long comment explaining in detail what the feature is about and the different use cases;
* maintain a `Design.md` document at the root of the app that documents all the features of the app;
* log as info all function calls (with their parameters) and log all genai calls with all their parameters (model used, prompt, config) and their outputs, just strip inline data;
* group all configurable items (like model names) in a centralized file;
* always create a way to test the scripts without altering the data;
你会看到，我还加入了一些与日志有关的指令，因为日志对调试总是很有帮助；另外还要求提供 dry run。这两项无论是否采用 vibe coding，都是良好的工程实践。
试试这些方法，然后告诉我，它们是否改善了你的 vibe-coding 体验！
现在，你已经对自己的应用感到满意，并希望把它分享给全世界——或者只分享给一部分人。AI Studio 提供了两种发布应用的方式。
最简单的方式，就是直接使用 AI Studio 的共享功能。
你既可以选择只和特定的人共享应用，也可以允许任何拿到链接的人访问。我在 LinkedIn 上分享时使用的就是后一种方式。
它的一项重要优势是，其他人也能访问代码，并且可以根据需要 Remix。不过，对于技术背景不强的朋友，你也可以发送一个以全屏模式打开应用并隐藏 code Agent 的链接。
另一个不错的优势是，如果应用使用了 Gemini，你的朋友在使用应用时会消耗他们自己的免费额度；如果使用的是付费模型，则使用他们自己的 API key。这意味着你不需要为此支付任何费用。
如果你想真正把应用发布给实际用户使用，就应该采用这种方式。只需点击几下，它就会创建一个 Cloud Run 容器，把应用发布到网上，并提供一个任何人都能访问的 URL。
之后，你可以购买域名，为应用配置一个正式的网址，将其部署到不同区域，实现自动扩缩容，等等。不过，从这时起，它就是你自己的应用了，使用成本也要由你承担。
由于 AI Studio 使用的底层 coding Agent 与 Google Antigravity 类似，你可能会想知道，应该在什么时候使用哪个工具。下面是我的经验法则。
在以下情况下使用 AI Studio：
你正在为前端 UI 或轻量级全栈应用制作原型。
你希望真正通过多模态输入进行「vibe code」，例如直接在应用 UI 上绘制修改要求，或者使用语音。
你希望通过一个简单链接，立即与利益相关者或朋友共享可以运行的原型，并且不想管理托管服务。
你希望无须进行任何配置，就能原生访问 Gemini 模型，快速构建 AI 功能。
在以下情况下使用 Antigravity：
你正在构建生产级复杂应用，并且对深层后端基础设施有较高要求。
你需要精细控制依赖项、复杂的构建步骤和部署流水线。
你要把 AI coding Agent 集成到现有的大型代码库中，而不是从空白项目开始。
你可以把 AI Studio 看作一个用于快速迭代的创意速写本，而 Antigravity 则是一间功能齐全的开发者工作室。
现在，你已经掌握了 vibe coding 的基础知识。学习它最好的方式，就是亲自动手。我刚开始时也没有完美遵守所有这些规则，但正是在犯错的过程中，你才会不断完善自己的工作流！
为了展示它能做到什么，下面是我主要使用这些方法，从零开始完全通过 vibe coding 创建的几个应用：
[AI 驱动的简历]：一份由 AI 驱动的简历。不要只是阅读它，还可以向 Gemini 询问关于我的问题——它知道一些简历中没有写出来的趣事；也可以根据你希望向我推荐的职位调整简历，甚至要求生成音频概览。可以前往体验。
[Talk coach]：你的演讲教练。向它提供一段录音或 YouTube 链接，它就会告诉你怎样才能做得更好。可以前往体验。
[FreshList]：我正在开发的一款简化日常杂货采购流程的应用副本。可以前往体验。
你还可以在我创建的 repo 中查看更多示例——创建它时，我还以为自己能有时间每周 vibe code 一个应用。
部分评论可能只有登录后的访客才能看到。登录后可查看全部评论。
如果需要采取进一步措施，你可以考虑屏蔽此人和／或举报滥用行为。