stitch怎么设计好看ui

无需付费， google stitch 是 你体验 jammy 三绘制 ui 成本最低的方式，优秀的审美，无缝输出代码，还能做眼动热力图。接下来我用四个案例带你了解 stitch 真实体验。 第一个，给他一个简单需求提示词，如图，做一款 to do list 应用，并大致描述了一下功能需求，主要是要他大胆放开去设计， 想看看他能给出怎样的结果。稍等一下，结果出来了，设计风格很放飞，两个版本右边有点像贴纸的感觉，左侧可用性更高。但是两个方案风格确实很大胆，视觉效果也不错。 第二个，做公司官网，我尝试让他做了一个机器人公司官网，提示词非常简单，也没给他具体要求，效果也非常不错。他能根据页面深层匹配的机器人图片，整个页面审美很好，风格一致性也做的很好。 第三个，我随手截图了一张知乎首页，并在网上找了一张跟知乎定位类似的平台 ui， 让他照参考图优化一版。他按照参考图的风格去掉了知乎首页的卡片风格，整体设计更加清亮简洁，完全是贴合的参考图效果。整体我感觉挺不错的， 选中这个页面，还能导出到 as studio 进行开发，甚至能给你生成一个预测的演动热力图。第四个，我让他优化一下小红书的设计，看一下整体设计格调其实是有提升的，但是部分小的细节统一性做的还不够好。 总结一下，史蒂奇目前视觉能力已经是优秀设计师的水平，开发小型项目效率高，但是对于复杂需求，我们可以期待一下 jimmy 四，都说二零二六年是程序员手写代码的最后一年，让我们拭目以待吧。

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

如果你现在脑子里有一个绝妙的 app 点子，但你既不会画圆形图，也不懂 ui 设计，更不会写代码，怎么办？今天给大家介绍一个隐藏在 google labs 里的王炸工具， google stitch。 打开浏览器，输入地址，就可以看到 stitch 的 页面，它是一个全能的前端与 stitch 的 页面。它是一个全能的前端与 ui 设计师，能直接把你脑子里的一句话在极短的时间内变成精美的生活痛点来实操。 很多新手爸妈都会用手写本来记录宝宝的日常喂养，非常繁琐，我们现在就用 stitch 来做一个家庭版的宝宝照顾 app。 我 们需要它有喂养记录、换尿布的记录、睡眠时间，还得有疫苗本和身高体重的可示画图表。 我们把这项需求输入进去，为了让界面看起来有高级感，我特意在提示词里加上了 google i o 风格和磨砂玻璃特效。大家看不一会，他就渲染出了一个完整的 app 界面，各项指标的卡片排列的清清楚楚，视觉效果非常赞。 不仅如此，就像我们在 canvas 模式里一样，如果对哪里不满意，还可以直接选中它，用自然语言让它改就行了。比如把喂养记录的卡片改成温暖的橘色， 立刻就生效。满意之后，你可以一键把这个设计导出到 figma 里，无缝衔接专业的设计工作流。 看到这里，大家可能会觉得不可思议，但是这里我必须给大家讲清楚它的能力边界。 stitch 深层的只是前端的 u i u x 视觉设计，也就是我们常说的 mockup 高保帧的原型图，它实际并不能通过代码来实现各个按钮之间的真实跳转和后台的数据交互， 也就是说，它只是个壳，它不是帮你写好了一个直接能上架的 app， 而是帮你把想法具象化，变成了一个可以交付的设计稿。老规矩，送给大家一套 stitch 的 ui 架构师填空公式， 第一，你的应用类型是什么？要在什么设备上使用？第二，核心功能模块有哪些？ 第三，视觉风格配色是怎么样的？第四，想针对什么样的目标受众和提供什么样的氛围感。只要你的提示词里把这四个问题描述清楚了，出来的产品就应该八九不离十。 最后我想澄清一下， stitch 其实不是今天才发布的，而是存在了蛮久的一个 lab 功能。但最近如果你听到 figma 这类的软件因为 stitch 的 发布而估值大跌等等，实际上属于市场的误杀。因为目前为止， stitch 抢的都还不是 figma 的 市场， 而且官方说得很清楚，在 stitch 里做好了的设计，可以一键导出到 figma 的。 如果非要说 stitch 甚至是立好 figma 的， 但是问题就在于，大家对于 ai 太焦虑，又爱又怕，任何一个传统行业，只要被 ai 沾上一点，就感觉马上就要被替代了。所以你的行业有没有被 ai 误杀呢？评论区里聊一聊，关注我，一起在 ai 时代共同成长！

今天给大家做一期谷歌 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 原声工具，有任何问题直接在评论区跟我留言。好的，我们今天的视频就这样，希望大家喜欢，我们下期再见。

让网站设计界巨头飞格玛物价下跌十亿美金的 stai 更新了，我们只需要发送一张参考图片或者直接输入文字，网站就会为我们生成一个可以交互的网页原型。再说说修改，同样支持精准修改，比如我们可以增加一个返回按钮， 或者把文字和图片都换成最近比较火的洛克王国喵喵玩偶。最后值得一提的是，网页每次为我们生成网页原型之前，都会先给我们一个信息卡，卡片包含了字体、字号、圆角，还有网页使用的颜色， 这些都可以在此处进行全局修改。点击预览按钮，我们也可以切换在手机端和电脑端不同的显示情况。 而就是这么一款强大的 ai 应用，目前也还是在测试阶段，尽管他现在还有一些美中不足，但我相信未来他一定不会让你失望的。关注我，为你带来真正实用的 ai 资讯。

谷歌真的不讲武德，重磅开园，点赞点 m d， 从此做设计可能真的不需要审美。简单来说，他把 apple、 airbnb、 tesla、 cloud 这些顶级大厂的设计灵魂全部押进了一套极简的 macdunk 文件里。 你只需要把文件丢给 ai， 它就能按规范帮你把整套页面做出来。不是模仿哇，而是像素级的复刻。 top 的 极简留白， l b n b 的 温暖色调，特斯拉的硬核科技感可露的刻字优雅。从配色系统、字体规则到按钮样式、卡片间距、交互逻辑通通，一个不差。 想想你之前浪费了多少时间调色、改间距、对齐像素，现在一个文件全部解决哇！项目刚上线 github， 就 斩获了三十天的 star， 所有的筹网站终于有救了！不懂设计也可以做出媲美大厂的产品，赶紧去试试吧！关注我，每天一个 ai 小 技巧！

看， 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 从零到一，辅助我设计并落地一个真实案例。我是大木，我们下期见。

这下学美术设计的看到这个工具，直接是享福去了！谷歌新出的 ai 设计软件，这次直接把 ui 设计卷到了姥姥家，你就随手在纸上瞎画两笔草稿，哪怕线条歪歪扭扭，他直接给你出专业级的高保真设计稿。即使你只是个啥都不懂的小白， 随便输入一段话，整套网站的视觉设计、交互布局，他直接给你安排的明明白白，完全就是专业级别的。最离谱的是那种抽象到离谱的草图，普通设计师看了都一脸懵。结果在 ai 的 作用下，哪怕你画的潦草到你自己都忘了，当初要啥的鬼画符，他都能完美 get 到你的意图，还能直接给 你补全。一整套完整的设计，直接就是把设计师往死里卷。以前我们总说艺术和创意是 ai 无法突破的壁垒， 设计师们现在直接梦回工业革命，这不就是设计界的珍妮基吗？当年纺织女工要砸珍妮基，现在是不是轮到设计师要砸 ai 了？都说了美术生开团要秒跟，再这样发展下去，全人类都要享福了。

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

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

一张圆形图扔给 speech， 直接生成原文件，而且都还是可以编辑的，这些小图标啥的你自己改吧，可以改成这样，那这个过程也是非常简单，你画一个小吉祥物，直接扔给 g p t 小 四 o 嘎，一下子三句话出来了。然后你把它放在一张小班的图上面，直接把班的图再放在界面当中，你看看这小界面，嘎嘎，好使，那 相同的道理，图标也是一样的，做一排小图标，直接整成小磁片区，小卡片放在界面当中。妈呀，老帅了，这就是咱们全新的 ai 辅助 ui 设计流程，你看看咱们同学这些小界面啥做的，那相当给力了。 从这个 ai 生成 ui 界面，再到界面中的各种亮点，全都是 ai 辅助咱同学做的，对于 ai 加 ui 感兴趣同学直接点击预约一瓶矿泉水的价格，嘎嘎，好使，你就看就完了。

这一整套 ui 都是我一句话生成的，如果你还在学画原型图学习设计 ui， 建议都别学了。谷歌这个 ui 神器，可以让有点审美但不懂代码的小白轻松完成 ui 设计。我们来到 stitch， 在 这里写你想开发的工具，它就会自动地跑出主界面、内容页和各种设置像的完整画面，视觉审美比大部分的 ui 都要强。 但真正让我喜欢的是它和 ai studio 之间的疯狂联动。你可以直接点击这里的导出，就能把所有的静态图瞬间转为能运行的 app 的 原型。这对于想要快速验证产品思路或者做产品演示的朋友真的太香了。

哈喽，大家好，我是桃子，一个正在转行的文科生，今天一大早醒来呢， google stage 发布了一个重大的更新，大家都说迎来了 web 的 dying 的 时代，那么今天我们就来测试一下它究竟有没有那么好用。先来一句话总结一下这个工具，就是你可以通过几句话的描述去生成 a 端和应用端的 ui 设计。我自己用起来比较惊艳的第一点就是它的那个即时原型，其实说白了就是它可以一键把一个静态的图片变成动态的网页。第二个点我觉得比较好的是它支持了很多多模态的，比如说你可以上传一个截图，或者说一个手绘的草稿，还可以语音输入， 我想把这个页面的背景颜色换一下，我想换成紫色，明白马上处理，正在进行更改。 第三个点呢，就是它可以导出的 figma 和 google a s studio， 也可以看一下网上的这样一个对比图，看起来 face 的 效果还是不错的，大家可以用完之后分享一下自己的感悟，或者有一些自己用的比较好的 ui 的 设计的工具也可以分享在评论区。那么我们这期就到这里，下期再见！拜拜！

hi， 今日体验 google stitch ui 设计师的神器！打开 stitch， 先体验一下原型图加提示词， 选择 thinking with 三点一 pro 也可以选择设计系统，点击生成 先生成一个简单的设计系统页面生成了，生成的是英文版的，整体感觉还好，接下来我们尝试直接在关键词写上中文提示。 生成的中文版的网页在设计美观度上没有很好，更像一个高保真的圆形图。再次打开之前生成的英文版本的，让它在此基础上生成中文版， 预览一下还是不够精致，像一个高保真圆形图，现在只保留提示词生成网页，这样设计感美观度上就好很多了。 如果布局颜色之类的想更换下拉，选择变体，勾选你想优化的方面生成变体 生成的图片可以在线编辑啦。点击右侧编辑功能，可以修改文案，替换修改图片，也可以导出选择 figma， 直接复制到 figma 中编辑。也尝试了一下 app 设计活动网页的设计不讲实际，落地的话就设计感美观度是很不错的，使 ui 设计一个非常强大的助手。

这两天刚刚更新的这个 stitch 啊，功能性提升的非常大，我感觉有两个特别夯的一个功能啊，给大家去介绍一下，基本上我只用了十分钟或者是二十分钟左右的时间， p r d 也有了， 界面也有了，设计系统也有了，产出的质量我觉得是非常符合我的心意的。从这个排版到里边的内容构建，我觉得都没有什么太大的问题， 所以他是很对得起这个 web design 的 这个称号的。氛围设计这是刚刚产出的一个新名词，就是他产出的非常快，能够给你非常多的设计方向的一些灵感。 然后跟之前相比来说，他推出了一个比较新的功能，这个功能就是你给他输入问题的时候，他基本上是先帮你产出对话的这种内容，去帮解决一些问题，而不是直接产出界面。就比如说我给他发了一个这个需求， 然后我发送过去了，需求了之后，他先给我回复的是给我设计了几种类型，看我喜欢哪种类型的页面，让我进行一个选择，然后我看他的描述了之后，我选择的是第二种创意粗野风， 然后他就根据我的选择去帮我写出了一份比较完整的 p r d。 这个内容也是我们可以在这边去滚动去观看的，包括他的色调、 标题什么乱七八糟的，全给你写的非常完整。然后这个时候你是跟他继续交流改 p r d 也可以，然后也可以让他立即生成 p r d， 里边所需要的界面都是可以的，点击继续生成了之后，他的这个界面啪啪啪啪就给你全显示出来了， 对吧？如果说你想要这个外部端口的这个界面，在这里边直接点这个功能就可以了，产出来的效果就是这样， 然后它在产出这个 web 的 页面的时候，它会自动把设计系统给你附加上，而这个设计系统也是非常值得说的一点就是它创建好设计系统之后，在这个板块的右侧的工具栏里边可以看到已经生成的这个设计系统，然后我们可以点进去看一下它的内容，基本上它把我们的主色调、辅色 字体、圆角都给你铺这了，你可以自定义的调整圆角的内容，字体的内容都可以去灵活编辑的，包括它的暗色系跟亮色系你都可以去保存去调整，然后你调整好了之后，每个页面都可以根据这个设计系统 一键去切换它的字体颜色色调，而这些都是比较基础的。比较重要的是什么？比较重要的是它推出了一个三 m d 的 文件，而这个文件主要的作用就是它是为了让 ai 去阅读的，就以前的难点是什么呀？就是我们这些设计系统基本上都是给人看的，自己看的，我们自己去做 figma 里边的设计去使用的，但是让 ai 去看的话就很费劲，没有 markdown 的 这种格式理解的更加透彻。对于 ai 来说，所以这个文档就是加深 ai 对 你设计系统的了解，让它去外部 coding 也好，去智能体的调用也好，它都会更加遵循我们这套设计系统， 也就相当于给 ai 进行了一个翻译，让它更加了解我们的这个设计系统，为了设计的一致性去做准备，然 想创建一份儿这个呃， design md 的 文件，我们可以自己去手写，也可以让它直接自动生成，我们这份儿自己根据我们的 p、 r、 d 去生成 的。如果说我们有自己的品牌，想要去写一份 md 的 文件的话，方便我们在其他的 web coding 工具里边儿去使用，我们也可以看它官方的这个格式是怎么写的，它这里边儿有一个概述颜色排版， 这个阴影的深度组建组成部分，这些内容都是有案例的，我们可以参考他写的这个案例，自己去进行编辑学习都可以的。还有一个我觉得非常方便的功能，就是他的有一个即时原形的功能，操作起来非常简单，我们需要框选中我们 想要点击交互的页面，我们再点这个即时原形的功能，它就会自动生成一个交互的流程。这里边儿所有的交互都是 ai 自动生成的，像这些返回的按钮，这个 type er 的 切换播放的这个按钮。然后当然我们也可以自己去编辑 点编辑模式了，之后我们点击模块儿了之后，就可以手动地让它去跳转对应的页面，这都是可以操作的。 但就单说这个 ai 生成的这一步，已经帮我们节省了非常大的时间了。以前我们想要做这种跳转的界面，我们需要自己手动的去排布，去编辑，现在 ai 已经可以自动帮我们做这种演示的交互动画了， 给我们节省了很多时间了。还有一点就是它在这里边的编辑能力比之前也要好很多，你看啊，这是我给他上传的一张图片，然后这是原本的页面， 想把这张图片放到这个框里边。他目前想要编辑的话，是可以支持我艾特这张图片，然后再告诉他放到这个板块里边的对应的位置，他能够直接放到成功之前是不太能这样操作的， 所以它现在的整个编辑能力也越来越智能，编辑界面的细节也越来越精细，是吧？包括它还有蒙版的功能，我们可以直接框选出页面的对应内容，这部分就可以直接引用到对跨框里面，我们可以直接说换一张图，或者是调亮色调什么的，还有对应的直接编辑的功能。 点这个小画笔之后选中页面，我们可以直接在他的界面上去进行修改，这里边主要修改的还是文字类的消息，我们可以直接修改文字的内容，改起来就会快很多。然后还有近期新上的一个功能，就是这个语音的功能，你可以直接用口语化的方法去跟他沟通。 hey， what are we designing today？ 你 看他可以直接跟我们对话，但是他只会说英文，咱们说中文，他好像是不太理解了。 i'm all ears let's dive into some creative design ideas。 咱们说中文的话，他也还是依旧会用英语回复我们，不会用中文回复我们。 i'm ready to jump into some design what are we envisioning？ 那我们现在就可以说，我想要一个电影播放的界面。 let's create a sleek cinematic movie playback screen imagine a dark palette with bold elements for an immersive experience on it generating that for you now。 它就会根据我们的 诉说的这个内容直接开始去生产界面，整体来说使用起来要比以前更顺畅。它依旧是可以查看代码，复制到飞格码，然后， 然后导出的话也可以直接导出到这个 as studio 里边，直接构建应用都是可以操作的。它更新的这些新功能非常建议大家去体验体验，尤其是这个设计系统里边的应用，很大程度上减少了我们对设计系统的维护，真的是减少了很多，我们直接编辑这个 md 文档就可以了。

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

嗨，家人们，设计行业又迎来重大更新啊啊， gucci 是 号称啊外不抵弹啊，对着话不说话，你就能够直接做设计。更新的当天， figma 国家打跌了百分之八点八，有五大亮点，我们一个一个介绍一下。 第一个是无线画布，以前做设计需要输入一句话，然后等待出图，现在他有了一个真正的工作台，你可以把参考图，然后把文案或者代码片段直接扔进去，然后 ai 结合你的上下文帮你进行设计，更像是在跟一个智能的设计师在写作。 那第二个亮点是更智能的啊， a 镜头能力，他现在能够记住你的项目的修改历史，然后不是从零开始去理解你的每一次的需求，还能帮你去推荐多个方案。比如你想尝试三种不同风格的首页，他会并行帮你去设计，会互不干扰。 然后第三个亮点是云交互啊，这个图片我想改一下圆角啊，然后或者整个背景我想改成白色。那以前我需要打字输入， 现在你不需要去打字了，只需要点击这个按钮，你对着它说就行了，不用停下来打字，然后边看边改，效率会高很多。而且这不是单方面的语音的输入，而是 你跟 ai 进行对话，它里面也会有一个 ai 的 声音问你，你要怎么改怎么调啊，所以这个也是它比较大的一个亮点， 你可以通过这种语音的方式，你可以随时去调整，然后告诉他你要怎么设计啊，有未来的所有的产品，我和 ai 的 时候都会加入语音交互这种方式，因为它太方便了，我只需要跟他对话，等一下就能够直接帮我工作。然后第四个亮点是及时原形， 以前出的都是静态图，那现在你只需要点击一下播放按钮，设计稿就能直接变成可以点击交互的原型，那系统自动帮你算好点这个按钮跳到哪个页面， 你也不需要手动的一根一根的去连线了，然后他自己会，哎呀，会自己帮你去创建连续的可交互的 正确的一个原型。这原型它就已经帮我制作好了啊，我现在就可以直接点击进行交互切换啊，各种界面啊。这个原型设计的还是有问题的，因为我没有加任何的 设计系统设计规范。那第五个亮点是新增了 design markdown 啊，就是把你的设计规范，你的配色，你的字体， 你的投影的风格写成一个 markdown 的 文档，不管是给 stitch 用，还是给 cloud code 或者 cursor 啊，这些 ai 的 编程工具用，它都能够读懂，所以这个 markdown 文档它是通用的 啊，这样的话，设计规范的设计系统，它不只是局限在一个工具内啊，所有的 ai 的 编程的工具它都能用啊。那具体怎么增加呢？我可以在这里 啊，点击这是你的设计系统，我可以在这里点击从创建新的设计系统，然后点击这个设计马克当，然后你把这个马克当的文档直接复制在这个输入框内啊，然后啊，点击应用，然后你所有的设计稿就会应用这个设计规范，请你应用之后，你可以选择自己的设计规范 啊。那这次呢， google 其实更新了一个词，叫 web 底下，那跟之前火过的 web 扣定是一个思路啊， web 扣定是不用写代码描述想法就能出程序， 那 web 几单呢？是不用学设计工具，你只需要说想法，只需要通过语音的方式说，然后你就能够开始做自己的设计。那以后呢？万物应该呃皆可 web 那 最后官方的介绍和网站的地址我已经放在评论区了，那大家自己可以领取，大家自己也可以去体验一下。