Connect with us

AI 工具 101

谷歌 Stitch 评论:我用 AI 将一个应用程序变成了现实

mm

Unite.AI is committed to rigorous editorial standards. We may receive compensation when you click on links to products we review. Please view our affiliate disclosure.

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

您是否曾经有过一个应用程序的想法非常清晰地浮现在您的脑海中,您几乎可以看到它?但是,当您打开一个设计工具时,整个事情就消失了吗?

这种差距(您的脑海中的想法和屏幕上的东西)正是谷歌 Stitch 要解决的。根据我的经验,它做得相当好。

Stitch 不像其他 AI 设计工具。它不会要求您学习一个新系统或在画布上拖动组件,然后才开始看起来正确。

它使事情变得非常简单。您可以描述您想要设计什么样的应用程序或网站(甚至可以大声说出来),然后完整的屏幕就会在几分钟内出现在您面前。

在这篇谷歌 Stitch 评论中,我将讨论其优缺点、是什么、谁适合使用以及其关键功能。然后,我将展示如何使用它来创建一个旅行打包清单应用程序的 UI 设计。

我将通过比较谷歌 Stitch 与我最喜欢的三个替代品(Base44、Softr 和 Draftbit)来完成这篇文章。到最后,您将知道 Stitch 是否适合您!

结论

谷歌 Stitch 使得从文本、语音或草图中创建 UI 变得非常容易。它可以导出到 Figma 或代码,您可以手动或通过与 AI 对话进行实时设计调整。它非常适合快速项目,但设计可能看起来很通用,控制有限,复杂的流程很棘手。

优缺点

  • 可以从文本、语音、草图或图像快速生成 UI
  • 可以导出到 Figma,包括可编辑的图层和布局和组件
  • 语音画布,适合非设计师的实时对话式设计调整
  • 可以导出到 HTML/CSS、Tailwind 或 JSX,适合开发人员
  • 免费使用,限制很宽松
  • 输出可能看起来很通用,且不一致于您的品牌
  • 标记工具有时无法捕捉您想要的元素
  • 对间距、层次和位置的控制有限
  • 每月生成限制可能会限制重度使用
  • 难以处理复杂的流程

什么是 Stitch?

谷歌 Stitch 首页。

谷歌 Stitch 是一个来自谷歌实验室的 UI 设计工具,使用 AI 将文本提示、草图或截图转换为响应式网站和移动应用程序。

例如,您可以告诉 Stitch 创建一个带有黑暗主题和卡片布局的移动应用程序仪表板,并且它将开始使用真实组件构建完整的界面。前端代码(HTML 和 CSS)是可导出的,因此设计可以轻松地交给开发人员或直接集成到工作流中,而无需从头开始重建。

起源(盖利略 AI)

但是,Stitch 并不是凭空出现的。谷歌实际上收购了一个名为 Galileo AI 的初创公司,专门从事从文本提示和图像生成 UI 设计。他们将该技术整合到自己的生态系统中,并将其重新命名为“Stitch”。

因此,当您使用它时,您基本上是在使用一个工具的演化版本,该工具的设计师已经支付了大量资金来使用它。这意味着底层模型并不是从头开始构建的,而是经过了改进。

最初发布

该工具于谷歌 I/O 2025 正式发布,这是谷歌的年度开发者活动。然而,最初发布的版本相当粗糙。

2026 年 3 月的重新设计才真正引起了人们的关注。界面变得更干净,输出变得更清晰,它感觉不再像一个原型,而更像是一个可以在真正的工作流中使用的东西。

“氛围设计”工具

Stitch 与其他 AI 设计工具不同的原因是,它是一个“氛围设计”工具。因此,您不需要添加技术规格,如“使用 12 列网格和 16px 间距”,而是描述您想要的“感觉”。

例如,类似于“一个用于冥想应用程序的宁静、值得信赖的引导屏幕”。Stitch 解释了意图并将其转换为一个可用的 UI 设计。

基于浏览器

最后,我要提到的是,我真正欣赏的是没有什么需要安装。您只需前往 stitch.withgoogle.com,在浏览器中打开它。没有账户设置的杂技,没有下载一个占用您 RAM 的桌面应用程序。它只是可以使用。

对于一个由最新版 Gemini Pro 提供支持的工具来说,它能够完全在浏览器中运行,这真的很令人印象深刻。

所以,这就是 Stitch 的起源故事。它是一个易于使用的工具,可能会改变很多人对 UI 设计的思考方式。

谁适合使用 Stitch?

以下是 谷歌 Stitch 最适合的人:

  • 独立创作者可以使用 Stitch 快速将应用程序想法转化为流程和代码,而无需技术知识。
  • 前端团队可以使用 Stitch 自动生成不同版本的设计元素,并使用 CLI 导出项目到 Tailwind 和 JSX。
  • 产品负责人可以使用 Stitch 创建设计变体,并快速与客户目标保持一致。
  • 非技术创始人可以使用 Stitch 的“氛围设计”和语音命令来通过描述他们的想法来创建应用程序。
  • 代理商可以使用 Stitch 来探索多个设计方向,并在会议期间与客户实时迭代。

Stitch 的关键功能

以下是谷歌 Stitch 的关键功能:

  • 使用文本提示来描述您要创建的内容,以创建完整的 Web 或移动设计。Stitch 为您生成一切:多个屏幕、布局、组件、颜色和字体。
  • 使用“实时模式”通过设备麦克风与 AI 对话来生成完整的 Web 或移动设计。继续对话以实时更新和调整您的设计。
  • 上传草图或截图以将它们转换为可编辑的 UI 应用程序和网站。
  • 创建屏幕变体并比较它们而不会丢失原始版本,并在多个屏幕上同时应用更改以保持流程的一致性。
  • 使用直接编辑和提示进行颜色和文本编辑,并使用提示进行进一步的微调。
  • 将设计发送到 Figma,包括图层、组件和布局,以便于团队编辑。
  • 将您的项目导出为 HTML/CSS 或 JSX/Tailwind,以便于开发人员接手或直接在您的前端工作流中使用。
  • 从命令行(CLI)运行 Stitch 并将其包含在您的构建过程中。
  • 使用最新的 Gemini 3 Flash 以 HTML 和 Gemini 3.1 Pro 优先考虑最大质量和推理而不是速度来生成高质量的设计。
  • 将图像作为参考上传以指导 AI 匹配生成的设计的样式、布局或特定元素。

如何使用 Stitch

以下是我使用谷歌 Stitch 创建旅行打包清单应用程序 UI 设计的步骤:

  1. 注册 Stitch
  2. 添加提示
  3. 调整设置
  4. 尝试实时模式
  5. 告诉 AI 要制作什么
  6. 生成应用程序/网站
  7. 使用提示编辑
  8. 进行手动编辑
  9. 预览、导出和共享

步骤 1:注册 Stitch

尝试谷歌 Stitch。

我首先访问了 stitch.withgoogle.com 并选择了“立即试用”。

项目和 Stitch 生成器。

在没有任何注册障碍的情况下,我被带到了谷歌 Stitch AI 生成器。

左边是我创建的项目,以及与我共享的项目。在中间是生成器,我可以在那里上传草图或截图,并使用提示生成应用程序或网站。

步骤 2:添加提示

Stitch 示例提示。

在生成器的顶部,有一些示例提示:

  • 一个旅行打包清单应用程序,根据目的地的天气和行程类型建议您需要携带什么。
  • 一个用于浪漫和约会想法的移动应用程序的浏览标签页。
  • 一个语言学习应用程序的测验页面,顶部有一个进度条。标题要求您将一个西班牙单词与正确答案匹配,提供四个可能的选项。

我可以选择其中一个选项或输入自己的提示。

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

虽然 Stitch 提供的示例提示是安全的选择,具有清晰的结构,AI 处理得很好,但我想看看 Stitch 是否可以设计出更令人兴奋的东西。

我添加了自己的提示,包含更多细节:

“一个针对 11 月份 3 天伦敦商务旅行的旅行打包清单应用程序。UI 应该具有专业和高端的感觉,具有‘仅携带随身行李’切换按钮和智能天气小部件。包括‘科技和电子产品’部分,并确保颜色调色板使用深海军蓝和浅灰色。”

步骤 3:调整设置

生成应用程序时调整 Stitch 的设置。

底部有一些设置:

  • 附加截图、草图或视觉灵感
  • 选择设计类型(应用程序或网站)
  • 选择设计系统(预设,如 Bauhaus、Neon Tokyo、Candy 等)
  • 选择模型(3 Flash 用于高质量设计,3.1 Pro 优先考虑质量而不是速度,使用 Nano Banana Pro 进行重新设计,使用 Ideate 来解决问题)

我没有上传截图或草图,但我确保我的设计类型设置为“应用程序”。对于设计系统,我选择了“丝绸”。我还选择了最新的模型(3.1 Pro),它比 3.0 慢,但设计质量将是最高的。

步骤 4:尝试实时模式

在 Stitch 中选择预览按钮。

但是,在点击“生成”之前,我注意到一个“实时模式”按钮,我以前从未在 UI 设计工具中见过。

步骤 5:告诉 AI 要制作什么

在 Stitch 中使用实时工具告诉 AI 我要设计什么。

结果发现,我可以通过设备麦克风用语音告诉 AI 我要创建什么,而不是输入提示。挺酷的,如果你问我。

这更像是一个对话式的设计过程,AI 会提出澄清问题,提供建议,并实时迭代,直到结果符合我的愿景。这感觉更像与助手合作,而不是使用传统工具,这是一个很好的变化。

我告诉 AI 我的确切提示:

“一个针对 11 月份 3 天伦敦商务旅行的旅行打包清单应用程序。UI 应该具有专业和高端的感觉,具有‘仅携带随身行李’切换按钮和智能天气小部件。包括‘科技和电子产品’部分,并确保颜色调色板使用深海军蓝和浅灰色。”

步骤 6:生成应用程序/网站

使用谷歌 Stitch 生成的伦敦旅行应用程序线框图。

几分钟后,AI 生成了一个样式指南和四个屏幕:添加项目、打包清单、天气和建议、行程概览。

Stitch 生成的内容出乎意料地准确。它包含了关于伦敦的具体信息,例如“仅携带随身行李”切换按钮和带有建议的天气小部件。我甚至不需要输入提示,我只是告诉 AI 我想要什么!

步骤 7:使用提示编辑

要求 AI 在谷歌 Stitch 中将海军蓝色更改为灰色。

底部有一个空白的提示字段,我可以在那里继续要求 AI 进行更改(例如“向技术部分添加更多项目”或“将海军蓝色更改为炭灰色”)。我决定要求 AI 将海军蓝色更改为炭灰色。

使用谷歌 Stitch 的编辑工具将海军蓝色更改为灰色。

几秒钟后,Stitch 生成了一整套新的屏幕,使用灰色而不是海军蓝。它保留了原始屏幕,这很好。

步骤 8:进行手动编辑

谷歌 Stitch 的编辑工具。

右边有一些手动工具:

  • 选择(V):单击屏幕以使用 AI 进行编辑,或单击“编辑(E)”以进行特定编辑,例如文本编辑。
  • 标记(M):在特定区域绘制一个框,一个文本框将出现,您可以在其中告诉 AI 进行更改。
  • 直接编辑(E):单击特定元素以进行编辑,手动或使用 AI。
  • 平移(H):单击并拖动以平移画布。
  • 将文件上传到画布:将照片作为参考添加到 AI 中使用。
  • 设计系统:查看设计中使用的不同颜色调色板。
  • 收藏:将您喜欢的屏幕标记为收藏,以创建一个集合。

在 Stitch 编辑器中使用标记工具突出显示一个屏幕上的卡片。

我想试试标记工具,所以我在键盘上按下“M”并在一个卡片周围画了一个框,该卡片列出了事件名称、位置、距离事件还有多少天以及该位置的天气。

我想看看 Stitch 是否可以进行特定的更改,所以我给了它以下提示:

“将此事件卡转换为‘个性化行程’小部件。保留巴比肯中心的位置,但将事件更改为‘Searcys 的私人客户晚餐’。添加一个小的‘查看菜单’按钮和一个‘提醒’切换按钮,当前已打开。”

步骤 9:预览、导出和共享

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

一旦我对一切都满意了,我就前往右上角。有很多选项可以连接和预览即时原型、导出和共享。

即时原型(播放按钮)选项相当酷。它生成了一个可以在移动或平板电脑格式上查看的原型。所有屏幕都已连接并准备好交互。我还可以添加、编辑和连接更多屏幕。

通过点击和编辑来探索预览非常简单。与其在多个视图或工具之间跳转,不如说一切都在上下文中更新。这给我带来了对最终产品的功能性(而不仅仅是外观)的更清晰的认识。

我还查看了导出选项,发现它们非常广泛:Figma、Jules、.zip 等等。

总体来说,谷歌 Stitch 使设计过程感觉非常快捷和简单。它让我能够专注于构建,而不是弄清楚工具的使用方法。

“实时模式”绝对是最令人印象深刻的功能。它使过程感觉交互式,就像我正在与真正的助手合作一样。

Stitch 的前三名替代品

以下是我推荐的谷歌 Stitch 的最佳替代品:

Base44

我推荐的第一个谷歌 Stitch 替代品是 Base44。它可以通过描述您想要的内容来快速构建应用程序和网站,无需编码或设置。

它内置了用户身份验证、数据存储和权限,因此后端功能开箱即用。这意味着您可以使用实际的登录功能构建一个工作仪表板,而无需编写一行代码。

两种工具都可以快速生成 UI。但是,如果您是非开发人员,想要快速原型化某些内容,那么任意一种工具都可以帮助您实现目标。

然而,Base44 更加通用。它擅长生成诸如管理仪表板、在线商店和登陆页面等内容。如果您描述它,它就会使用后端构建它。

如果您需要快速构建一个包含后端的完整应用程序,请选择 Base44。对于干净的 UI 设计,具有 Figma 导出和 AI 设计调整,请选择谷歌 Stitch。

阅读我的 Base44 评论 或访问 Base44

Softr

我推荐的下一个谷歌 Stitch 替代品是 Softr。它更适合那些正在为自己的业务构建某些东西的人。

使用 Softr,您可以在无需编写代码的情况下构建自定义 AI 应用程序、仪表板和客户门户。它内置了数据库和安全登录,且可以连接到您可能已经在使用的工具(Airtable、Google 表格、HubSpot 等)。

Softr 和谷歌 Stitch 都是无代码的,因此对于没有开发背景的人来说是可访问的。但是,这就是它们的相似之处大致结束的地方。

一方面,Stitch 是一个设计优先的工具。它帮助您使用 AI 生成漂亮的 UI 屏幕,然后将其导出到 Figma 或代码中。它不试图管理您的数据或自动化您的客户入职流程。

另一方面,Softr 是围绕您的数据已经存在于某个地方并且您需要一个应用程序来处理它的理念而构建的。重点是商业工作流程、数据接口和向正确的人提供正确的信息。

以下是如何在两者之间做出选择:如果您需要一个带有登录和数据的客户门户,请选择 Softr。如果您需要设计应用程序屏幕并将其导出给开发人员,请选择 Stitch。Stitch 适用于设计应用程序的外观;Softr 适用于构建应用程序的功能。

阅读我的 Softr 评论 或访问 Softr

Draftbit

我推荐的最后一个谷歌 Stitch 替代品是 Draftbit。它是一个低代码应用程序构建器,您可以在其中设计、构建和发布移动和 Web 应用程序。它具有完整的代码导出和即时应用商店部署功能。

两种平台都可以帮助您快速创建应用程序界面,而无需大量编码,因此它们都非常适合加快开发速度。

然而,Draftbit 以其更深入的开发功能而突出。您可以添加逻辑、连接 API、实时协作,并导出无锁定代码。它是为发布应用程序而构建的,而谷歌 Stitch 更侧重于使用 AI 生成和完善 UI 设计并将其导出到 Figma 或代码中。

对于构建和发布具有真正功能和代码所有权的移动应用程序,请选择 Draftbit。对于快速的 AI 支持的 UI 设计和迭代以及 Figma 和代码导出,请选择谷歌 Stitch。

阅读我的 Draftbit 评论 或访问 Draftbit

Stitch 评论:适合您的正确工具?

在尝试谷歌 Stitch 后,我可以自信地说,它不像传统的设计工具。它更像是在与真正理解您要构建的内容的人交谈。

您可以讨论一个想法,观看屏幕在几分钟内生成,并立即预览一切的外观和流程。这是之前从未有过的东西,尤其是在想法不断变化的混乱早期阶段。

但是,Stitch 并不完美。如果您需要后端逻辑、自动化工作流或类似完整应用程序的东西,您会很快感到受到限制。

如果是这样,请尝试以下替代品:

  • Base44 最适合快速构建具有后端的应用程序(例如,登录和数据存储)。
  • Softr 最适合商业工具、客户门户和围绕现有数据构建的应用程序。
  • Draftbit 最适合构建和发布具有完全控制和代码所有权的移动应用程序。

但是,Stitch 在以下方面表现出色:如果您想将一个混乱的想法转化为可呈现的东西,速度尽可能快,我还没有找到比 Stitch 更好的工具。对于早期概念、客户演示或将某些东西从您的脑海中转移到屏幕上,很难与 Stitch 抗争。

感谢您阅读我的谷歌 Stitch 评论!我希望您觉得它有帮助。 免费试用 并看看您觉得它怎么样。

常见问题

谷歌 Stitch 完全免费吗?

是的,谷歌 Stitch 是免费的。它可以从文本或草图中创建 UI 设计,具有语音画布、原型和代码导出功能。

谷歌 Stitch 的用途是什么?

谷歌 Stitch 是谷歌实验室的一种 AI 工具,可以快速将文本或图像转换为 UI 设计和交互式原型。

Janine Heinrichs 是一位内容创作者和设计师,帮助创意人士通过最佳的设计工具、资源和灵感来简化工作流程。您可以在 janinedesignsdaily.com 找到她。