用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或前端代码的情况下,给这个应用一次重大的视觉和架构升级。

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

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

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

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

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

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

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

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

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

第3步:氛围部署到Google Cloud Run

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

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

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

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


原文链接:用Stitch和AI Studio改造应用UI - 汇智网

相关推荐
昭阳9 小时前
4 个 vibe coding 项目,一个普通前端的半年
前端·人工智能·设计
阿古大王9 小时前
Youtube视频笔记工具怎么选:NoteAi、billNotes、NoteGPT 横向对比
人工智能
科技新资讯9 小时前
AIGC重构工业设计 一号设计解锁智造新势能
人工智能·重构·aigc
东方小月10 小时前
从零开发一个 Coding Agent(八):如何使用 Agent 类管理对话状态
前端·人工智能
这张生成的图像能检测吗10 小时前
(论文速读)基于鸡群算法变分模式分解的超低温振动传感器去噪
人工智能·信号处理·信号去噪·鸡群算法·模态分解
AI即插即用10 小时前
即插即用系列 | IEEE TMI PLG-HN:原型学习引导的 CNN-Transformer 混合网络,攻克乳腺肿瘤分割难题
人工智能·深度学习·神经网络·学习·目标检测·cnn·transformer
AIyy86610 小时前
2026小红书封面AI绘图工具横评:实测各平台出图质感与平台适配度
人工智能
自由能燃气设备10 小时前
燃气容积式热水器厂家选购指南:2026年商用热水设备采购避坑手册
大数据·数据库·数据仓库·人工智能
Nomarsgo10 小时前
3C电子智能制造产线嵌入式工控机解决方案——基于研华 MIC-770H 打造高性能、紧凑型智能制造边缘控制平台
人工智能·科技·视觉检测·电脑·制造
yinghuoAI202610 小时前
电商卖货,本质上是“视觉的战争”
人工智能·ai·ai作画·ai作图·ai生视频