AI 工具 101

Google Stitch 评测:我用语音让 AI 帮我设计应用

mm
将 Unite.AI 添加到您在 Google 上的首选来源
披露:

当您使用我们评测产品的链接时,Unite.AI可能获得报酬。这不会影响我们的编辑评价。 请阅读我们的 联盟披露。

A man telling AI what to create and it is creating an app.

您是否有过这样的感觉:脑海中的应用构想清晰得仿佛已经能看见它,可一打开设计工具,这幅画面就烟消云散了?

脑海中的想法与屏幕上的实际成果之间的差距,正是 Google Stitch (GOOGL ) 试图弥合的。根据我的体验,它已经相当接近这个目标。

Stitch 不同于其他AI 设计工具。它不会要求您先学习一套新系统,或者在画布上拖动组件,才能让成果初具模样。

它让事情变得非常简单。您只需描述想设计哪种应用或网站,甚至可以直接说出来,几分钟内,完整的界面就会出现在眼前。

在这篇 Google Stitch 评测中,我会介绍它的优缺点、用途、适合的人群和主要功能,然后展示我如何用它为旅行行李清单应用制作用户界面设计。

最后,我会将 Stitch 与我最推荐的三个替代方案进行比较:Base44、Softr 和 Draftbit。读完后,您就能判断 Stitch 是否适合自己。

总体评价

Google Stitch 让通过文本、语音或草图创建用户界面变得非常简单。设计可以导出到 Figma 或导出为代码,也可以手动或通过与 AI 对话实时调整。它很适合快速开展的项目,但设计可能比较模板化,控制能力有限,复杂流程也较难处理。

优缺点

  • 通过文本、语音、草图或图片快速生成用户界面
  • 导出到 Figma,保留可编辑图层以及完整的布局和组件
  • Voice Canvas 支持通过对话实时调整设计,很适合非设计师使用。
  • 可为开发者导出 HTML/CSS、Tailwind 或 JSX
  • 免费使用,提供较为充裕的额度
  • 生成结果可能较为模板化,与品牌风格不一致
  • Mark 工具有时无法选中您想要的元素
  • 对间距、层级和位置的控制有限
  • 每月生成额度可能限制高频使用
  • 难以处理复杂流程

什么是 Stitch?

Google Stitch 首页。

Google Stitch 是 Google Labs 推出的用户界面设计工具,可利用 AI 将文本提示、草图或截图转化为响应式网站和移动应用。

例如,您可以要求 Stitch 为健身应用创建一个采用深色主题和卡片布局的移动端仪表板,它就会开始用真实组件构建完整界面。前端代码(HTML 和 CSS)可以导出,因此设计能轻松交给开发者,或直接集成到工作流程中,无需从头重建。

起源:Galileo AI

不过,Stitch 并非凭空出现。Google 实际上收购了一家名为 Galileo AI 的初创公司,该公司专门根据文本提示和图片生成用户界面设计。Google 将这项技术整合到自身生态系统中,并将其更名为 Stitch。

因此,您使用的其实是一个设计师原本就愿意花不少钱购买的工具的进化版本。这意味着底层模型并非从零构建,而是在原有基础上优化的。

首次发布

该工具正式亮相于 Google I/O 2025,也就是Google 每年举办的开发者活动。不过,最初发布的版本还比较粗糙。

2026 年 3 月的重新设计才真正吸引了人们的注意。界面更简洁,生成结果更精细,也不再那么像原型,而更像能用于实际工作流程的工具。

“氛围设计”工具

Stitch 与其他AI 设计工具的区别,在于它是一款“氛围设计”工具。您不必给出“使用 12 列网格,列间距为 16 px”之类的技术规格,而是描述希望营造的感觉。

例如,“为冥想应用设计一个平静、让人信赖的引导界面”。Stitch 会理解这份意图,并将其转化为可用的用户界面设计。

在浏览器中运行

最后一点,也是我非常欣赏的一点,是它无需安装。您只需在浏览器中打开 stitch.withgoogle.com,不用进行繁琐的账户设置,也不用下载占用内存的桌面应用,直接就能使用。

对于一款由最新版 Gemini Pro 驱动的工具来说,完全在浏览器中运行相当令人印象深刻。

这就是 Stitch 的起源。它是一款容易上手的工具,很可能会改变许多人思考用户界面设计的方式。

Stitch 适合哪些人?

Google Stitch 尤其适合以下人群:

  • 独立创作者可用 Stitch 快速将应用构想转化为流程和代码,无需技术专长。
  • 前端团队可通过 CLI 自动生成不同版本的设计元素,并将项目导出为 Tailwind 和 JSX。
  • 产品负责人可创建设计变体,并快速使其符合客户目标。
  • 非技术背景的创始人可使用 Stitch 的“氛围设计”和语音命令,描述脑海中的构想,让应用成形。
  • 设计机构可在无限画布上探索多种设计方向,并在会议中与客户实时迭代。

Stitch 的主要功能

以下是 Stitch 的主要功能:

  • 用文本提示描述要创建的内容,生成完整的网页或移动端设计。Stitch 会生成多个界面、布局、组件、颜色和字体排印。
  • 使用 Live Mode,通过设备麦克风与 AI 交谈,生成完整的网页或移动端设计。持续对话即可即时调整和更新设计。
  • 上传草图或截图,将其转化为可编辑的应用和网站用户界面。
  • 创建并比较界面变体,同时保留原始版本;还可一次修改多个界面,保持流程一致。
  • 直接编辑颜色和文本,再通过提示进一步微调。
  • 将设计发送到 Figma,完整保留图层、组件和布局,便于团队编辑。
  • 将项目导出为 HTML/CSS 或 JSX/Tailwind,方便交给开发者,或立即用于前端工作流程。
  • 通过命令行(CLI)运行 Stitch,并将其纳入构建流程。
  • 使用最新的 Gemini 3 Flash 生成高质量 HTML 设计;Gemini 3.1 Pro 则将最高质量和推理能力置于速度之上。
  • 上传参考图片,引导 AI 在生成设计时匹配其中的风格、布局或特定元素。

如何使用 Stitch

以下是我使用 Google Stitch 为旅行行李清单应用创建用户界面设计的过程:

  1. 注册 Stitch
  2. 添加提示
  3. 调整设置
  4. 尝试 Live Mode
  5. 告诉 AI 要创建什么
  6. 生成应用或网站
  7. 通过提示编辑
  8. 手动编辑
  9. 预览、导出和分享

第 1 步:注册 Stitch

试用 Google Stitch。

我首先访问 stitch.withgoogle.com,并选择“Try now”(立即试用)。

Stitch 的项目和生成器。

不需要经历繁琐的注册步骤,我就进入了 Stitch AI 生成器。

左侧是我自己的项目和他人与我共享的项目。中间是生成器,可以上传草图或截图,再通过提示生成应用或网站。

第 2 步:添加提示

Stitch 示例提示。

生成器顶部提供了一些示例提示:

  • 旅行行李清单应用,根据目的地天气和旅行类型建议要带哪些物品。
  • 移动应用中的浏览标签页,提供浪漫约会和约会之夜的创意。
  • 在语言学习应用中创建测验页面,顶部带进度条。标题要求用户将一个西班牙语单词与正确答案匹配,并提供四个选项。

我可以选择其中一个,也可以自行输入提示。

向 Stitch 生成器添加自定义文本提示。

Stitch 提供的示例提示都是稳妥的选择,结构清晰,AI 能很好地处理。不过,我想看看它能否设计出更有趣的东西。

于是我添加了更具体的提示:

“创建一款旅行行李清单应用,专用于 11 月前往伦敦的三天商务旅行。界面要体现专业和高端的感觉,包含‘仅限随身行李’开关和智能天气小组件。加入‘科技与电子产品’部分,配色采用深海军蓝和柔和的灰色。”

第 3 步:调整设置

调整生成应用时使用的设置。

底部有一些设置:

  • 附加截图、草图或视觉参考
  • 选择设计类型:应用或网站
  • 选择设计系统:Bauhaus、Neon Tokyo、Candy 等预设
  • 选择模型:3 Flash 用于高质量设计;3.1 Pro 优先考虑质量而非速度;还可使用 Nano Banana Pro 重新设计,并开展构思以解决问题

我没有特意上传截图或草图,只是确保设计类型设为“App”。设计系统选择了“Silk”。我还选择了最新的模型 3.1 Pro,它比 3.0 花费更长时间,但设计质量最高。

第 4 步:尝试 Live Mode

选择 Stitch 的预览按钮。

不过,在点击“Generate”(生成)之前,我注意到一个“Live Mode”按钮,这是我以前从未在用户界面设计工具中见过的。

第 5 步:告诉 AI 要创建什么

使用 Stitch Live 描述设计并进行调整。

原来,我可以通过设备的麦克风直接告诉 AI 想创建什么,不必输入提示。我觉得这很酷。

这更像是对话式设计:AI 提出澄清问题、给出建议,并实时调整,直到结果符合我的构想。这种体验更像与助手协作,而非使用传统工具,是一种令人愉快的变化。

我向 AI 说出了完全相同的提示:

“创建一款旅行行李清单应用,专用于 11 月前往伦敦的三天商务旅行。界面要体现专业和高端的感觉,包含‘仅限随身行李’开关和智能天气小组件。加入‘科技与电子产品’部分,配色采用深海军蓝和柔和的灰色。”

第 6 步:生成应用或网站

Google Stitch 生成的伦敦旅行应用线框图。

几分钟后,AI 生成了一份风格指南和四个界面:添加物品、行李清单、天气与建议,以及行程概览。

Stitch 生成的内容出乎意料地准确。它包含伦敦的具体信息,以及‘仅限随身行李’开关、带有建议的天气小组件等细节。我甚至不需要输入提示,只要告诉 AI 想要什么就行!

第 7 步:通过提示编辑

要求 Google Stitch 将海军蓝改为灰色。

底部有一个空白提示框,我可以继续要求 AI 修改,例如“在科技部分增加一些物品”或“将海军蓝改成炭灰色”。我决定让 AI 将海军蓝改成炭灰色。

应用界面的海军蓝已改为灰色。

几秒钟后,Stitch 生成了一整套以灰色替代海军蓝的新界面,同时保留了原始界面,这一点很不错。

第 8 步:手动编辑

Google Stitch 的编辑工具。

右侧还有更多手动工具:

  • Select(V):点击界面后用 AI 编辑,或在 Modify 下点击 Edit(E),进行修改文本等具体编辑。
  • Mark(M):框选特定区域后会出现文本框,可让 AI 只修改该区域。
  • Direct Edit(E):点击设计中的特定元素,手动或借助 AI 编辑。
  • Pan(H):点击并拖动,在画布上移动视图。
  • 上传文件到画布:添加照片,供 AI 参考。
  • Design System:查看设计中使用的各个配色方案。
  • Favourites:给喜爱的界面加星标,创建收藏集。

用 Mark 框选卡片并输入修改提示。

我想试试 Mark 工具,于是按下键盘上的 M,框选了一张列有活动名称、地点、距活动天数和当地天气的卡片。

我想看看 Stitch 能否进行具体修改,于是输入以下提示:

“将这张活动卡片改成‘个性化行程’小组件。保留 Barbican Centre 地点,但将活动改为‘在 Searcys 举办的私人客户晚餐’。添加一个小的‘查看菜单’按钮,以及当前设为开启的‘提醒’开关。”

Stitch 编辑器中通过 Mark 更新的卡片。

几秒钟后,Stitch 生成了一个新界面,原有元素都在,但卡片更新了!地点保持不变,活动按要求改成‘在 Searcys 举办的私人客户晚餐’,还增加了查看菜单按钮和已开启的提醒开关。

第 9 步:预览、导出和分享

Stitch 画布的预览、导出和分享选项。

对一切满意后,我来到右上角。这里有很多选项,可连接界面并预览即时原型,也可导出和分享。

Instant Prototype(播放按钮)这个选项很酷。它生成可按手机或平板格式查看的原型,所有界面都已相互连接,可以直接交互,也能添加、编辑和连接更多界面。

点击各处探索预览并编辑原型非常简单。一切都在当前上下文中更新,无需在多个视图或工具之间来回切换。这让我更清楚地了解最终产品实际如何运作,而不仅是外观如何。

我还查看了导出选项,选择很多,包括 Figma、Jules、.zip 等。

总的来说,Google Stitch 让设计过程快速而简单,使我能更专注于构建,而不是研究工具用法。

Live Mode 无疑是最令人印象深刻的功能。它让整个过程充满互动感,仿佛在与真正的助手合作。

Stitch 的三个最佳替代方案

以下是我推荐的 Google Stitch 替代方案:

Base44

我推荐的第一个 Google Stitch 替代方案是 Base44。只需描述想要的内容,它就能快速构建应用和网站,无需编程或设置。

它内置用户身份验证、数据存储和权限功能,后端开箱即用。这意味着不写一行代码,也能构建带有实际登录功能的可用仪表板。

两款工具都能快速生成用户界面。对希望快速制作原型的非开发者来说,两者都能帮上忙,但它们的方向从这里开始不同。

Stitch 的核心更偏向设计:它擅长生成界面布局、借助 AI 实时调整,并将所有成果导出到 Figma 或导出为整洁的代码。

Base44 则更加通用,适合生成管理仪表板、网店和着陆页等。您描述需求,它就构建包含后端的成果。

如果需要快速构建带后端的完整应用,请选择 Base44;如果想要整洁的界面、Figma 导出和 AI 设计调整,请选择 Google Stitch。

阅读我的Base44 评测,或访问 Base44!

Softr

我推荐的下一个 Google Stitch 替代方案是 Softr。它更适合为自身业务构建工具的人。

借助 Softr,无需编程即可构建自定义 AI 应用、仪表板和客户门户。它提供内置数据库和可直接使用的安全登录功能,也能连接您可能已经在用的 Airtable、Google Sheets、HubSpot 等工具。

Softr 和 Google Stitch 都是无代码工具,没有开发背景也容易使用,但它们的相似之处大体到此为止。

Stitch 以设计为先,用 AI 帮您生成美观的界面,再将成果送到 Figma 或导出为代码。它并不试图管理数据或自动处理客户入门流程。

Softr 则基于这样一个思路:数据已经存在,您需要在这些数据之上构建应用。它侧重业务工作流程、数据界面,以及让合适的人获得相应的信息。

如果需要带登录和数据的客户门户,选 Softr;如果要设计应用界面并导出给开发者,选 Stitch。Stitch 用来设计应用的外观,Softr 用来构建应用的运作方式。

阅读我的Softr 评测,或访问 Softr!

Draftbit

我推荐的最后一个 Google Stitch 替代方案是 Draftbit。这是一款低代码应用构建器,可设计、构建并发布移动和网页应用,支持完整代码导出和即时部署到应用商店。

两款平台都能在不进行大量编程的情况下快速创建应用界面,因此有助于加快开发。

Draftbit 的优势是更深入的开发能力:可添加逻辑、连接 API、实时协作,并导出代码,而不被平台锁定。它面向应用发布;Google Stitch 则更侧重用 AI 生成、完善界面设计,并将其导出,以便进一步开发。

如果要构建和发布具备实际功能、且拥有代码所有权的移动应用,选 Draftbit;如果要借助 AI 快速设计和迭代界面,并导出到 Figma 和导出代码,选 Google Stitch。

阅读我的Draftbit 评测,或访问 Draftbit!

Stitch 评测:它适合您吗?

试用 Google Stitch 后,我可以自信地说,它的体验不像传统设计工具,而更像与一个真正理解您想构建什么的人交谈。

把构想说出来,几分钟内看着界面生成,随后立即预览外观和流程,这是我以往从未有过的体验。这种速度和即时反馈的组合很难得,尤其是在想法不断变化、尚显混乱的早期阶段。

不过,Stitch 并不完美。如果需要后端逻辑、自动化工作流程或接近完整可用应用的功能,就会很快碰到它的上限。

如果是这样,不妨尝试以下替代方案:

  • Base44 最适合快速构建带有登录、数据存储等后端功能的应用。
  • Softr 最适合业务工具、客户门户和基于现有数据构建的应用。
  • Draftbit 最适合构建和发布移动应用,同时保留完全控制权和代码所有权。

Stitch 的强项在于:如果想尽快将一个杂乱的构想变成可以展示的成果,我还没找到比它更出色的工具。无论是早期概念、客户提案,还是将脑海中的想法呈现在屏幕上,它都很难被超越。

感谢阅读我的 Google Stitch 评测,希望对您有帮助。免费试用,看看您觉得如何。

常见问题

Google Stitch 完全免费吗?

是的,Google Stitch 可以免费使用,支持根据文本或草图创建用户界面,还提供语音画布、原型和代码导出。

Google Stitch 有什么用途?

Google Stitch 是 Google Labs 推出的 AI 工具,可快速将文本或图片转化为用户界面设计和交互式原型。

Janine Heinrichs 是一位 AI 软件评测专家,在过去三年中测试并评审了 250 多款 AI 工具。