与人工智能协作的全新方式

The AI Advantage 油管AI课堂 2026-04-05 纯讲解
总结 Google Stitch 是一个用对话就能生成应用原型的 AI 设计工具,让你几分钟内把想法变成可交互的网站。
工具 - Google Stitch (AI 设计工具); - Figma (设计工具); - Google AI Studio (Google 的应用编写产品); - Cursor (AI 代码编辑器);
建议 - 立即体验:作为实验性免费工具,建议尽快注册试用,熟悉其“对话设计”的工作流,感受 AI 原生设计的潜力。
播客音频
The AI A_与人工智能协作的全新方式
一句话总结

Google Stitch 是一个用对话就能生成应用原型的 AI 设计工具,让你几分钟内把想法变成可交互的网站。

核心论点展开
它是什么?怎么用?
. Google Stitch 是个 AI 原生的设计画布,类似 Figma,但核心是 AI。
. 你只需要用大白话跟它聊天,它就能在几十秒内,生成一个完整的多页应用设计。
一个具体例子
. 你可以说:“我找食谱时信息太多,很乱。想要个能收藏、分类食谱的网站,最好有个‘烹饪模式’,只显示食材和步骤。”
. 选好开发网站,它很快就能生成一个极简风格的食谱应用界面,带占位图。
. 生成的设计还能变成交互式原型,点播放键就能体验点击跳转。
当前状态与限制
. 目前是实验阶段,免费但有额度:每月 350 次标准生成和最多 200 次高复杂度生成。
. 支持 230 个国家,但核心功能目前只限英语。
. 需要登录 Google 个人账户或 Workspace 账户(后者需管理员开启 Workplace Experiments 功能)。
. 最好在电脑的 Chrome 浏览器上用,移动端支持有限,其他浏览器可能用不了语音设计等功能。
界面与核心功能
. 界面左侧是导航和预览,中间是聊天窗口。
. “实时模式”是关键:像和 GPT 语音对话,直接说话让它修改或构建设计。
. 设计满意后,可以直接从原型模式导出。
导出与上线:多条路径
. 可以导出为 Figma 原生格式,继续在 Figma 里编辑。
. 或者用“AI 工作室”选项快速上线:它能导入所有代码和精确外观,点个按钮就能让网站在互联网上实时更新。
. 也可以把代码复制到剪贴板,或者导出包含所有文件和视觉资源的压缩包,然后导入到像 Cursor 或 ChatGPT 这样的工具里持续编辑。
分享与协作
. 新功能:可以生成“即时原型”链接。
. 复制链接发给任何人,他们打开就能在各种视图里看到并体验你的应用。
其他有趣功能
. 加号按钮:可以添加截图或手绘草图作为设计灵感,系统会照着它来构建。
. 调色板按钮:可以精确调整整个设计的配色、字体和边角弧度。
. 风格指定:你可以指定某种设计风格(比如“极简”),整个网站就会按这个风格生成,并保持一致性。
. 元素选择:可以选中画布上的特定元素再聊天,AI 能精准理解你指的是哪里,就像用手指着屏幕跟设计师沟通一样。
. 直接编辑:可以直接对某个元素说修改内容,比如“把‘牛油果吐司’改成‘牛油果香脆辣椒吐司’”。
. 灵感上传:可以上传更多图片,作为应用程序的一部分来辅助设计。
关键数据与案例
. 生成时间:从想法到可交互原型,只需几分钟。
. 生成额度:免费用户每月 350 次标准生成 + 最多 200 次高复杂度生成。
. 案例:通过自然语言描述,生成了一个具有分类收藏和“烹饪模式”的极简食谱网站。
提到的工具/产品/技术
. Google Stitch (AI 设计工具)
. Figma (设计工具)
. Google AI Studio (Google 的应用编写产品)
. Cursor (AI 代码编辑器)
. ChatGPT (AI 对话模型)
金句
. “这确实消除了从想法,到能给人看甚至能用的东西之间的所有早期障碍。”
. “现在关键是你愿景够不够清晰,对技术能力的要求已经完全消失了。”
. “如果你从来没学过 Figma,现在它已经能为你所用。如果你对设计一窍不通,至少你知道怎么表达。”
对 Vibe Coder 的价值
. 快速原型验证:几分钟内将产品想法可视化、可交互化,极大加速创意验证和早期反馈。
. 降低设计门槛:无需学习复杂设计工具,用自然语言即可获得专业级设计起点,特别适合独立开发者和创业者。
. 无缝开发衔接:设计可直接导出为 Figma 文件或干净代码,轻松导入现有开发流程(如 Cursor),不锁定在特定平台。
. 激发创意与沟通:通过“对话式设计”和“灵感上传”(截图/草图),能更直观地探索和表达设计思路,甚至作为与客户/团队沟通的桥梁。
建议
. 立即体验:作为实验性免费工具,建议尽快注册试用,熟悉其“对话设计”的工作流,感受 AI 原生设计的潜力。
. 定位为“超级起点”:不要指望它一步到位做出最终产品。把它当成最强力的“创意加速器”和“原型生成器”,用于快速探索方向和获得可展示的成果。
. 探索混合工作流:尝试“Stitch 生成原型 -> 导出至 Figma 微调 -> 通过 AI 工作室或导出代码进入开发”的全流程,找到最适合你团队的协作节点。
. 关注其进化:作为 Google 的实验产品,其功能、额度、集成能力可能快速迭代。保持关注,它可能成为你设计-开发工作流中的关键一环。

我们即将探索市面上功能最强大、最受欢迎的Vibe设计应用。看,只需60秒,通过和你的电脑对话,你就能完成这个设计。来吧,构建整个应用流程。正在处理中。很好,我已经为你创建了完整的应用流程。

你可以体验完整的应用流程。现在就可以预览。你想做什么?现在预览。你想做什么?现在预览。你想做什么?下一步?下一步?下一步?>> 哇,快看那个。>> 哇,快看那个。>> 哇,快看那个。>> 我喜欢这种简洁的极简美学。>> 我喜欢这种简洁的极简美学。>> 我喜欢这种简洁的极简美学。>> 它叫做Google Stitch,本质上是一个AI原生的设计画布。>> 它叫做Google Stitch,本质上是一个AI原生的设计画布。>> 它叫做Google Stitch,本质上是一个AI原生的设计画布。

如果你熟悉的话,它就像是Figma,从一开始就以人工智能为核心设计。我将向你展示如何立即上手,以及一些突出的功能。

无论你是Vibe设计的新手还是经验丰富的设计师,这段视频都将向你展示其实际工作流程。到最后,你或许能判断它是否适合你。这款应用已存在一段时间,Google一直在对其进行探索。

但现在他们已经开始进行实验。不过,他们刚刚添加了一些关键功能,使其成为一个成熟的应用程序。该应用已在230个国家上线,但核心功能仅限于英语。使用时,用户必须登录个人Google账户或Google工作区账户。

请注意,如果您使用的是Workspace账户,您的Workspace管理员需要为您启用Workplace Experiments功能,才能通过该账户访问Stitch应用。

虽然这款应用目前处于实验阶段,可以免费使用,但它采用月度信用额度机制,每月提供350次标准生成和最多200次高复杂度专业生成。在设备方面,我强烈推荐使用配备Google版Chrome浏览器的台式电脑。

桌面电脑上装有Google Chrome浏览器。移动支持是mit的,某些移动支持是mit的,并且某些功能如语音设计在其他浏览器中无法正常工作,我们稍后会详细探讨这一点。好的,现在让我们直接打开应用程序。你可以找到它。

你可以在下方描述中找到链接,注册一个Google账户后,你将看到这样的界面:左侧是导航栏,中间是标准的聊天界面。

这里有几个选项,但核心功能是下方的这个按钮——模型切换器。点击它时,你会看到几个不同的模型,具备重新设计的能力。不过,我真正想在这里向你展示的关键功能是ID8特性。

这正是它区别于众多其他应用之处,也是为何它被称为氛围设计的原因。以往,如果你想设计应用程序界面、网站或任何你想要创作的东西,过程中总会遇到各种问题需要解决。

现在情况不同了。ID8方式。现在情况不同了。ID8方式。现在情况不同了。ID8帮你解决这些问题。所以,也许你正在帮你解决这些问题。所以,也许你正在帮你解决这些问题。

所以,也许你正在设计某个东西,却不确定如何解决某个问题,或者你正从零开始,就像我们接下来要做的这样,通过提出类似这样的表述:“通常,当我想在网上寻找新食谱时,我会感到不知所措。我希望能够……”

我希望能够收藏喜欢的项目,让这些收藏项目也能收藏其他项目,并且对这些收藏进行分类管理。我还希望拥有一种“烹饪模式”,在该模式下,屏幕上仅显示食材清单和操作步骤,其他内容全部隐藏。最后,我只需在此处选择是想要移动应用还是网站版本。

我们选择开发一个网站,因为我现在正用笔记本电脑查看。"紧接着,界面便切换到了Stitch所采用的全新无限画布模式,左侧区域可以实时看到其运行效果。

底部是我们的聊天窗口,右下角是我们的聊天窗口,右侧有一些工具可以移动或添加内容,中间这里随时可能出现烹饪网站。就这么简单。好的,让我们回头看看这个聊天窗口。

如你所见,这里询问我选择何种设计方向。它提供了多种自由选项。我无需了解设计知识,只需确认“编辑禅意”听起来不错即可。于是,我直接输入并按下回车。

因此,它创建了一份所谓的PRD文档,详细列出了我们应用程序的所有细节。如果你熟悉其他Vibe编码应用,这通常是最有效的工作流程。实际上,我并不需要你了解这些,你只需要知道这一点。

你只需要知道,在这里,按下这个按钮,这个实时模式,它和聊天模式非常相似,和聊天模式非常相似,和聊天模式非常相似,与GPT的语音模式类似,我们和它对话,它也会回应。如果你知道这个按钮的存在,你就不需要了解这次访谈中的其他太多内容。让我来演示给你看。

>> 嘿,我们今天在编辑禅上设计什么?嘿,我想知道下一步是什么。

>> 让我仔细看看。嗯,让我想想。这真是个绝佳的开端,能真正提升流程。添加强大的搜索和筛选体验对于内容发现和个性化至关重要。

发现与个性化。发现与个性化。

>> 好的,请继续。构建整个流程。

>> 好的,请继续。构建整个流程。

>> 好的,请继续。构建整个流程。

>> 正在处理中。

>> 正在处理中。

>> 正在处理中。

>> 一个小技巧:在Mac上,如果你按下Shift键

>> 一个小技巧:在Mac上,如果你按下Shift键

>> 一个小技巧:在Mac上,如果你按下Shift键

和数字1,就能缩小视图并显示整个

和数字1,就能缩小视图并显示整个

和数字1,就能缩小视图并显示整个

界面。你也可以直接用鼠标滚轮,

界面。你也可以直接用鼠标滚轮,

界面。你也可以直接用鼠标滚轮,

但Shift加1的效果更明显一些。

但Shift加1的效果更明显一些。

但Shift加1的效果更明显一些。

很好。我已经创建了完整的应用流程

很好。

我已经为你创建了完整的应用流程。你现在可以查看一下。接下来你想做什么?>> 哇,看看这个。>> 我喜欢这种简洁、极简的美学。>> "开始烹饪"模式非常专注,确实让人能全心投入。>> 好的,我先暂停一下。

首先,这个网站简直美得令人惊叹,它完全符合我们追求的极简主义风格。其次,与这位AI助手交流,让它像设计师一样为我构建事物,这种体验超乎现实。

让我告诉你,你可能已经注意到视频中的光线变化了。那是因为太阳刚刚落在这扇窗外迈阿密的摩天大楼后面。让我展示给你看。

当夕阳壮丽西沉,我的AI助手正在构建一个多页食谱应用,而我只是与它交谈,它就为我完成了这一切。我这么说是因为,即使只是这样做,也感觉超乎现实。看,它还生成了所有的占位图片。

我做了什么?我给了它两句话,然后又说了另一句。我对应用设计一窍不通。顺便说一句,这样你也能创建移动应用。哦,有趣的部分来了,你只需按下这个播放键。

只需按下这个播放按钮,它就会变成一个交互式应用。这样你就能亲身体验了。好的,它就在这里。我可以转到我的收藏,打开其中一个极简食谱页面,那个按钮会带我回到这里。太棒了。现在,如果我……

现在,如果我对这个设计满意,我可以回到左上角的原型模式,然后直接点击导出。接着会出现一系列选项。如果我是一名设计师,并且正在使用Figma,我可以将其导出为原生格式。

如果我只想让这个东西上线,如果我只想让这个东西上线,如果我只想让这个东西上线,最简单的方法就是默认的互联网,最简单的方法就是默认的互联网,最简单的方法就是默认的那个,AI工作室选项。如果我说一个,AI工作室选项。如果我说一个,AI工作室选项。如果我说用AI工作室构建,它会导入所有的用AI工作室构建,它会导入所有的用AI工作室构建,它会导入所有的代码和精确的外观。然后代码和精确的外观。然后代码和精确的外观。然后是Google的AI工作室,这是他们的Google的AI工作室,这是他们的Google的AI工作室,这是他们的产品,用于编写应用程序。我们将产品,用于编写应用程序。我们将产品,用于编写应用程序。

我们只需重建这个。然后按下一个按钮,它就能在互联网上实时更新。这是让网站上线的最简单方式。但也许我还想继续完善它。

或许我想把它导入Clot代码或ChatBT,持续导入Clot代码或ChatBT,持续导入Clot代码或ChatBT,不断编辑,这样你就能得到一个包含所有文件的压缩包,其中也包括视觉效果,或者直接复制代码到剪贴板。最后,还有一个新功能,你可以将其转化为即时原型,通过点击分享开关启用共享,然后复制链接。任何你想展示想法的人只需打开链接,就能在各种视图中看到你的应用,这就是这款应用的核心所在。

这个应用真的很不一样,真的很不一样。它与聊天完全不同,因为你与它对话,事物就会凭空出现,这是一种全新的互动体验。刚才我展示了从零开始到完整托管网站的全过程,或者说是准备好交付给他人使用的成品。

但我们还没结束,因为这里还有几个有趣的功能我想展示给你看。这个加号按钮允许你添加截图作为灵感来源。如果你想重建Apple网站,或者打造类似的东西,你可以在这里添加相关截图。

你可以在这里截取屏幕。你还可以添加手绘草图,描绘你想象中的设计,系统便会据此构建。这个调色板按钮能让你精确调整配色方案、字体以及边角弧度。此外,在这里你可以指定某种设计风格,整个网站将随之生成。

接着整个网站的设计将遵循这一原则,并随着你的持续工作而保持一致。右侧的这个栏位相当直观易懂,因为它只是提供了一种更优的方式,与始终位于左侧的聊天界面进行互动。

我可以选择特定元素,这样当我在聊天中发言时,它能准确理解我的意思。这几乎就像用手指着屏幕给坐在旁边的设计师看一样。我在这里结束选择。

直接编辑功能让你能够直接编辑,比如这个元素。我可以说,我不想要牛油果吐司,我想要牛油果香脆辣椒吐司。懂的都懂。手形工具只是用来移动画布的。

在这里,我可以上传额外的图片作为灵感,作为应用程序的一部分来辅助我的工作。基本上就是这样。如果你从未学过Figma,现在它已为你所用。如果你对设计一无所知,至少你知道如何表达。

现在关键在于你愿景的清晰度。对技术能力的要求已完全消失,因为可以直接导出到Figma或复制代码,你不会被困在这个环境中,只需将其作为工具使用。

你只需以此作为起点。一个真正有趣的起点。这确实消除了从想法到能呈现给他人甚至可用的东西之间的所有早期摩擦。它实际上非常出色。差不多就是这样。我们刚刚完成了一次转变。

我们刚刚在短短几分钟内,将一个想法转化成了一个可交互的工作原型。如果你还没尝试过,我强烈推荐你试试。我是伊戈尔,祝你今天过得愉快。

原视频 导出PDF