Vibe Coding at Google: Prototyping the all-new AI Studio

Vibe Coding作为一种原型设计方法，已经极大地改变了我们的工作流程。它使我们能够将最简单到最疯狂的想法付诸实践，从最初的提示开始，逐步将它们变为现实。这种方法的核心在于，设计师无需通过冗长的会议或抽象的描述来传达想法，而是可以直接提供一个可操作的原型，让工程团队直观地感受到设计的魅力和可行性。这不仅避免了误解，也大大提高了团队的效率，使得原型能够在早期阶段就能获得认可，减少了后续修改的成本。

通过Vibe Coding生成交互式原型，设计师可以直接向工程团队展示产品的运作方式，而无需进行抽象的口头描述或“手舞足蹈”的解释。这种直观的展示方式能够迅速获得团队的理解和认同。当工程师看到一个能够实际运行的原型时，他们更容易理解设计的意图和潜在的价值，从而加速决策过程并避免不必要的质疑和返工。

与其在会议上空谈，不如直接将原型展示给他们，他们会说：'哇，这感觉好多了！'

Amar Rashi，曾是11 Labs的设计主管，以其令人印象深刻的AI实验而闻名。如今，他已在Google DeepMind担任产品和设计负责人。本集内容将深入探讨Amar目前的工作，包括他是如何通过Vibe Coding来原型化全新的Google AI Studio的。对于对Vibe Coding及其如何影响设计流程感兴趣的人来说，本集提供了宝贵的幕后洞察。

最近推出的Nano Banana是一款功能强大的图像编辑模型，在短时间内获得了巨大的反响，用户利用它创造了许多令人惊叹的作品。设计师在使用新模型时，需要探索其全部潜力。一个富有创意的想法是，如果这个模型能够将用户形象在不同年代之间进行转换，将会带来极大的乐趣。这种个性化且可分享的体验，不仅满足了用户的好奇心，也展示了AI在图像处理方面的强大能力。

在Nano Banana模型中实现跨越年代的图像转换，不仅提供了功能，更注重用户体验的细节。例如，当图片从一个年代过渡到另一个年代时，可以看到微妙的3D倾斜效果和光线照射的动画，以及宝丽来照片般的淡入效果。这些精心的细节设计，使得整个体验更具魔幻感和吸引力，让用户在享受功能的同时，也能感受到设计的精巧和趣味性。

一个令人惊叹的交互设计是“摇晃刷新”功能。当用户不满意当前生成的年代风格时，只需摇晃设备即可重新加载新的风格。这个想法并非源于复杂的代码构思，而是基于直观的用户体验需求：“如果我能摇晃一下来刷新该多酷啊！”最初，该功能可能过于敏感，但通过向模型描述“只有用力摇晃时才刷新”，AI便能理解并调整灵敏度，从而实现更符合用户预期的交互。这充分展示了AI将自然语言描述转化为代码实现的能力，即使是像“用力摇晃”这样非编程术语也能被准确理解。

“攻击性”甚至不是CSS和前端框架世界中的一个词，但它对我来说有意义。模型知道如何将其翻译成代码，这足够我们使用了。

在在线购物场景中，用户常常会想知道某件衣服穿在自己身上会是什么样子。利用Nano Banana，AI Studio实现了虚拟服装试穿功能，让用户可以实时看到自己穿着不同服装的效果。通过简单的提示，例如让AI模型模拟穿上Gemini品牌的宣传T恤，并提供侧面比较视图，用户可以立即感受到产品带来的魔法。这种即时反馈和生动展示，大大提升了用户体验，使其在生成过程中就能感受到设计的吸引力。

在进行AI原型设计时，构建自己的灵感数据库和资源库具有极高的投资回报率。无论是代码组件、设计模式还是视觉风格，这些资源都能被AI模型轻松学习和应用。例如，可以从专门提供React组件的网站获取代码，或者利用GitHub上的开源项目，甚至是Figma的开发模式来提取样式代码。通过将这些现成的代码或样式直接粘贴给AI助手，设计师能够迅速实现复杂的交互和视觉效果，即使是跨越不同框架，也能高效地将其融入原型中。AI本质上是将一种实现方式映射到另一种，大大减轻了设计师的负担。

设计师在使用AI原型工具时，面临着如何在高层级战略和实际应用之间取得平衡的挑战。关键在于理解何时Vibe Coding能够显著提升设计流程，以及何时传统的Mockup工具（如Figma）更为适合。Vibe Coding在处理复杂交互和“感觉”层面上的设计时展现出巨大优势，而Figma则在宏观布局和视觉风格对齐方面不可或缺。恰当的工具选择能优化效率，避免资源浪费。

Vibe Coding原型在实现传统Figma原型难以甚至不可能实现的交互时，具有显著优势。在这种情况下，即使最终保真度达到70%到80%也是可以接受的。设计师无需在字体排版等细节上花费过多时间，而是将重心放在核心交互上。Vibe Coding尤其适用于回答“实际使用起来感觉如何？”这类问题，能够帮助设计师在早期发现传统开发过程中可能遇到的边缘案例，从而提前解决问题，极大地提升了设计效率。

相比之下，Mockup Land（如Figma）在进行高层级对齐和探索广泛方向性变化时更为有效。例如，在重新设计整个AI Studio时，关于新的主题、颜色、字体排版和屏幕内容布局等问题，无需通过Vibe Coding即可进行讨论和决策。在这些场景中，视觉的精确性至关重要，因为你需要确保字体、颜色等细节恰到好处。Figma在这些需要精细视觉控制和广泛团队对齐的初期阶段，仍然是不可替代的工具。

从旧版AI Studio到全新版本，设计团队经历了一次全面的重新构想。旧版AI Studio存在一系列用户痛点，尤其是在开发者产品环境中，对空间利用率和信息密度的需求更为突出。通过一系列深入的设计探索和原型验证，团队成功地将这些痛点转化为新版AI Studio的核心优势，为用户带来了前所未有的流畅体验，并最终推动了产品的全面升级。

在Figma阶段，团队开始探索新的设计方向，目标是为AI Studio提供更多的垂直空间，以满足开发者处理大量代码和长对话的需求。这包括重新思考导航结构、实现可扩展和折叠的代码块，并简化聊天布局，使其更加直接。同时，设计也考虑了开发者对复杂度的需求，例如在保持界面简洁可消化的前提下，暴露令牌计数和对话成本等信息。尽管在Figma中这些设计看起来不错，并获得了初步的认可，但仍难以激起人们对全面重新设计的足够热情和投资意愿。

如果你能围绕自己的想法创造出必然性的光环，那么它们就会自然而然地发生。当你亲身体验到产品，这种必然性是显而易见的。它就在这里，无论你愿不愿意。

Vibe Coded原型在推动AI Studio改版方面发挥了决定性作用。通过可操作的原型，用户和团队能够亲身体验新版AI Studio的世界，这种“感受”的力量远超静态的Figma Mockup。一旦体验了新版本，他们便不想再使用旧版，这种对比感瞬间产生。Vibe Coded原型不仅能够捕捉设计细节，如导航中的微小变化或宝丽来照片的倾斜效果，还能让用户亲自点击和探索，从而真正理解并认同设计理念，从而创造出一种“必然性光环”，让整个团队都为之振奋。

新版AI Studio通过一系列微交互提升用户体验，例如点击项时弹出的提示、自动选择建议以及在代码生成过程中展示的响应。这些细节共同创造了一个流畅直观的交互流程。此外，为了适应不同开发者的需求，AI Studio还允许用户折叠和展开代码块，从而在长对话中节省空间。更进一步，用户可以鼠标悬停在对话上，根据文档提供的成本表自动计算并显示对话的预期成本。所有这些复杂的功能，都通过简单的Vibe Coding提示得以实现，例如提供成本表数据并要求AI进行计算。这种一体化的游乐场概念让用户无需离开当前界面即可轻松切换模型，例如从文本生成切换到图像生成，只需输入“玩具车”即可，整个过程一气呵成。令人难以置信的是，整个AI Studio的重建工作，仅花费了从旧金山飞往纽约的一次飞行时间，加上两个周末的时间。

原型设计像Google AI Studio这样规模的应用，需要一套精密的策略。这不仅仅是技术挑战，更需要设计师像产品经理一样思考，将复杂的设计分解成可管理的小部分，逐步构建。这种“化整为零”的方法能确保每个组件都能被充分打磨，并逐步集成，最终形成一个完整且高度抛光的体验。在整个过程中，对模型进行精确且有策略的提示至关重要，它决定了原型构建的顺利与否。

在原型设计初期，目标是先实现几个核心屏幕的初步外观和感受，例如主要对话界面、滚动条交互和模型浏览器。设计师无需立即追求像素级的完美，而是将重心放在核心功能和交互上。一旦这些核心部分获得了团队的认可，便可进行全面的端到端打磨，确保工程细节的准确性。例如，将之前多达40到50个颜色令牌简化为仅8个，这不仅简化了设计系统，也大大减少了工程实现的错误空间。这种先获得认同再精修的策略，可以避免在未经验证的想法上投入过多的时间和精力。

对于较小的项目，例如滚动条的重新设计，设计师甚至不需要完成所有细节设计。一旦通过Vibe Coding原型实现了预期的交互效果，并且它能够利用已定义的设计系统和颜色规范，那么这个原型本身就足够了。在这种情况下，核心在于交互的“感觉”而非视觉的完美。这种灵活性允许设计师在不需要全面设计文档的情况下，快速推出并验证交互想法，节省了大量时间。

在长期的AI实验和Vibe Coding实践中，设计师积累了宝贵的经验，总结出了一系列提升效率和创意的方法。这些经验不仅涵盖了与AI助手协同工作的技巧，也包括了对设计师自身工作流程和思维模式的重塑。通过采纳这些策略，设计师可以更好地利用AI的潜力，突破传统设计的局限性，从而在实践中获得更大的动力和成功。

如果你正致力于将Figma Mockup转化为Vibe Coded原型，务必充分利用开发者模式。将Figma提供的约束和样式视为可以直接传递给Vibe Coding助手的指令，就像与开发人员沟通一样。这样，你就能获得接近Figma中预期的保真度。许多设计师抱怨AI生成的原型缺乏精细度，但实际上，如果这些精细度体现在Figma设计中，AI完全能够遵照指令实现，因为AI只是简单地遵循你的要求。

尝试用多种方法解决同一个问题至关重要。一种有效策略是，将你已有的提示交给AI，并询问它有哪四种方式可以重写这个提示。你会发现，AI有时能以更精确、更符合代码逻辑的方式表达你的意图。例如，当你想让AI同时生成多张图片时，你可能会直观地说“同时生成所有宝丽来照片”，但AI可能会建议使用“在同步线程中生成”或“并发执行”等编程术语。通过AI的帮助，你可以学习如何用AI更容易理解的语言来构建提示，从而获得更理想的结果。

建立一个个人组件库是另一项重要实践。可以从GitHub等开源平台寻找组件，它们是极佳的参考。此外，挑战自己，尝试在没有Figma的情况下，仅凭脑海中的Mockup来构建这些组件，并观察能达到多高的精细度。例如，时尚设计模型就是纯粹基于对时尚杂志或品牌网站（如ASOS或Zara）的视觉想象来构建的，通过描述“干净的白色、某种字体”并参考Google Fonts来选择和传递样式。这种方法不仅避免了思维定势，还能让模型激发新的灵感，例如AI可能会提出一个“衣柜侧边面板”的概念，你可以进一步将其发展成一个移动端滑动抽屉，将AI视为一个富有创意的“即兴创作伙伴”。

最重要的经验是：始终以“没有什么不可能”的心态投入Vibe Coding。真正秉持这种信念，你会发现自己能够走得更远。许多人会问“这真的能实现吗？”或者“你提示过它了吗？”滚动条的例子就是完美诠释：在Figma中，你可能根本不会去模拟它，因为你对其实现的可能性没有足够的把握。但当你可以轻松尝试时，你会发现这确实可行。拥抱这种心态，摆脱旧有的限制，你会发现设计细节都可以被重新构想和实现。