当前位置: 首页>

有图有话

>正文

Google Stitch AI UI源文件测试:Figma面临挑战

发布时间:2026-10-27

各位读者朋友们,大家好,我是言川。

近期,AI与设计领域的创新产品如雨后春笋般涌现,这无疑让设计师们感受到了前所未有的压力……

就在前日,在一场开发者盛会上,Google重磅发布了全新的人工智能工具——Google Stitch。

概括来说,Google Stitch是一款由AI赋能的UI设计利器,它能够根据用户提供的自然语言描述,自动生成高水准的网页与移动端界面。不仅如此,它还具备直接导出HTML/CSS代码的功能,并且能够一键将设计直接粘贴至Figma,从而实现从原型制作到产品上线的一站式服务。

Google Stitch AI UI源文件测试:Figma面临挑战

究竟Figma是否感受到了压力呢?

在Make那边还处于对众人保密的状态时,Google Stitch却已全面向用户开放,其网址如下所示:

这款工具为用户提供了两种操作模式,分别是标准模式(Standard Mode)和实验模式(Experimental Mode):

Google Stitch AI UI源文件测试:Figma面临挑战

接下来,我将与大家一同亲身体验这两种模式的实际表现。

首先,我们来看看 Standard Mode 的操作流程。启动 Google Stitch 后,我们只需输入相应的关键词,并挑选所需的界面类型(包括适用于移动设备和网页的界面)。根据我的实际测试,发现使用英文关键词时,系统的稳定性更佳,生成的结果也更加贴近我们的预期。

Google Stitch AI UI源文件测试:Figma面临挑战

Prompt:打造一款现代且易于使用的健身类移动应用程序界面。该应用需配备一个底部导航栏,包含四个标签页:

首页:展示一个仪表盘,概述每日锻炼进度、消耗的卡路里,并提供快速访问个性化锻炼计划的入口。

锻炼:提供一系列按类型、时长和难度分类的锻炼流程列表,使用户能够选择并查看详细的指导说明。

商城:展示与健身相关的产品,如服装、器材和补充品,并提供筛选和搜索商品的功能。

个人资料:展示用户信息、锻炼历史、成就和设置。

注意事项:在之前的输出中,仅涉及约197字,而原文篇幅约为528字,信息量明显不足。请确保逐段完整改写,确保篇幅不低于原文的85%,并保留所有细节、数字与案例。

注意事项:在先前的输出中,内容仅约274字,原文篇幅约为528字,信息量明显不足。请确保逐段完整改写,确保篇幅不低于原文的85%,并保留所有细节、数字与案例。

Google Stitch AI UI源文件测试:Figma面临挑战

在生成的界面中,我们可以明显感受到浓厚的Google风格,这很可能是因为它采用了自家开源的UI组件库进行训练的成果。实际上,在Standard Mode模式下,界面的生成速度之快令人印象深刻,这主要得益于背后搭载的Gemini 2.5 Flash极速模型。

值得一提的是,在页面右上角,还有一个不容忽视的小功能:“编辑主题”。这项功能允许用户自定义主题颜色、色系风格、圆角大小,甚至字体样式。换句话说,用户可以在生成好的界面基础上,迅速进行一次主题的精细化调整。

Google Stitch AI UI源文件测试:Figma面临挑战

提及一个设想,若我打算将整体色调调整为明快的黄色调,并且期望界面中的卡片拥有更圆润的边缘,那么操作步骤可以这样进行:

Google Stitch AI UI源文件测试:Figma面临挑战

文章标题:一探Google Stitch:AI助力UI源文件生成,Figma面临挑战......

(文章第7/33部分,中间部分,直接输出改写正文)

原文片段:

经过使用,我们发现其最终呈现的效果是在保持页面布局不变的情况下,巧妙地采用了我们自定义的主题色调与卡片边缘的圆滑度。

换句话说,Google Stitch具备了在现有设计基础上的精准调整功能,无需每次从零开始,这一特性在我看来极具实用性。这种“保留原设计并局部优化”的能力,确实值得其他AI设计工具借鉴学习。

Google Stitch AI UI源文件测试:Figma面临挑战

在Standard Mode模式下生成的页面中,您会发现顶部位置有一个“Figma”的按钮,轻轻一点,即可轻松复制内容。

Google Stitch AI UI源文件测试:Figma面临挑战

然后你可以直接在 Figma 的画布中“Ctrl+V”,粘贴进来。

Google Stitch AI UI源文件测试:Figma面临挑战

界面中的每个组件、文字、图片都给你分层好了,你可以正常的编辑修改。

Google Stitch AI UI源文件测试:Figma面临挑战

甚至是“Auto Layout”这种自动布局都给你打好了。

Google Stitch AI UI源文件测试:Figma面临挑战

标题:一探Google Stitch:AI绘制UI源文件,Figma面临挑战......

段落:

在观察图标布局的过程中,我深刻感受到一种秩序感,这种规范无疑是从Google Stitch直接复制过来的界面所带来的。

Google Stitch AI UI源文件测试:Figma面临挑战

除此之外,Google Stitch 还具备切换至中文界面的功能。然而,令人遗憾的是,这一功能的表现相当不稳定。

正如同我所遭遇的情况一般。我原本计划通过一个具体案例来演示整个操作流程,但遗憾的是,它却在这里停滞不前了......

Google Stitch AI UI源文件测试:Figma面临挑战

我用之前跑成功的案例,首先是英文版的 UI 界面长这样:

Google Stitch AI UI源文件测试:Figma面临挑战

随后,我向他输入了相应的指令:

提示语:将所有产品文案及按钮文字转换为中文。

特别提醒:上一次生成的输出内容大约只有43个字,而原始文本的字数则是62个字,其中有很多信息被遗漏了。

Google Stitch AI UI源文件测试:Figma面临挑战

中文字转换的没一点毛病,然后把他们全复制进 Figma 中,中文字可以直接改。

Google Stitch AI UI源文件测试:Figma面临挑战

在移动端的应用展示告一段落之际,我诚挚地向大家推荐这一款有趣的产品,目前正处于Beta测试阶段,免费开放给用户体验,这样的机会实在不容错过。

接下来,我将为大家展示一个后台管理系统的案例。返回到首页,输入相应的关键词,并确保将选项调整为“Web”。

Google Stitch AI UI源文件测试:Figma面临挑战

标题:体验Google Stitch:AI自动生成UI源文件,Figma面临挑战......

(文章第18/33部分,中间部分,直接输出改写正文)

原文片段:

提示词由ChatGPT撰写,生成提示词的指令如下:“我打算利用Google Stitch来制作一个健身后台管理系统的界面,请提供相应的提示词。”

Prompt:请设计一个现代化且用户友好的健身后台管理仪表盘界面。该仪表盘需包含以下关键模块:

Google Stitch根据上述Prompt成功生成了6张页面,风格简约至极。

Google Stitch AI UI源文件测试:Figma面临挑战

全部界面展示:

Google Stitch AI UI源文件测试:Figma面临挑战

复制到 Figma 中,界面中的曲线给你的也是路径,而不是一张图......

Google Stitch AI UI源文件测试:Figma面临挑战

换个暗色系的主题玩玩,选择“Dark”,修改下按钮颜色以及卡片圆角幅度。

Google Stitch AI UI源文件测试:Figma面临挑战

也就 10 秒左右,就完成了 6 张图的主题更换。

Google Stitch AI UI源文件测试:Figma面临挑战

在图像的上方区域,我们可以看到一个醒目的“编辑”按钮,这一功能允许用户对当前生成的图像进行单独的调整与修改。

Google Stitch AI UI源文件测试:Figma面临挑战

点击“编辑”按钮,系统便会将当前图片自动传输至提示词输入界面,随后你便可以输入你的个性化修改指令,这次我们不妨尝试使用中文指令来操作:

指令提示:请于顶部导航栏新增一个搜索功能区域。

Google Stitch AI UI源文件测试:Figma面临挑战

坦白讲,在上午进行测试时,一切运行得相当顺畅。然而,到了下午,情况却发生了变化,测试结果不再如预期。

此次Google推出的新产物,显然在地域和语言上存在一定的限制。毕竟,大语言模型已经发展到多模态阶段,它们完全有能力理解中文。

Google Stitch AI UI源文件测试:Figma面临挑战

转而采用英文的提示词进行操作:

提示语:I need to incorporate a search field into the upper navigation bar.

在顶部的导航栏中成功添加了搜索框,并且他还对顶部标签的布局进行了重新调整,这种灵活的调整方式让我感到非常满意。总的来说,这一过程严格遵守了UI设计的标准规范。

Google Stitch AI UI源文件测试:Figma面临挑战

然而,在这次的实际操作中,我遭遇了一丝小小的波折:我本意是想对之前所设计的暗色调界面进行编辑,未曾想,它却自动转换为了浅色调风格。

这种情况并非谷歌Stitch的错,毕竟这款工具目前还处于Beta测试阶段,出现一些小插曲也是意料之中的事情。

接下来,我将尝试设计一个官方网站,输入以下提示词:

提示:设计一个现代化的、响应式的健身网站,包含一个具有吸引力的行动号召主页,以及课程、教练、会员计划、用户评价和联系表单等板块。

Google Stitch AI UI源文件测试:Figma面临挑战

在Standard Mode的基础上,我们进一步尝试了Experimental Mode。此次实验采用的是Gemini 2.5 Pro版本,相较于Standard Mode,它在生成图像的速度上略显迟缓。尽管如此,它支持图生图的功能,但目前尚不支持将图像直接复制至Figma中,以及调整主题颜色的操作。

为了检验其效果,我们首先进行了文生图的测试,选择了Experimental Mode,并运行了一个移动端案例。

Google Stitch AI UI源文件测试:Figma面临挑战

Prompt:打造一款设计优雅、用户友好的手机鞋类销售应用程序。该应用主页设有推广横幅,产品列表支持筛选功能(品牌、尺码、价格),详情页包含图片和用户评价,购物车功能,以及安全的结账流程。

Google Stitch AI UI源文件测试:Figma面临挑战

生成的效果堪称惊艳,毕竟在 Google 的阵容中,Gemini 2.5 Pro 是目前最为强大的模型之一。

接着,我决定再进行一次生成图像的尝试。这一次,我直接向它提交了一张 UI 设计图,指示它完全按照该参考图的风格和内容来创作一个全新的应用程序界面。

我的指令是:“请分析上传的 UI 设计图像,并生成一个与参考图风格和布局高度相似的新应用界面。保持相同的色彩方案、字体设计、图标以及整体的美学。确保新设计包含等效的组件,并遵循与参考图像相同的结构层次。”

值得注意的是,上一次的输出内容大约只有220字,而原文的篇幅则达到了366字,信息量损失较为严重。在本次改写中,我将确保内容的完整性,篇幅不低于原文的85%,并保留所有的细节、数字以及案例。

Google Stitch AI UI源文件测试:Figma面临挑战
Google Stitch AI UI源文件测试:Figma面临挑战
Google Stitch AI UI源文件测试:Figma面临挑战

在这个模式下,用户所获得的体验更类似于Midjourney或GPT-4o这类图像生成模型——输出的仅仅是一张静态的图片,而非可以直接进行编辑的设计原始文件。

与Standard Mode相比,它的实用性显然有所不足,目前来看,它似乎更适用于提供设计参考或灵感的图像。

至此,本期分享的内容便已全部呈现。

总体而言,Google在AI与设计领域的雄心勃勃的技术展示令人印象深刻,尤其是Standard Mode,无论是生成速度、编辑灵活性,还是与Figma的整合体验,都具备了很高的实用价值。

当然,Experimental Mode虽然目前还显得有些不成熟,但从中我们也能窥见未来图生图技术发展的巨大潜力。

目前Stitch还处于Beta测试阶段,难免会存在一些问题。然而,如果Google能够持续优化和改进,这款工具有望成为设计师工作流程中的一款强大辅助工具。

关注
客服 工单