用Stitch和AI Studio改造应用UI

手动逐像素调整UI设计的时代已经正式结束。为什么要把时间花在调整CSS属性上，而不是专注于构建应用的核心功能呢？

在最近的一次演示中，我展示了现代AI辅助软件开发生命周期的实际应用。我将自己现有的一个应用——一款AI驱动的物品评估工具——在几分钟内完成了设计和代码库的全面改造，使用的是Google最新的工具集。

如果你一直在关注本周的快速发布（特别是Google Labs和AI Studio的大规模更新），你就知道"氛围编码"和"氛围设计"已经成为新标准。我们将探讨我演示的3步工作流程，重点关注我的AI Appraiser网页应用、Stitch和Google AI Studio。

基准：我的AI Appraiser网页应用

要理解这次转变，我们需要先了解原始应用。

AI Appraiser是一款多模态Web应用，允许用户上传家居物品或收藏品的图片。在后台，它利用Gemini 3.1 Pro来估算物品的市场价值。应用不仅仅是输出一个数字，还会使用Gemini提供其推理过程、评估指标以及做出估价时使用的直接来源（而且，在家里的随机物品上使用它确实很有趣）。

我的目标是在不从头编写UI或前端代码的情况下，给这个应用一次重大的视觉和架构升级。

工作流程的第一个重大飞跃发生在Stitch中。Stitch最初是一个从文本生成UI的实验项目，经过一次大规模更新后，它变成了一个成熟的AI原生软件设计画布。

在演示中，我采用了一种独特的方式来提供提示。我只是将Stitch指向我现有的博客文章，该文章解释了AI Appraiser的架构。通过将这篇文章作为应用上下文，并选择最新的Gemini 3.1 Pro模型，Stitch能够消化应用的完整上下文。

Stitch不只是吐出平面的静态屏幕，而是生成了完整的设计系统，包括自定义调色板和图标设计。它构建了主要的用户旅程，包括欢迎落地页、提交界面、估算市场价值结果屏幕和一个新的历史记录功能。

它甚至给了我一个惊喜：一个在我原始应用中没有的全新屏幕——摄影指南。这确实能帮助用户拍摄更好的物品照片，从而获得更准确的AI评估。

有了高保真设计后，我从氛围设计转向氛围编码。利用Stitch的导出功能，我将生成的屏幕和设计流程直接导入Google AI Studio。

Google已经彻底改造了AI Studio，加入了由新的Antigravity代理驱动的氛围编码体验。正如官方Google AI Studio构建模式文档所述，Antigravity代理维护你整个项目的上下文，以构建全栈应用程序。

在演示中，你可以看到AI Studio生成了一个TypeScript前端代码库。由于Antigravity代理在运行时执行经过验证的代码更新并格式化全栈依赖项，生成的TypeScript代码干净且功能齐全。

拼图的最后一块是将这个新生成的TypeScript应用上线。从历史上看，这意味着要与Dockerfile、CI/CD管道和基础设施配置作斗争。

在新的AI Studio工作流程中，这简化为一次点击。我点击"发布"，将应用直接路由到我的Google Cloud项目。具体来说，应用部署到Google Cloud Run，Google的无服务器容器平台。

因为Cloud Run可以从零扩展到处理海量流量，并抽象掉基础设施管理，它是氛围编码应用的完美目标。部署即时提供端点，在几分钟内将传统应用转变为完全全球可用的Web应用。

你还在手动调整CSS的padding值吗？停下来吧。让模型来处理像素，你专注于构建产品。今天就去Google AI Studio试试Gemini 3.1 Pro，看看它能从你的应用上下文中生成什么。

汇智网翻译整理，转载请标明出处