stitch 支持figma导入吗

今天给大家做一期谷歌 stitch 的 完整教程，那我用它呢，纯粹是因为它的审美很好，所以我的很多网站跟产品都是在里面去用它来玩的， 它可以支持修改导出到 figma， 然后近期有两个核心的功能升级，第一个就是 design 点 m d， 现在你可以根据你自己喜欢的风格，让他帮你生成一套完整的视觉体系，有了这个设计体系之后呢，你的设计风格就能稳定的产出产品，产品的页面不会跑偏。第二就是他可以在线预览你的 产品交互，你可以把你做好的设计图直接框选上，点击预览，它就可以生成一个能够让你点击操作的产品示意，相当于在进入开发之前，你已经提前看到了产品最后长的是什么样子，也非常有帮助。我们会讲一下里面的功能板块都有哪些， 然后我认为正确的操作流程跟顺序是什么样。然后在最后呢，我也会给大家讲几个我个人用起来比较好用的进阶使用技巧。在开始之前呢，我们先来明确一个定位，就是 stitch， 它不是一个用来替代 figma 的 工具， 它更像是在做一些脑爆创意，非常适合让你的一些想法提前变成一个看到的产品形态，减少很多的沟通效率。然后你可以给 ai 去看，也可以让设计师或者说开发去看， 这都非常的好用。首先呢我们进入到 stitch 的 首页左侧，它是往期的项目，正中间是开始的界面，下面的功能键依次是，你可以上传图片和网址作为你的设计参考，可以选择你要到底是做 app 还是网页期间选择一个设计的系统。 呃，然后就是模型的选择，我一般呢会选择一或者二，如果你的产品界面比较多，像 a p p 什么，我会建议大家选二。呃三是给现有的网站去做重新设计。然后最后一个 ideate， 它是用来更多早期的产品发散 作用，但我用的比较少。开始之前你首先需要做的是你要知道你到底要做一个什么样的产品，自己都不知道，你很难在这里面进行各种脑爆。 它是一个 app 还是网站？解决什么问题，叫什么名字？它可能会有哪些的页面跟功能？那我们今天这个案例呢，我们就用一个比较简单的例子 来做一个网站的落地页，整个创作的步骤分成三步，第一步就是确定设计体系，第二步生成产品页面，第三步是局部的调整跟导出。那如果我们以 一个网站落地页为例的话，假设我想要做一个 ai 笔记工具的网站首页，我们就在输入框输入，首先它是一个 什么东西，它解决了什么问题，什么的板块，还有一个很重要的点，就是你可以输入希望用户在看到你这个产品的时候，它是什么样一种感受，那我希望用户感受到的是一种沉浸式的体验，我希望用户能够进入到新流模式 去进行打字啊写作。然后在这边呢，我会建议大家提前去找到你喜欢的设计风格，那可以是图片，也可以是网页，它会基于这些元素去帮你发散，而不是用文字去描述。那我们这边呢，就用 苹果的官网作为视觉参考，我们点击左下角的加号，选择网页网址，点击开始。 接下来呢我们就进入到了 stitch 的 实际创作界面，它的整体创作界面是一个无线画布，可以支持拖拉 拽，所有的深层的内容都会在这边展示。底部是你和 ai 沟通的区域，左上角是 ai 回答的部分，这边唯一的区别就是这两个东西是分开来的，跟我们一般的 ai 工具不太一样。 然后你要改这改那，然后在左下角呢是我们每次对话的记录，你可以理解为它是一个历史记录，我们可以找到之前的修改，在最右侧是具体的编辑，调整修改里面的字的内容啊，或者说去调整别的东西。然后呢我们就进入到第一个阶段，我们要做的就是要首先确认你整个产品的设计风格， 那前面我们已经选择了苹果官网，他已经给了一个初步的视觉，你可以看到这个画板的样式， 它其实就是一个设计系统，相当于它已经根据你给的网站总结了一套苹果风格的设计体系。然后你双击，你甚至可以在这边去直接调整它的颜色，字号，还有圆角，它都会对应的去反映到这个设计系统里。点击右上角的 design d m d， 它是一个文字版的 设计规范，它告诉了 ai 哪些需要遵循，然后你甚至可以把这个东西啊给到真的交互设计师，或者给到 ai 都可以让你的产品更好的去被做出来。那假设这并不是我想要的设计系统呢？那我们也可以去再上传不同的网址或图片啊，让它去创建新的设计风格， 最后用图片描述，让他重新产出一个设计系统啊。在这一步我们不需要去看里面的设计细节，我们要做的只是确认整体的一个风格。第二步，当你确认了设计系统之后呢，我们再去创建页面 啊，这样所有的页面它都会遵循同一套体系，那因为我们的案例是一个落地页，它就一个页面，但假设它是一个网站，网站会有不同的页面，那我们就在这个聊天框输入，帮我们根据这个设计体系去创建。比如说产品页啊，价格页面，关于我们产品功能页面 就越具体，它会深层的，会越符合你的要求。你可以在这边提前预览你的产品效果框，选所有的页面，比如说我们做的这个网站， 它所包含的所有页面，然后点击上方的播放按钮，它就会做出一个交互的界面，这个就是你可以上手去点按钮，然后看到实际的交互跟跳转，可以在开发之前就看到一个最终的一个效果啊，你甚至可以录屏放到网上，让用户看一下这个产品的样子，提前拿到用户的反。 在第三阶段生成完成后呢，最后我们要做的就是局部的调整，如果是大的修改，比如说像整体的颜色空间，那这一类可能会影响到全局。你就直接点击一张图片，然后在下方去用文字描述大体的改一下。那还有一种方式就是点击图片 在上方的 modify， 点击 annotation 这个功能，你可以在页面当中去框选具体要修改的是哪一个部分， 你也可以去输入具体的文字，对于一些小的修改，比如说改文字的内容啊，就来到右侧的铅笔图标，我们点击，然后回到图片，选择 edit text 调整里面的内容就可以。有些地方如果是图片，你也可以直接把一个图片的地址给复制粘贴过来，进行一个大致的图片替换， 看一个大致的效果。确认完之后呢，我们点击右上方，可以导出到 figma 去做更细的调整。最后呢再给大家讲两个进阶的使用方法。那第一个就是我会推荐有一个工具叫做 component library， 它里面包含了各种的设计元素跟术语， 你可以更加准确地去跟 ai 描述你需要一个什么样的交互形式。然后它这边也会有也有很多现成的设计系统，你可以选择自己喜欢的，可以甚至点进去把这个网站复制，作为你的一个 设计的一个参考。第二个技巧呢，就是我会提前画一个手稿，因为我发现其实给 stitch 一个圆形可以让它更好的依据你的这个圆形效果去产出设计。 那我们原先是先有需求文档，再有产品文档啊，需求是告诉我们这个产品解决什么问题的，然后产品呢，是具体说的每个板块都是做什么，我们不需要去学这个东西啊，但是你可以简单的就画一张图，然后去把这个框架给框出来，说这里是什么，这里是什么，然后把这个截图上传给到 stitch， 然后让它基于你的这个源泉去做设计，它会做出更加符合你要求的东西。我觉得 stage 是 一个迭代飞快的产品，介于了在你想法跟实际产品中间的那个设计部分。 最近一直在用，我觉得它是一个很值得大家去上手学习去了解的工具。而且在未来我觉得它真的有可能会替代掉 figma， 去做一个能够直接在里面做非常精细调整的 ai 原声工具，有任何问题直接在评论区跟我留言。好的，我们今天的视频就这样，希望大家喜欢，我们下期再见。

stitch 又更新了， figma 股价硬升大跌，带你感受一下这可能是未来的 ui 设计方式。上传一张参考图，输入提示词，制作一个宠物周边商品电商平台，并给出要它做的页面列表。 这次比较大的更新是它每次输出页面之前会先做一套设计系统，这套设计系统我们可以随时修改里面的配色、字体、圆角等内容。有点正儿八经的 ui 设计工具内位了。 看看他给出的页面，其实就是正常煎饼奶的能力。但是这次更新在功能上有了很大变化，比如可以自动生成可交互原型，这个不需要像 figma 那 样手动连线， stitch 会给你把页面跳转全部设置好，并且你也可以通过 ai 补全页面，他会给你推荐一些欠缺的页面， 你可以按它推荐的补充，也可以自己输入提示词去补充页面。同样的，新增的这些页面同样也会被连入交互原形中。可以点击单个页面，如果你想要修改，可以直接点击你要修改的部分，比如把这个改成滚动 banner， 并将图片改成猫咪，它也能很快改好。 当然你还可以通过语音跟他沟通进行修改，但是目前我感觉这个功能意义不是很大。还有一些之前就有的功能目前也得到了完善，比如可以随意切换的移动端、电脑端设计稿，目前可以同屏展示多个不同尺寸的设计稿。 再比如，你可以框选你所有的设计稿，一键复制到 figma， 之前只有 flash 模型生成的可以复制到 figma， 现在 pro 版本的模型也可以，并且到 figma 中查看一下效果，整个内容做得非常规范，三格系统自动布局，整个颜色、字体等元素的一致性 我觉得真的很不错了。有些人可能会杠做复杂产品的问题，但是这个真的只是时间问题。总体来说，斐格玛在 ai 这块确实慢了一步， stitch、 pencil paper 都在探索一种 ai native 的 ui 设计方式，可能就是未来的趋势。

谷歌真的不讲武德，帮我设计一套小红书风格兴趣电商网站的 u i， 包括首页、列表页、详情页、订单页、个人中心页等等，正在设计中，请稍等。哇，太棒了！小红书风格的电商网站已经创建好了，你想看看哪个页面 把这些页面生成一套交互原型？我可以设计一套包含订单详情和追踪的完整流程，让你的电商体验更加流畅。正在生成中，请稍等片刻互动流程页面已经完成了！ 一句话，生成一套交互图，能点能动，太适合做屏审了！而且 space 还自带一整套 ui 规范， md 格式的 直接丢给任何 ai 都能读，你自己设计的规范也能喂给它设计和开发。第一次真正打开，这就叫专业！最重要的是完全免费，赶紧去试试吧！关注我，每天一个 ai 小 技巧！

这下完蛋了，设计上的天是真的塌了！谷歌最新的设计软件 stage 直接把 u i 设计卷到了新纪元。一张随手画的草稿， ai 就 可以设计出极具设计感的效果。不管是设计师、电商创业者，还是想搞个人项目的普通人，这个工具都能帮你生成完整的网站页面，让你把脑子里的想法直接变成可以 专业交互的页面。排版、配色、质感通通拉满。以前做设计可能要在不同软件窗口跳来跳去，现在 stitch 直接给了一个无限大的画布来满足你的需求。图片、代码、文字都能一起丢进去当上下文，甚至还能一键复制到 fake 码中。设计生，以前卷审美，现在卷 ai， 我 直接卷成麻花了！

朋友们，现在设计行业也迎来了 web design， 哪怕你完全不会设计，只要你动动嘴，就能让 a i t 你 完成设计。 what do you think of this screen？ i think we can try out some other color and layout options let's do it。 就在前几天，谷歌突然发布了这款免费 ai 设计工具地区的重大更新，宣布 web design 到来，更是让飞格玛股价当天直接下降了八个点。那么它到底跟我们传统的设计工具有啥不一样呢？ ok， 让我们来一起进行真实实测。 ok， 那 我们首先进入 stitch 的 官网，呃，然后我们先来测试一下我比较感兴趣的功能吧，就是 stitch 的 语音交互功能，也就是用语音来做 web design。 那 么这个功能的按钮是在这里，我们呢点击一下， 点击好了我们就直接进入这个画布了，然后我们尝试直接连麦对话，接下来全程请用中文和我对话，帮我生成一个室内工作室的网站，网站风格呢，我想要高级极简风格，然后要求是中文版的，然后我们稍等一会， 好在大概十五秒后呢，我们可以看到它首先是自动给我们创建了一个设计系统的页面，里面是整个网站用到的配色，字体还有主键啊等等， 这个是它本次更新的一个很重要的亮点。首先在做页面之前先定下整个设计系统是非常合理的，我们在这个设计系统里可以看到有一个第三点 m d 里面是对应各种设计的参数。 那么有了这份 md 文件呢，它就会用在我们每个页面上的配色啊，字体啊，还有主键啊等等，它呢确保了我们所有页面在整体风格上的高度一致性，包括后续如果我们在使用一些 ai 编程工具进行开发的时候，这个 md 文件能让 ai 直接精确还原出我们的设计方案。 ok， 在 大概等待一分钟左右，我们可以看到所有的页面已经生成了啊，然后这四个页面的配色呢，是都遵循了最开始生成的这个设计系统 整体的设计水平虽然还是比较初级的水平啊，但如果作为一点零版本呢，是合格的，因为里面有动态效果，我们可以直接选中一个页面，然后预览一下真实的效果， 可以看到它里面其实自己是有做了动效的。然后上面我们可以切换查看这个页面在手机端，平板端还有网页端的效果。 ok， 那 它已经完成了最开始的四个一级页面，而且完成的也还可以， 那么我们测试一下，在页面上进行一些小下的改动。首先我觉得我想改一下左上角这个工作室的地方，然后输入将这个名称换成 abc 工作室，发送 之后，他会重新生成四个页面，统一的把左上角的名称呢都改成了 abc 工作室，而不是在原来的页面上改。这点其实是非常友好的，第一是我们可以用来对比，第二呢是防止我们误改。我们再测试一下，再联系我们这个页面框，选这段话，输入， 将这段文字改成一行，并且加入走马灯的动态效果。 ok， 点击发送。 等他生成完毕，我们在这个新的页面上就可以看到他已经完成了我们将他改成一行的要求，然后我们预览一下，可以看到卓玛灯的动效也有了，我们再在关于我们页面来改一下宽选这两个人的照片，将这两个人的位置换一下发送， ok， 可以 看到新的页面上不仅人物照片换了，连他们对应的信息都调换了，可以看他完成的还是相对比较精准的。那么我们可以只通过语音或者文字跟 ai 沟通，就能够在画布上把我们的设计给完成了。 接下来我们来看他的即时圆形功能，我们框选这几个页面，点击右上角这个播放按钮，他就会在旁边生成。完成后呢，我们就可以预览交互流程了，可以看到我们不用手动点对点去连线了 地区，会理解你的交互逻辑，自动生成交互跳转流程。那么其实还有很多页面我们是没有创建的，比如在这个作品集里，我想点击进去看详情，但是没有页面，我们就可以顶部选择编辑，然后点击一下这个图片，选择最后一个，它就开始自动生成新的页面， 稍微等待一会呢，就可以看到这个页面创建完成了，然后我们返回作品及这个页面，点击这个图片就能自动跳转到我们刚刚生成的页面上了，那么我们就可以这样依次去补全我们想要的页面， ok， 那 么总体来说呢，这个即时原型功能我是完全可以给到吭这个级别的，我们还可以框选页面，直接让他生成一份 prd 文档，那后续如果想继续精修的话，也可以导入到飞格玛里，很多体验玩法呢就留给各位慢慢去尝试了。 然后这个工具目前也是免费的，我们点击左上角的设置，里面可以看到今日用量，每天的免费额度呢，也会更新的。 ok， 那 么测试完这次 google stitch 的 更新，有不错的亮点，也有一些遗憾的地方，如果斐克马负责的是从一到一百的精雕细琢，那么 stitch 解决的就是从零到一的降维打击，他甚至让完全不懂设计的人直接跨过设计阶段，进入 mvp 验证。 在这个快鱼吃鳗鱼的 ai 时代，这种零门槛的速度就是一种核心竞争力。好了，我是宁护火，那么我们下期再见。

说实话，现在的网页设计几乎已经完全自动化了，特别是在 google labs 对 stitch 进行革新之后，这款 google 旗下的工具能让你轻松生成精美的 web 前端， 甚至连移动端应用也能完全免费生成。最厉害的一点是，它搭载了 gemini、 三点一 pro 等顶尖模型，在我看来，它是目前生成前端和 ui 的 最强模型之一， 因为你能做出极简精美的高颜值设计，且只需几分钟。比如，在 stitch 中，我用它生成了这个精美的落地页，效果完美复刻了交易平台。我只是简单提供了一些灵感参考，就是这张交易仪表盘的图片，它就自动生成了整套设计系统，包含了完整的配色方案， 还有字体规范以及可附用的组建，可以用来构建这些不同的落地页样式。你可以看到它生成了一个版本，下面还有 link， 基本上它由此生成了与我预想几乎一致的像素级完美版本。 它还结合了我的系统提示词，效果确实非常惊艳。更棒的是， stitch 支持生成多种原型方案，你只需通过简单的操作，就能让它生成各种不同的样式。你可以添加不同的布局组建并进行重塑， 甚至能根据你的提示词进行完全重构。这样一来，繁重的工作就可以交给他来代劳。而在 figma 等其他平台上，操作成本往往比较高， 而且你还得手动调整大量组建来标注变更，但在这种情况下，操作起来非常直观。接下来才是最精彩的部分。将 stitch 与 cloud code 结合使用， 这是一款 ai 编程代理，我个人认为它是目前市面上最强的一款，它就直接内置在你的终端里。你可能会想，为什么不直接用云端模型来直接生成前端确实可以这么做，但关键在于，首先， cloud 模型在设计方面的能力有限。虽然生成的界面可能挺好看，但就我的经验而言， 它们在表现上还是比不上 gemini， 尤其是在设计高品质的视觉组建时。其次， stage 是 完全免费的， 它是专为设计而打造的工具，它能让你在视觉层面拥有更强的掌控力，尤其是涉及到这些功能，比如实时编辑、标注以及组建及调整。 所以，与其硬让 cloud 去做设计，你可以利用 stitch 打造高质量、像素级完美的视觉稿。接着，你可以实现这样的操作，提取这套设计系统， 并将其导入 cloud code， 连同在 stitch 中生成的组建一起。随后， cloud code 能将静态设计转化为实际代码，添加交互接入后端逻辑，并最终构建出完整的应用程序。 总之，你可以用 stitch 精细的打磨 ui， 例如重现深色模式，或是刚才演示的那种霓虹绿加密货币看板，随后再将其导入 cloud code 的 进行处理， 从而将其转化为功能完美的可直接上线的网站或应用。这本质上是构建了一个工作流，能够实现前端开发自动化。 简单来说，你只需描述用自然语言在 stitch 中创建的内容。瞧，我已经用它做出了一些非常出色的设计， 它将能够深层基于你给出的提示词的精美前端界面，无论是网页版还是移动端 app， 而且操作非常简单，只需输入提示词，比如数据分析仪表盘，你可以指定是用于网页 还是移动端。 app 接着选择模型建议配合思考模式，使用 jimmy 三点一 pro 或者最佳设计组建。你可以选择自行创建设计系统， 也可以直接使用现成的各种预设，或者干脆让 stitch 从零开始为你生成。接着只需输入你的提示词，随后它便会自动生成多套为你准备的不同设计方案。我将演示如何进一步创建多个遍体。在初识设计完成后， 就这样，一套设计系统就此诞生。最契合我们的库存管理仪表板轻而易举的，仅凭一个提示词就能搞定，你就能为这个仪表板生成多种设计方案，你可以看到深层的质感非常出色。现在你还可以直接预览， 通过标注不同的组建就能进行修改。这正是我非常喜欢 stitch 的 地方，因为它能让你利用 ai 进一步深挖网页设计细节。比如，如果你想更改字体排版，直接在对话框中说明要求即可。 你还能选择不同的组建，就像我刚才说的，你可以直接进行标注，你甚至还能生成多种不同的设计方案，而且还能实现圆形的计时预览。你可以直接与 ai 协助针对特定组建进行调整， 在实时预览中及时反馈，这是 cloud code 所不具备的，因为 cloud code 生成的是静态内容，这导致你无法对各个组件进行二次加工， 也无法根据你所描述的标注进行后续迭代。此外，我还想强调一点，你拥有创建多种方案的能力，并可以根据需要指定生成的数量， 从而生成风格各异的多样化设计方案。你还可以对它进行进一步优化，或者根据你的额外指令进行重塑。目前，大家用 stitch 做出的成果非常惊人，因为它几乎能包揽设计师的所有工作。如你所见， 无论是手绘草图还是线框图，甚至 figma 设计稿，这就是 stitch 能够将其复刻之处。仅仅是凭借这张草图的设计，它能通过识别图片并结合你的指令 实现界面的完美还原。你可以看到深层的界面质感有多么出色。它能精准地按比例还原手绘草图。举个例子，我可以给它一张线框图， 然后告诉 stitch 助手，我想创建一个开发一款现代化的移动端 ai 助教 app。 基于我设计的这套线框图， 接着就能让它深层对应的 stitch 设计稿。根据这四张不同的 app 线框图，也就是我们为 app 提供的，它成功地将设计复现了出来，可以看到它深层的设计效果非常出色。不仅如此，如果你有落地页，设计是你想参考的。例如， 比如，你可以直接使用 framework 模板库里的内容，只要是你喜欢的风格，就可以直接把它作为设计灵感，然后导入 stitch 进行复刻。 就像我之前用这张提供的参考图为交易平台生成这个落地页一样。现在我们进入下一个环节，这时就可以用到 cloud code 了，它能基于此进行构建推理， 并根据我们的设计方案直接发布功能。接下来，只需选择想要处理的页面，你也可以同时选择多个。 具体操作是按住 ctrl 键，然后右键点击。抱歉，应该是左键点击屏幕，接着点击导出。这里会看到一个免费选项，让你能通过 google ai studio 直接根据设计稿制作原型。 不过 gemini 模型也并非全能，特别是在原型设计方面，而且 ai studio 现在的表现也不如以往那样给力了。因此你可以将 stitch 作为 m c p 配合使用， 接着将其接入 cloud code 即可。根据你的设计进行原型开发。或者你也可以直接把代码复制到剪贴板，因为只要在屏幕上点击右键就能直接预览代码。你可以在这里查看其生成的全部前端设计。 接着打开命令提示符，点击 cloud code， 然后打开实力，接着直接将代码粘贴到 cloud code 即可。接着你可以将设计稿利用 cloud code 代理转化为生产级应用。比如你可以让它自动跨多个文件进行修改， 或者由它来处理后端的集成逻辑，包括添加 a p i、 连接前端配置数据库以及身份验证等等。 结合这两款工具，实质上是为你构建的一套利用 ai 打造生产级应用的完整工作流。随后你就能基于网页设计稿开始制作原型，只要输入详细的提示词，明确你的开发需求即可。 这里我直接让它生成一个生产级的 next js 应用 types crisp， 看看这段提示词写得多详细，以及它是如何开始构建这个精美应用的。而这一切都基于我们之前用 stitch 生成的网页设计。就这样， cloud code 的 成功完整构建出了 这个功能完备的应用。这全靠我们之前生成的 stage 设计，我们将设计稿导入 cloud code， 现在这个精美的落地页就已经开发完成了，它甚至还开始构建功能，组建属于该应用的。这是一款交易类应用，可以看到多个组建的代码已经全部编辑完成。 显然，如果继续使用 cloud code， 我 还能完成其余所有功能的开发，并通过后端逻辑、 api、 身份验证等功能来进一步扩展应用。 通过结合 cloud code 和 stitch， 你 就能构建出最高效的个人开发工作流，打造出既经验又实用的应用程序。我强烈建议大家去亲自体验一下，点击下方描述栏的链接即可，特别是现在 stitch 还是完全免费的。 好了，以上就是本期的全部内容，希望大家喜欢今天的视频，定能从中获得一些启发，一定要记得去动手试试，去亲自感受一下，兄弟们，下期见！

找到了一个笨办法，能够把 figma 里头的图经过二次导手，再导回 figma 里头编辑。 嗯，首先是就生成完之后，这边会有一个嗯播放这个按钮，可以变成这这个界面，就是打开你所有的项目吧，然后我们找到刚才的这个项目，就是他这有时间你可以看这个时间，不知道为啥我这界面出不来。 找点击刚才做这个项目，他就是比较还算比较完整的一个界面，然后这个地方他能够有一个导入到嗯，飞克玛 design， 但是好像要登录还是什么 会员吧？我没搞那个，我就直接给他整张截图了，截图之后就扔到 space 里头，然后跟他简单的描述一下我这是什么东西，然后你给我一笔一复刻一下，然后一定要说先弄成中文，全部是中文， 然后我就可以看出他导出这五张图其实也是两模两样了，但是大部分功能还是在的，就是最起码你是可以编辑他嘛。然后我就稍微的又调整了一下，就是像这样子，就是把这个底色换了一下， 就可以看到生成了五张，跟原来生成那个图还算比较像的，然后也就是 这五张，对，就是生成了这五个界面，然后到这一步就可以，就是你可以把这五张图全部打包复制到点这个猫，然后复制到飞格玛里头，就这个地方就是这样子，然后点转换，然后就会等待一段时间，等个一分钟吧，半分钟 五十秒，反正等一会，然后点复制之后就可以导到 fig 里头，直接打开一个界面，然后粘贴进去，就可以完全的编辑去了。

看， google stitch 正在全自动生成 ui 设计稿，这次全方位实测刚升级的 google stitch， 看看它到底有多逆天。首先你看这界面，升级后的更加简约，高级且丝滑，我直接告诉 stitch 一 段需求， 随后选择了 google 最新出的 gemine 三点一 pro 模型，直接发送出去。可以看到左侧的 ai 助手正在分析并准备生成。分析完成并批量生成中，没一会儿就生成出来了，这速度和质量已经刷新了我的认知，而且界面精美就算了， 他还细心的在旁边给你同步备好了设计规范，同时可以看到这里就是当前的规范模板，点击新增规范，你可以把自己的规范当成一项技能背给他，再点击保存，就可以看到你的规范已存在了规范模板里，以后做设计可以随意选择规范模板，他直接按你的规矩来，太懂事了！ 这次更新最逆天的来了，直接三联机设计稿， ai 就 把设计稿变成可编辑的原文件，可以随意改变里面的文字和版块，想怎么改就怎么改，如果懒得动手也没关系，点击 ai 修改，对着特定板块直接下指令， ai 就 能自动帮你修改。 ok， 很 快就修改完成了。另外左下角还能看到有多现成在同时进行， 这就意味着我再提一个需求，然后可以同时生成，效率拉满。接下来重点来了，框选几个页面选择生成交互预览，在旁边就会有一个手机模型出来，并正在生成预览，点击进去后就可以看到预览效果。我大概操作一下，整体还是非常丝滑，很 nice， 并且点击 ad existing screen， 还能随时加新页面。如果你卡壳了，不知道下个页面做啥，点一下 imagine the new screen， ai 直接化身产品经理，给你提下一张页面的建议，太贴心了！最后如何交付可以看到这里，选择一键分享，就能把你的设计稿分享出去，让别人浏览。 在预览下分享后的链接，预览效果很完美，给到需求方看妥妥的。也能复制到 pdf 中进行编辑，同时 复制代码或一键打包下载，可以直接给到开发，从设计到交付，一步到位。综合来看，不管你是小设计师还是开发者， stitch 都极其友好。下一期我将直接用 stitch 从零到一，辅助我设计并落地一个真实案例。我是大木，我们下期见。

谷歌刚刚放出一个核弹级的 web design 产品 google stitch。 消息一出来，市场最直接的反应就是斐格曼股价一度大跌百分之八。为什么反应这么大？ 因为这次他做的不是普通的 ai 出图工具，而是直接把设计流程最贵、最慢、最需要反复沟通的那一段往 ai 手里推了。他现在有了真正的无线画布，你可以把参考图、文字、说明、代码片段、产品想法全部扔进去， 让 ai 在 同一个工作台里理解上下文，然后直接生成高保真界面。这就意味着， ai 不 再只是帮你挂一个页面，而是在参与从模糊需求到成型设计的整个过程。真正厉害的地方，不是他能不能替代设计师，而是他开始重写设计团队的写作方式。 过去是人先想先画再改，未来越来越像是人负责定义目标、约束和审美， ai 负责高速生成低板世界。所以 stage 冲击的不只是飞格玛， 而是整个产品设计行业的工作流。我是硅谷赵博，关注我第一时间看懂硅谷最新动态。

谷歌出的 ai 设计工具 stitch 迎来了一个巨大的更新，消除了设计稿与生产代码之间的断层，它不仅仅是生成代码，而是编织代码。拿我们做独立站来说，就是 你不用设计师出稿，你也不用懂设计，只要甩给他一个网址， ai 就 能瞬间秒扣全套视觉风格配色字体，一步到位。这跟我上节视频讲的如何去复刻同行的？嗯，同行的网站是一样的道理，就是可以帮你轻松地复刻同行的一个网页。嗯，因为我习惯了用 gmail 了，所以如果你们想试一下这个 stitch， 也可以试一试啊。 其实他们俩异曲同工，因为他也是支持最新的就奈三模型的。他怎么讲呢，他不是简单的绘图，他是带脑子的设计。 嗯，像手机、 pad 网页适配呢，他一键可以全部搞定，你甚至可以直接跟他对话，像用语音助手一样指挥他设计想要什么功能，动动嘴就行，交互性特别强。设计完了呢，可以直接导出代码，还有其他格式的，你想导出也行。像数据库呢，登录逻辑， ai 统统帮你写好了， 真正的是他，目前竟然是免费的。所以说，程序员或者是个人创业者，想做独立站的，赶紧去试一试。还是那句话， ai 工具， 嗯，有很多，你可以选一个适合你自己的，像我就是这么耐的重度使用者，我就喜欢用这么耐。嗯，这个工具我是不会想去用的啊，我只给大家介绍一下。所以说呢，工具好不好用呢，在于我们怎么去用它。如果想第一时间解锁全球顶尖 ai 网页工具的，点个赞，关注我。

朋友们大家好，我们上一期讲了用 sti 做 u i 原型，那这期我们来讲如何将这些原型图转换成我们真实项目的产品。首先我们要把我们的 sti 原型图 导入到黑格玛里边，因为我们的开发工具像雀咬，现在用的比较多的就是雀，他现在有 mcp 黑格玛的 mvp， 那有了飞格玛 mvp 之后，我们在开发页面的时候，他就可以通过 mvp 去调用飞格玛的原型甚至是图标。那比如说我现在要开发这个页面，以这个页面举例，直接右键或者是点导出， 打出到 figma 转换，这个时候我们到 figma 页面来，我们先添加一个页面，这边好了点复制到这边， ctrl c ctrl v 直接粘贴就可以了。我们的圆形图，那在这边我们是可以去调整你不需要的，或者是需要修改的地方，点击从市场添加搜索 figma bigger big 码，我现在用的是这一个，你也可以现在用这一个，它这边需要你输入 bigger 码的 access token， 先返回 access token， 在 我的个人中心里边 setting secure， 我 这边已经生成好了。 如果你没有点击 generate new access token， 这边说一个 token 名字，比如说过期时间可以选九十天， scop 就是 他的权限，这个全点上吧，生成 test 的 好看，点击复制。然后再回到我们的开发工具里面，把你需要的填进去，打开，稍等一下，他会检测你这个 mvp 是 否可用，稍等， ok， 这就说明你的飞格玛的 mvp 配置好了。配置好了之后，我们就可以在这边 build with mcp， 这边你就可以让他去调用你的 mvp 帮你去开发了，今天我们的课程就到这里，再见。

家人们，设计圈又迎来逆天神器！谷歌 stitch 在 放大招，直接把飞格玛按在地上锤两天，股价暴跌百分之十三，今年跌超百分之三十五。现在做设计居然不用碰键盘，张张嘴， u i 前端原型图全给你整出来！ 谷歌这波更新真的做到设计师心坎上了！以前做设计，打开飞格玛，从空白画布开始，拖拽组建条间距、改配色，熬几个通宵才出一版初稿。现在谷歌 stitch 的 web design 直接讲话，所有操作，你只用发语音跟他说，他就能秒出图， 哪里有问题边点边说，实时改，连交互原型都一键生成，点一下播放静态页面，直接便可操作的 app 界面，这效率谁顶得住啊！ cich 的 很活还不止语音设计， ai 原生画布能同时装下图片代码需求文档， 多屏并行处理，升级后的智能体，懂你所有设计上下文跨端操作，无缝衔接设计系统，一键同步改一处，全项目更新，再也不用怕交接丢信息，甚至还能直接导出代码， 设计完直接对接开发，中间环节全砍掉，那些机械重复的拖拽、吊餐、切图工作，以前要花三天才能出的原型，现在三分钟就能搞定。把所有繁琐活都交给 ai， 你 只需把精力都放在创意、构思、审美、打磨这些核心工作上，这体验简直不要太舒服！