> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# 用Stitch和AI Studio改造应用UI
- URL: https://www.hubwiz.com/blog/overhaul-app-ui-with-stitch-and-ai-studio/
- Published: 2026-03-30T18:37:18.000Z
- Updated: 2026-03-30T18:37:18.000Z
- Description: 我的目标是在不从头编写UI或前端代码的情况下，给我的应用一次重大的视觉和架构升级。
- Author: admin
- Tags: TOOL, STITCH, AI STUDIO, #Import 2026-10-14 14:41

手动逐像素调整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](https://ai.google.dev/gemini-api/docs/models/gemini?ref=hubwiz.com)来估算物品的市场价值。应用不仅仅是输出一个数字，还会使用Gemini提供其推理过程、评估指标以及做出估价时使用的直接来源（而且，在家里的随机物品上使用它确实很有趣）。

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

![None](https://www.hubwiz.com/blog/content/images/2026/03/1-OxEA0WWwHbcWpVUW2G4A8g.jpeg)

## 第1步：用Google Stitch进行氛围设计

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

在演示中，我采用了一种独特的方式来提供提示。我只是将Stitch指向我现有的博客文章，该文章解释了AI Appraiser的架构。通过将这篇文章作为应用上下文，并选择最新的[Gemini 3.1 Pro模型](https://ai.google.dev/gemini-api/docs/models/gemini?ref=hubwiz.com)，Stitch能够消化应用的完整上下文。

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

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

![None](https://www.hubwiz.com/blog/content/images/2026/03/1-1-vrUmhQUW3tXZQjOrz3GQ.jpeg)

## 第2步：在Google AI Studio中进行氛围编码

有了高保真设计后，我从氛围设计转向氛围编码。利用Stitch的导出功能，我将生成的屏幕和设计流程直接导入[Google AI Studio](https://aistudio.google.com/?ref=hubwiz.com)。

Google已经彻底改造了AI Studio，加入了由新的Antigravity代理驱动的氛围编码体验。正如官方[Google AI Studio构建模式文档](https://ai.google.dev/gemini-api/docs/aistudio-build-mode?ref=hubwiz.com)所述，Antigravity代理维护你整个项目的上下文，以构建全栈应用程序。

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

![None](https://www.hubwiz.com/blog/content/images/2026/03/1-lHDB3EqGVNPWMh91D6qAsQ.jpeg)

## 第3步：氛围部署到Google Cloud Run

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

在新的AI Studio工作流程中，这简化为一次点击。我点击"发布"，将应用直接路由到我的Google Cloud项目。具体来说，应用部署到[Google Cloud Run](https://cloud.google.com/run?ref=hubwiz.com)，Google的无服务器容器平台。

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

![None](https://www.hubwiz.com/blog/content/images/2026/03/1-jYMctOMizHnoakaW12waZw.jpeg)

你还在手动调整CSS的padding值吗？停下来吧。让模型来处理像素，你专注于构建产品。今天就去[Google AI Studio试试Gemini 3.1 Pro](https://aistudio.google.com/?ref=hubwiz.com)，看看它能从你的应用上下文中生成什么。

---

原文链接: [How I overhauled my app UI in minutes with Stitch and AI Studio](https://medium.com/google-cloud/how-i-overhauled-my-app-ui-in-minutes-with-stitch-and-ai-studio-524b965c3d45?ref=hubwiz.com)

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