Transcription
大家好，谷歌刚刚发布了 Gemini 3.1，同时对 Google AI Studio 进行了重大更新。我认为，它们共同成为了市场上最好的免费 AI 原型设计和编码工具。你知道，市面上有很多其他很棒的编码工具，每月收费 20 美元、200 美元，但我认为谷歌今天的更新提供了物超所值的最佳选择。所以，除了 Gemini 3.1 带来的所有改进之外，AI Studio 现在已经实现了全栈。你可以在工具中直接构建带有服务器、数据库甚至多人游戏的应用程序。但对于本教程，我想重点介绍过去六个月我实际使用 AI Studio 的情况。基本上，我几乎每天都用它来为工作中的新功能制作原型，这彻底改变了我构建产品的方式。让我们开始吧，首先谈谈瀑布式开发和原型优先产品开发之间的区别。所以，瀑布式开发是指你从一个规格开始，设计师进行设计，然后你将所有东西移交给工程部门。当你获得真实的客户反馈时，你已经在一个产品上投入了数周的时间。而原型优先是指你从一个原型开始，与你的团队和真实用户一起迭代。一旦你通过原型验证了你的产品创意，然后你创建规格和设计。关键区别在于，原型优先可以帮助你更快地了解用户的真实需求。所以我做产品经理已经十多年了，原型设计彻底改变了我构建产品的方式。基本上，这归结为这五个步骤：构建基础模板、原型化功能、与 AI 迭代、与其他人协作，包括利益相关者、实际的真实客户，最后从原型过渡到真实产品。所以，我将通过一个真实的例子带你完成这所有五个步骤。但首先，让我们来看看全栈 Google AI Studio 的功能。好的，这是我构建的一些应用程序。我构建的第一个应用程序是一个扑克应用程序，你可以在其中与其他 AI 机器人玩扑克。所以，这里有一个扑克桌，嗯，是的，这两张牌不太好，但我们就跟注吧，看看结果如何。好的，看起来是 KC1。最新 AI Studio 的一个很棒之处在于，你还可以设置多人游戏，与其他真实用户一起玩。但我们继续。这是我制作原型的下一个应用程序，一个复古时光旅行舱。所以，我上传了我的照片，我可以选择我想要的 80 年代、90 年代、Y2K 或其他风格。让我们看看我们应该选择哪种。为什么不选择 80 年代呢？我喜欢 80 年代的音乐。选择 80 年代。向下滚动这里，然后点击“启动时光跳跃”。它使用了 Nano Banana。当然，AI Studio 默认集成了 Nano Banana，所以你不需要粘贴一堆 API 密钥。你只需要选择即可。然后我就来到了 80 年代。我确实有这样一件牛仔夹克。不过我对这个发型不太确定。好的。我没有构建但别人构建的另一个看起来非常令人印象深刻的东西。如果你能看到这里的模式，我真的很喜欢复古的东西，那就是一个 Santa Bros. 游戏。所以，你可以在这里开始游戏，它就像一个 Game Boy 风格的平台游戏，看起来像马里奥，但它是为 Santa 设计的。我认为这相当令人印象深刻，对吧？你可以射击，你可以杀死雪人。是的，这里有一些 bug，但我打算 fork 这个游戏并改进它。现在，让我们回到我们今天要做的事情。所以，对于本教程，我想稍微做点元操作，为 Google AI Studio 本身原型化一个新功能。你知道，我喜欢原型化 AI Studio，因为它快速、免费，并且与 Google API（如 Nano Bernat）直接集成。然而，我认为你在这里看到的这个 AI Studio 界面仍然有点太拥挤了。有太多东西在吸引你的注意力，对吧？将这个 UI 与 OpenAI 的 codex 应用程序进行比较，后者要直接得多。你可以创建新项目。你可以提示 Codex 开始构建东西。有一些建议，但总的来说，这是一个更简化的 UI。所以，让我们尝试通过遵循这五个步骤来简化 Google AI Studio。好的，这是 AI Studio UI 现在的情况。有一个主屏幕，你可以在其中开始聊天或开始构建应用程序。还有一个 playground，我真的不知道那是什么意思。还有一个 build 屏幕，它更侧重于 vibe 编码应用程序。所以，首先，让我们截取一些这个的屏幕截图，并在原型中复制这个 UI，对吧？我在这里做的正是这个。所以我有一个 AI Studio 项目，我所做的就是截取了 AI Studio UI 的一些屏幕截图并粘贴在这里。我说复制这个 UI 并使其具有交互性。有两个屏幕：home 和 build，然后我基本上复制了 UI，然后我不得不给它一些关于样式的反馈。但无论如何，这是带有 UI 的屏幕。现在我们有一个主屏幕。我也在这里原型化了 build 屏幕。对吧？所以，这一切可能只花了五分钟。现在，这是关于第一步的重要部分。关键是要将其保存为模板，比如叫做 AI Studio 模板。当我们实际要构建新功能时，你想点击这个 remix 按钮。我们称之为 AI Studio simplified。我们称之为 V2。然后点击 apply，这样我们就可以克隆我们的模板。现在，为什么这样做？为什么不直接在这里继续原型化呢？如果你像这样创建一个模板，如果你不喜欢你的原型发展的方向，你可以轻松地从你产品中当前的实时状态重新开始。而且很棒的是，任何人都可以访问这个模板并 remix 它，并从相同的基准开始原型化。好的，所以第一步就是构建基础模板。现在让我们继续第二步，也就是原型化我们的新功能，并通过这种 UX 来简化 Google AI。所以，首先我们需要决定简化什么。本教程的一个教训是，你所做的一切都可以借助 AI 来完成。对吧？所以我所做的是，我去了 Gemini，并创建了一个名为 Google AI Studio 的 Gemini gem。Gemini gem 基本上就是一个 AI 项目，就像 Chad 和 Claude 一样，除了谷歌称之为 gem。我在这里所做的就是，这个 gem 里除了一个提示之外什么都没有。所以，提示是：你是一位拥有超过 15 年经验的高级产品设计师，我希望你成为我的设计伙伴。我将分享 UI 的屏幕截图和描述，你将对其进行评论并提出具体的改进建议。好的。嗯，我是如何想到这个提示的？诀窍是，我基本上只是让 AI 来想出一个提示，成为一名高级产品设计师，这样我们就可以一起简化 UX。它想出了这个很长的提示。所以，再说一遍，我没有手动编写任何东西。这只是 AI 想出的一个提示。好的，现在我们有了这个提示，我们就可以开始与我们制作的这个 gem 对话了。好的，我已经加载了 gem，让我们回到我们的 AI Studio 模板，然后在这里复制这些图像。复制图像，粘贴在这里。然后我们也复制 build 屏幕。好的。嗯，假设我想简化这个 Google AI Studio UI，以便我们可以专注于将其打造成一个原型设计和 vibe 编码工具。给我你简化这个的三个最佳建议。好的。让我们看看 Gemini 会想出什么。所以，你可以看到它正在加载我们的自定义提示，这是它的评论。它说将功能库折叠成统一的命令栏，从主屏幕切换到活动项目工作区。它还有很多建议。好的。当然，在这一步，你还需要研究用户实际想要什么。所以，例如，在这里，我找到了一个关于人们对 Google AI Studio 提供反馈的帖子，排在第一位的反馈点是他们想要文件夹，以便他们可以设置项目来添加文件等等。所以，这些都是相当不错的建议，但让我们应用我们的人类品味和观点，对吧？所以，让我们再次回到 AI Studio 屏幕，让我们实际尝试应用我的人类品味来使其更简单。我实际上已经预先写好了一个提示，让我们来回顾一下这个提示。对吧？所以，基本上我想重新设计界面，使其更简单。第一，我不明白为什么有一个主屏幕和一个单独的 build 屏幕。如果这个工具的主要目标是帮助人们进行原型设计和 vibe 应用程序，我认为 build 屏幕应该是默认屏幕。第二，侧边栏上有很多东西。Playground、Dashboard、Documentation 等等。我认为我们可以通过只列出我正在处理的项目和一个新项目按钮来简化所有这些。这里有一些项目示例。嗯，在主屏幕上，我试图一次做很多不同的事情。例如，这个“jump back in”的东西，我认为它并不是真正必要的，如果我所有的项目都已经列在这里了，对吧？嗯，我认为这个“quick start”的东西很有趣。但我认为它可以放在文档或 API 密钥等其他地方。所以，我认为主屏幕应该只有一个聊天框，上面写着“你今天想构建什么？”。在这个聊天框上，应该有一个选择模型的方法，在 plan 模式和 build 模式之间切换，这是很多其他 AI 编码工具都有的功能。我有一个添加照片的按钮，当然，AI Studio 的一个主要吸引力在于你可以原生集成 Google API，如 Nano Banana。所以，聊天框中应该有一个按钮来实际添加不同的 API 到你的应用程序。好的，这就是我们创建的提示。而且，你可以与 gem 合作来想出这个，或者与 AI 来回沟通来弄清楚。但让我们继续将这个提示复制粘贴到我们 remix 过的 AI Studio 模板中。让我们粘贴在这里。我将提交这个提示，看看它是否能一次性简化这个 UI。好的，我们回来了。这大约花了 141 秒，现在我们有了这个更简单的 UI，只有一个屏幕。这里有一个项目列表。你可以创建一个新项目，你可以选择模型，你可以在 plan 和 build 模式之间选择。你可以添加和检查不同的 Google API 来包含在你的应用程序中。嗯，还有一些其他按钮。现在下一步是与 AI 迭代，使你的功能更好，对吧？因为 AI 通常不会一次就做得很好。所以，例如，我不太喜欢的一点是，模型选择器在顶部，plan 和 build 模式也是如此，而不是作为聊天框的一部分。所以，让我们说，将模型选择器和 plan 与 build 选项移到聊天框中，就像 Google API 选择器一样。好的，让我们先放进去。嗯，让我们看看它会想出什么。好的，看起来它已经像预期一样将这些东西移到了聊天框中。所以，现在我们这里有一个模型选择器，而 plan 和 build 就在这里。嗯，是的，我认为这比以前好多了。现在让我们实际添加一个新功能。所以，我喜欢一些其他 AI 编码工具（如 Lovable）的一点是，它有一个聚焦的聊天框，但如果你向下滚动，实际上有很多模板和东西可以让你发现，以获得灵感，但这些东西不会让 UI 显得拥挤。那只是一个聚焦的聊天框。所以，让我们也把这些模板添加到我们的 AI Studio 原型中。让我回到这里，粘贴 Lovable 模板的截图。这是我要给它的提示。所以，提示是：添加一个灵感架，类似于 Lovable，当我向下滚动时，它会逐渐出现，其中包含一些精美的网站、游戏等的展示提示。它应该看起来很棒，甚至比附带的图片更漂亮，对吧？与主聊天框稍微分开，以使其大部分保持清晰。然后也许你可以按 Google API 进行组织，因为再次强调，这是 AI Studio 的一个主要区别。你可以找到一些与 Nano Banana、Google Maps 等相关的示例。好的，让我们提交这个，看看它会想出什么。好的，让我们来看看 AI Studio 现在做了什么。所以，我们仍然在顶部有一个聊天框，但现在你可以在下面看到有一个“explore ideas”的东西，对吧？如果你向下滚动，是的，有很多关于 Nano Banana、Maps API、Voice API 等的应用程序创意。对于初学者来说，这为他们提供了一些灵感和模板，他们可以开始 remix。对吧？你知道，我们可以继续这样迭代。我们可以不断改进我们的产品。但说到原型设计，不要担心让它变得完美。只需将其做到你觉得可以舒适地向其他利益相关者和真实用户展示你的原型的程度即可。这就引出了第四步，也就是与他人协作。而这才是真正神奇的地方。原型设计的优点是任何人都可以改进你的原型。现在我们有了一个像样的原型，我们可以与利益相关者分享。所以，让我们回到这里。在这里你可以看到一个分享按钮。就像 Google 文档或 Google Drive 文件一样，你可以与你团队中的特定利益相关者分享。所以，例如，你可以将此链接发送给设计师，让他们直接或与你一起克隆并迭代。对吧？另一件事是你可以与真实用户进行测试。所以，我继续并实际发了推文。我认为 Google AI Studio 的 UX 太拥挤了，所以我让它变得更简单了。这是我制作的原型。你可以在这里看到很多反馈。把 Logan 放在聚光灯下，抱歉，Logan。是的，人们喜欢它。有些人认为它好多了，但你知道，如果你向下滚动，有些人也是批评者，认为它过于简化了。[喘息和笑声]所以，是的，重点是你可以获得用户反馈。当然，你也可以直接让 AI 总结所有这些反馈，并给你更多改进原型的建议。最后，有很多 PM 在产品评审期间向领导层展示这些幻灯片和长篇 Google 文档。我只是觉得这些东西不如展示原型有效。所以在产品评审期间，只需调出这个原型，通过 Slack 将链接发送给你的 VP，让他们玩一下。事实上，你根本不必等到评审。就像我最讨厌的事情之一就是等待几周甚至几个月让某个高管评审我的产品。所以，只需通过 Slack 消息将这个原型发送给他们。VP 非常忙碌。但我发现他们总是会花时间玩原型，因为这比阅读文档有趣得多。总的来说，我认为原型比任何幻灯片或文档都能产生更好的产品反馈，因为它们使事物具体化。所以，最后一步是将这个原型变成一个真实的产品。与内部利益相关者和用户一起迭代原型将告诉你这个产品创意是否很棒，或者实际上是一个坏主意，对吧？而且它会在你实际构建任何东西之前告诉你。所以，你可以再次更快地了解真相。假设人们喜欢这个 UI，就像我从我的推文中得到了一些信号一样。所以，现在下一步是继续前进，写一份一页的规格，概述用户问题、目标和解决方案。将原型链接作为你的解决方案。在规格中，也许创建一个设计来解决边缘情况，使其比这里的 UI 更 polished。最后，构建一个生产应用程序，再次强调，通过 Google AI Studio 的全栈更新，你现在可以直接在这个工具中构建，具有服务器、数据库和其他 API 集成。这里的关键区别在于，在投入大量精力进行规格、设计和工程时间之前，你已经通过这个原型与真实用户验证了你的产品，而且你知道这在迭代速度方面至关重要。好的，总结一下，以下是实践原型优先产品开发的五个步骤。第一步，构建基础模板，复制你现有的产品并为你的团队保存模板。第二步，原型化新功能。你可以创建一个 AI 项目或 Gemini gem，然后与之对话，以想出一个很棒的提示来添加你的新功能，并将该提示放入 AI Studio。当然，它不会一次就做到完美。所以你必须与 AI 迭代。与它来回沟通。给它反馈。使其达到你可以舒适地与其他人分享的程度。这就是第四步，与包括利益相关者，最重要的是与真实用户在内的其他人协作。也许与用户进行通话，向他们展示原型，让他们玩一下。你甚至可以在客户通话之间迭代原型。最后但同样重要的是，在验证了想法之后，将你的原型变成一个真实的产品。总而言之，在我看来，原型优先产品开发是在 AI 时代必须具备的技能。我现在花更多时间与团队一起构建原型并感到兴奋，而不是在 Google Docs 中调整文字。请记住，代码现在是免费的。代码现在比任何幻灯片、文档或中间产物都更容易创建。所以，一定要先从原型开始。好的。这可能是最有实践意义的教程，我认为它能真正改变你的技术工作，无论你是 PM 还是工程师。原型优先，我保证你不会后悔。嗯，如果你喜欢这个视频，请点赞和订阅。下次见。谢谢。