Stitch设计功能

使用 google stitch 一 键生成 ui 界面。我们进入到 google stitch， 在 对话框中输入具体需求。这里我们想要得到一个富有科技感的 web 官网首页下面的模型默认是 gemini， 三点零 flash 确认后点击生成。 稍等片刻，一个官网首页就生成了。我们可以在左侧的对话框中继续输入需求，对这个网页进行优化。页面上方还有其他选项，包括对该页面生成预测性热图、添加注视、 生成设计系统、生成二维码、复制代码等操作。 点击新开页面，可以更加直观地观察该页面的效果，并进行多端自适应切换查看。在右上角的导出中，可以直接下载 html 文件或是转成 figma 可用的文件 复制粘贴到 figma， 即可对该页面进行更细致的修改。还可以直接发送到 ai studio， 让 ai 帮助我们完成后续更复杂的代码工作。 google stitch 生成的页面颜值更高，还可以使用 gemini 模型。最关键的是完全免费且很少出现报错的情况。所以当我们需要灵感的时候，不妨试试 google stitch， 让 ai 辅助我们精简工作流。

这两天刚刚更新的这个 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 文档就可以了。

google 刚刚发布了一个设计工具，可能会让整个设计行业地震。它叫 stitch， 是 一个 ai 原生的 ui 设计工具。什么意思呢？你只需要用嘴说一句话，比如给我做一个咖啡店的点单页面， 它就能直接生成一个高保真的界面设计，不是那种粗糙的线框图，是直接可以用的带交互的成品。而且不只是一个页面。你说从商品浏览到下单到确认，它一次性给你生成五个页面， 自动串成完整的用户流程，点一下播放，就能像真的 app 一 样点击操作。这还没完，还有一个无线画布，你可以把文字、 截图、代码，甚至竞品的网址往里扔， ai 会自动理解你的意图，帮你生成设计。你还可以用语音跟它对话修，把结账按钮放大一点，换个暖色调，它就急急改。旁边还有一个 ai 设计顾问，会时时给你的设计提意见。 比如这个配色对比度不够，这个按钮位置不太符合用户习惯。最狠的一招，它能读起任何网站的设计规范，你给他一个网址，他自动提起配色字体监制规则，保存成一个叫 d i s e n e m d 的 文件，以后所有生成的设计都自动遵守这套规范。做完的设计可以直接导出代码， 机器主流的前端框架，这个工具完全免费，现在就能用。消息一出，飞格玛的股价当天就跌了百分之四点。很多设计师可能还没意识到，这不是一个辅助工具的升级。这是在说，以前需要设计师花三天做的事，现在三分钟就能出出稿，设计的门槛正在被 ai 彻底拉平。

用一句提示词就能生成网站，这句话我相信你可能已经听过无数次了，甚至你还专门研究过各种提示词技巧和配色方案，但最后做出来的效果往往并没有你想象的那么完美。 就在一小时前，谷歌重磅发布了 stitch 工具的最新 beta 版本，这是一个为网站以及 app 打造专业 ui 界面的设计工具，已经迭代了很多次。而这次的版本更新可以说是质的飞跃。我也进行了实际测试， 提示词就用了一句话，设计一个现代风格的商品介绍网站。结果他不仅帮我做出来了，还直接给了多个设计方案供选择。更夸张的是，他把整套配色方案都放在左上角，你可以一键切换不同风格。 整个设计效果已经完全不像是 ai 生成，而是接近专业设计师的水准，无论是页面整体风格，还是按钮级别的交互细节，都能任意调整，完全不需要手动编辑代码。说实话，这个进步有点离谱， 因为就在去年，我还出了视频介绍过它的上一个版本，当时的效果多少还有点笨拙和不自然，但现在它已经可以直接用于商业项目了，至少对于大部分普通用户来说，我相信已经完全够用。如果你对 ai 创作和网站设计感兴趣，强烈建议你亲自体验一下，把想法输入进去，你真的会被它的效果惊艳到。

就在昨天晚上，谷歌更新了他们的设计 agent stitch， 那 接下来我们一起来看一下他们官方是怎么介绍这次更新的。 okay， i want to design a new landing page for a brand something in matcha， green peach or lilac i've generated three visual directions for you let's go with organic handcrafted hey， can we swap the photo with this image here nice， let's apply the design system to the whole site？ what do you think of this screen？ i think we can try out some other color and layout options let's do it。 这次 google 对 stage 的 更新，可以看作是把 ai 深度集成到了设计的每一个环节， 不再是一个辅助工具的存在，更像是一个能听懂人话，能够看懂画布，甚至是能够帮你跑腿的虚拟设计师。 这次更新的变化主要在以下五个方面，一、可以是你的脑爆神器，使得用户界面进行了全新的重新设计，采用基于节点的无限放大的原声画布。 以前做设计可能要在不同的软件窗口跳来跳去，现在 stitch 给了你一个无限大的画布，你什么东西都可以往里面扔，图片、代码、产品需求、文档全部都能塞进去，而且可以多线作战。新的带管理器能帮你尝试好几种设计思路，而且完全不会乱套。 第二一点是会是你更有眼力见的一个 ai 助手。现在的 stitch 不 再是一个会改颜色的机器人， 他能够去看懂你整个项目的上下文，完全听得懂你的指令。你可以指着这堂图说，把头像给我换成刚刚传的这一张， 或者说根据这几张截图写个产品介绍，他能能够秒懂在画布上直接操作。第三一点就是你可以动动嘴就能够做设计的语音交互预览，这大概是这次更新最酷的一个地方， 他能够实时反馈， 而且能够像导师一样去点评你的作品，你甚至可以问他，那我这块设计的怎么样，他会给你提修改意见。 第四一个就是脑补式的圆形图，他可以进行及时的圆形设计，以前作为圆形要手动连连看，那设计师要理解页面交互的下一页要展示什么。现在你可以通过需求让 ai 来帮你理解需求，并且实现原型。 点击下页播放， ai 帮你自动排版好页面，跳转顺序，哪怕你没有下一个画面，你只需要点击一下按钮，那 ai 都能根据你点击的位置自己想象并生成一个逻辑上的下一个屏幕。 第五一个就是设计的大衣桶，这个更新解决了设计师最头疼的一个设计规范不统一的问题。在过去每一个项目都会自带一套完全不一样的设计规范，现在呢，你可以一键搬家。 通过一个叫 d 三 md 的 文件，你可以轻松的把所有的设计规范导出，或者从代码或者是其他网页直接吸取设计风格，不再考虑大量统一或者不统一重复去做组件库的这样一个麻烦的事情。 最后总结一下，这次的 stitch 的 更新就像是一个全站型的高级设计师，他不再是一个设计工具的存在，你给他一点想法，文字代码或者是图片，他都能帮你拓展成完整的设计稿。你动动嘴，他帮你改图片，你动动鼠标， 他帮你把静态的图能够变成可以点击预览的 app， 那 我自己也去试了一下，让他帮我去识别一个网站的设计风格，给我总结一套设计规范，我又让他按照这套的设计规范去给我生成一个新的类似的产品网站。 那无论是在审美还是设计风格到设计规范，都完全拥有一个非常高级的设计师水平， 而且还可以进行原生的页面交互的跳转。如果说你没有下一页的内容，他可以自己理解，帮你生成下一页的内容， 那这次 stitch 的 更新并不是为了对标哪个设计工具或者软件，而是把设计工作推向了一种新的形态。那设计不再是为了去理解需求，去产出设计稿，而是成为了一个更为严苛的设计总监的存在，你需要从审美 或者是更高维度的需求去理解这些东西，让他帮你去实现。那这次的更新，在我从一个用户体验设计师的角度去看这个事情， o 的 设计师是真的要失业了，那感兴趣的小伙伴可以去试一试，感受一下他的强大之处。

哇，这谷歌出手，这设计圈变天了。 stitch 更新第一天 figa 暴跌百分之八，第二天又跌百分之四，这个用自然语言生成完整 ui 的 东西，不仅支持 tts 语音交互，还能够免费，这你受得了吗？这就是现在软件股他们的宿命，因为这些大模型一旦下场来卷，他们 无论是做个网页页面只集成核心功能，还是干脆生成一个软件调用大模型去服务你的功能，你都完蛋了。 bro figa 去年七月上市的时候，首日涨了百分之二百五， 也挺二百五的，因为他做的这个事情本身只要被一个这个 ai 软件集成进去啊，马上就会有人放弃掉他本身 app 这个入口。而这件事现在已经非常犀利的在发生，他的五百六十亿的这个市值，可能长时间就会是他的巅峰了， 因为现在只剩一百二十多个亿，跌掉了八成了。当年 adobe 想花两百亿把它买了，你说说你为啥不让他买飞格？那什么反垄断啥的，俩哥们都完蛋了，你还不如让 adobe 当年给他买了呢，反正买了就套现成功了。目前的软件飞格马真的冰山一角啊。 apollo 的 一个言报说 ai 对 软件行业的颠覆 是 total disaster 啊，就是完全灾难级别的，是他职业生涯见过最快的，今年 sas 板块已经蒸发万亿美金。逻辑就是 ai 着的，他能干十个人的活，那怎么样？企业就不需要买十份 ai 软件的席位了？也就是说以前你是按份收费，但现在人家掏钱买这些东西的都是按量付钱， 那不就猫发根了吗？对不对？以前的话 web coding 程序员慌了，现在谷歌这个 stage 出来成了 web design 设计师慌了。那我说真的，你下个月到时候来一个 web marketing 营销部慌了，甚至年底时候再给你来一个 web accounting。 会计师慌啊，会计师不能慌得有人坐牢，但是呢，你就一步步地去讲，它就是快速地在替代，对吗？你必须得把每个最重要的步骤都被 ai 的 故事重写，所以活下来的必须是把 ai 呛到骨头里头的公司呀。不喽。

一句话，生成高保证 ui 与前端代码。 google stitch 讲解，它是 google labs 推出的 ai 界面设计工具，搭载 jimmy 二点五大模型， 支持自然语言描述和手绘草图双输入，一键生成高保证 ui 页面和可直接使用的前端代码，打通产品构思、设计开发全流程，大幅提升写作效率，真正实现所想即所得。 六大核心功能特点，第一，多模态生成一句话或一张草图即可。第二，设计生态打通，支持直接导出 figma 二次编辑。第三，前端代码支出 html css react 复制即用。 第四，全平台适配，响应式布局。第五，团队合作，云端储存，多人编辑。第六， flash 和 pro 双模式可选， 适用人群广泛，产品经理可快速做原型， u i 设计师能将草图转高保真，前端开发者直接拿代码，初创团队低成本搭建 m v p， 新手或学生零基础也能入门 使用。流程很简单，第一步，账号登录，选择 flash 极速模式或 pro 精细化模式。第二步，输入提示词，用自然语言描述需求或上传草图。第三步，生成与微调 ai， 提供多套方案供你选择，并支持自然语言微调细节。第四步，导出可一键同步字 figma 或导出前端代码。 核心总结， google stitch 是 一款靠文字或草图就能快速生成专业 ui 和前端代码的 ai 工具，极大地简化了设计开发流程。点赞收藏关注，获取更多 ai 神器教程！

今天凌晨， google switch 迎来了十四级更新，分满，股票直接暴跌。 stitch 主要做了这五大功能更新，给大家展示一些我的实际使用效果。 首先给了我的提示词，网站页面，我让他帮我优化一下，他给了我两版方案，还可以直接选择所有页面，一键生成可交互即式原型。 你还可以输入设计规范，根据我的设计规范给我出原型。我输入了一个 app 产品需求， 这是它生成的效果很不错。整个界面是个无线画布，你可以直接将你的参考图复制到画布上，创作连贯性很丝滑，甚至还能语音输入，动动嘴就生成 ui 设计。

google street 发布了一个新的版本，我试了一下，我觉得还挺惊艳的，大家看一下。我给他了一句话，让他帮我去生成一个时尚电商独立站的首页， 那这是他给我的效果，我还挺满意的，挺喜欢的。而且可以快速生成一个圆形，这个圆形是可以互动的， 并且可以导出这个码，或者导出个 zippo 包。这里面东西也挺多的。一个 html 文件，还有一个设计准则的 md 文档，还有一个截图， 所以它已经帮你把 web coding 的 前置条件做得很好了。所以我觉得现在在 web coding 之前再去做一个 web design 设计编码全有了。

大家好，今天我们来聊一个可能会彻底改变设计工作流的东西，谷歌 stitch， 它可不是又一个什么新软件那么简单，我觉得它更像是一个由 ai 驱动的全新的设计平台。来，咱们一起看看它到底是怎么把想法变成现实的。 在咱们深入之前啊，先来想一个问题，如果你是设计师或者开发者，肯定深有体会，就是那个设计过程啊，通常都是限性的，对吧？画完一页再画下一页，特别慢。但如果我们能把这个模式给打破呢？ 这就是谷歌 stitch 想要解决的问题，它不只是一个工具，你完全可以把它看作是一个有杰米尼加持的设计伙伴，它的目标就是让整个设计流程啊，变得更聪明，也更高效。 那么 stitch 的 魔法到底在哪施展呢？嗯，一切都得从它的核心环境说起。一个专门为人工智能时代量身打造的画布， 你看啊，这个画布最厉害的地方就是它什么都能处理，你可以把图片、代码、文字全都扔在一起，管你是设计手机、 app 还是网页，都能无缝切换。 而且啊，它还有一个核心大脑，叫智能体管理器，就像一个项目总指挥，帮你盯着所有事情。 好，那要说 stitch 最具颠覆性的功能是什么，那必须是并行工作流了，它直接就把一次只能做一件事的老规矩给打破了。这里的关键就在于，你不再是一个埋头画图的设计师，你更像一个指挥家， 你可以同时派出好几个 ai 智能体，就像指挥一个团队一样。比方说让智能体一号去搞定首页，同时呢，让智能体二号去弄那个复杂的用户后台，所有的进度在那个管理器里都能实时看到，一清二楚， 这么一对比，感觉就特别明显了，对吧？在传统流程里，一个地方卡住了，整个项目可能就得停下来，但是在机制里，好几个任务可以一起跑，这开发和修改的速度简直是指数级提升，以前的那些瓶颈一下子就被解决了。 如果说并行设计解决的是速度问题，那么 stitch 的 下一个核心功能计时原型，解决的就是从静态设计稿到动态体验之间那道红勾。 你没听错，就是几秒钟。想想看，你再也不用手动去连几十个画板，就为了模拟一个完整的用户流程了， 那这背后的魔法到底是啥呢？源头资料里这句话就说得很明白了，当你点一个静态的设计元素，比如说一个按钮， stitch 的 ai， 它能懂你的意思， 没错，就点一下，你点一下登录按钮， ai 就 会自动脑补，并且帮你把登录之后那个页面给做出来。这可不是简单的页面跳串，它是在实时的创造新的符合逻辑的界面，整个做原型的过程真的变得前所未有的流畅和直观。 stitch 的 创新可不止这些，它还集成了 jimmy live， 带来了一种更自然的创作方式，就是直接用嘴说， 你可以直接跟 ai 聊天，就像这样说几句简单的描述，告诉他你的想法，你想要的风格，你的目标用户是谁， ai 就 能理解你想要的那个感觉，然后就开始帮你大哥初步地设计框架了。 当然了，光做的块儿还不够，保持品牌风格的统一也特别重要。在这方面， stitch 也提供了一整套智能的设计系统来帮你把关， 它有很多强大的辅助功能，比如说你只要给它一个公司网址，它就能自动抓取，然后生成一整套完整的设计规范。它甚至还能帮你生成用户点击的热力图，还能自动帮你写产品需求文档，这已经是一个非常完整的设计生态了。 好了，聊了这么多，在这次解析的最后，我们到底应该怎么去理解 stitch 呢？我觉得啊，它不仅仅是一个工具的升级，更是一种工作方式的进化， 这一点直观重要。 stitch 正在重新定义设计师和工具之间的关系，它不再是一个被动执行你命令的软件了，而是一个能理解你意图、给你提建议、跟你一起协作的智能伙伴。 设计师的角色也从一个执行者慢慢转变成了策略家和创意总监。所以，最后也留给大家一个问题来思考， 当 i a 不 再仅仅是工具，而是真正成为你团队里并肩作战的设计师时，我们未来的工作又会变成什么样呢？

google stitch 大 更新， ui 工作流又有新的玩法了，快速给大家讲一下我觉得比较重要的三个更新。第一，你可以 voice design 了， i want to design a new landing page for a brand something in matcha， green peach or lila。 stitch 正式接入了强大的 german live， 它不仅能够实时感知你的 ui， 还能够做到毫秒级的响应。现在你可以说一句话，让它去跑完整个 ui 设计，如果你觉得哪里不对，也能随时打断它，让它不要瞎忙， 体验非常的爽啊！真的，现在呢？ what's coding？ 咱都别打字了哈。第二件， agent manager 这个呢，很多人都没有注意到，这次更新的 stitch 有 了一个追踪设计历史的 agent， 他 记得你整个项目的来龙去脉，知道你改过什么，探索过什么方向，意思就是你可以同时跑多个设计方向， 随时回滚，不怕丢进度。第三件， designed md agent 时代，没有个 markdown 文档怎么能行呢？你可以把任意一个网站的 url 扔给 stitch， 他 帮你把那套设计系统完整的提炼出来，颜色字体 兼具，组建打包成一个 designer md， 或者你自己在 stitch 里做好设计规范，直接导出成这个 md 文档。这就意味着你可以直接带着这个 md 丢给 cloud code， opencloud 等其他的 agent 的 工具，它们能够快速读懂你的审美。好了，朋友们快去试试吧！

就在刚刚， google stitch 甩出王炸更新，不用画图，不用拉组件，直接对着画布说出需求。比如按钮大一点，配色暖一点，背后的 gemna three 会实时帮你修改，不只是出图，还能秒出生成高保真界面，可交互原型和完整前端代码，从自然语言进化到视觉语言大 打通设计与开发，它还支持参考图文本代码，多模态输入搭配语音控制与智能体能力。就像一个随叫随到的设计师，前端工程师帮你直接把产品落地。消息一出， bigma 股价硬生生下跌百分之九。

进程序员之后呢，设计师也要下岗啊，今天大家看一下谷歌的 stage 啊，效果怎么样？我让他呢给我的 agent 产品做了一个官网，试一下啊， 我这个 agent 呢，它的特点是学通创作，然后呢名字我给它起名叫锦座，英文名叫 call agent k o i 这一 n call k o i 就是 锦鲤的意思， 然后来看它效果怎么样，可以看到右边这块一直在干活，哎，锦鲤出来了，哎，可以看到它先做了一个设计规范啊，包括颜色和字体，还有一些按钮，哎，效果出来了， 还不错啊，就是没有那种特别惊艳的感觉呢，但是非常非常的完成度很高，完成度很高， 包括它上面这些字也不是随便写的，是我的特点啊，是我这个 a j 的 特点，字也不是随便写的，效果已经很不错了。 然后呢，它还有一个功能是圆形，圆形功能，它在这儿正在生成的是一个圆形，不知道它能做出来什么样子， 哎，出来了，可以看到，因为整个页面着齐都是静态的啊，当时所有的按钮都变成了一个可点击的状态，它这个应该是把代码写出来，写完了， 然后这里可以看到它的一个导出功能啊，导出功能有可以导出到它的 ai studio， 这个应该是谷歌自己的，然后飞个马， 然后这些不知道还有 m c p 啊，还有原型，原型也是可以导出的，能说什么呢，都失业吧。

大家好，今天我们使用 stitch 加 anti gravity， 不 敲银行代码完成一个 app 项目。首先我们打开 stitch， 选择三点一 pro 模型， 输入我们想设计的页面提示词，点击发送，随后进入画布页面，等待几分钟生成完毕，看下效果。仔细检查设计图，如果有问题就在这里修改好，不然后面代码生成之后改起来就相对复杂了。 然后我们将设计图全选右上角导出，选择点 zip， 设计图就下载到本地了。 接下来前往官网安装 anti gravity。 下一步下一步下一步 第一步，导入配置，我们直接下一步。第二步，配置主题第三步， ai 模式选择严格模式，所有操作必须经过人工审核审核，驱动开发大部分操作会请求人工审核，官方推荐使用这种模式， ai 驱动开发会自动执行大部分操作，高风险除外。自定义配置，这次我们使用 ai 驱动模式测试能不能一次跑通配置键盘和扩展，直接下一步。然后登录我们的 google 账号，很多同学卡在这里，我会将我的解决办法单独做个视频，我们在这里创建项目目录， app 和 design， 将我们输入提示词，让 ai 开始生成代码 生成完毕，让我们打开 android studio 验证一下，还挺顺利的，没有报错，完美运行，感谢观看！

作为设计师你唯一的价值就是你的审美，就像昨天晚上凌晨，五哥更新了他们的最新的设计 agent， 那 这个东西它是给 u i u x 设计师的，这次的更新大了一个迭代，甚至 u i u x 这个设计师职位有可能真的会大幅的缩减，甚至是大量的 u i u x 都会去失业。那更搞笑的一点，更新完之后飞格马的股价直接是跌了八个点，就这一天。 对，那这次他有哪些更新的点？我给大家去简单的用人话去翻译给他说一下。这次就是地址的用户界面，他们进行了重新的全新设计， 相比于以往之前会更智能，他有更大的一个画布，不再是你去建一个新的画板，能够去读懂上下文的所有的内容。第二一个，他会是你一个更有眼力见的一个 ai 助手， 相比以前的这些只会改颜色，帮你改个图标，改个代码的这些智能设计助手，他会读懂你整个画布上的所有内容，帮你去进行及时设计。你只需要去给他丢一个需求文档， 甚至是一张图片，一张文字，对，他会按照你的这个需求理解，会给你一套你想要的设计文档。 最重要的一点就是他们在这一次的更新里面去加了一个及时的语音交互功能，你只需要跟他对话聊天，通过语音的对话聊天的方式就可以让他进行设计的修改，设计的执行，甚至是最后的代码落地。 那还有一个比较厉害的点，如果说以前的 u i 设计师你要去进行页面交互，需要去拖线拉拽，那这次完全不用，如果说你甚至不知道下面一页要交互什么，他甚至给你可以自行脑补似的去交互下一页。还有最后一个点就是设计的大衣筒， 那这次是非常有用的一个点。过去我们去做 u i 设计师的每个设计的系统，他都需要重新去梳理一套的设计规范，还有包括说设计组件化这套东西，那大多数的系统都是多套的组件化的这个规范他重复去用的， 那这次更新他们把这个最头疼的问题就是设计规范不统一的问题，只需要把之前的文档你去丢给他，让他给你自动去总结这套设计文档的规范， 它可以立马去生成一个设计的规范的一个文档。我自己再去实践了一下，我感受到这次的 stitch 更新，它会是一个全站型的一个高级的设计师，如果你是设计师，你审美足够好的话，那可能作为设计师你唯一的价值就是你的审美， 那我也自己去适应一下，让他帮我去识别一个网站的风格，总结了一套设计规范，然后又他按照这套设计规范去给我生成了一个网站，无论是在审美还是设计风格，相对来说都还是蛮高级的一个水平，而且进行了人身的一些交互的一个操作。 这次这是更新，并不是说是对哪个软件或工具进行这样一个对比或者是竞争，我觉得他是把设计去引向了一个新的形态，而不是再去产出理解需求，而是你应该成为一个更严苛设计总监，或者说更牛逼的这样一个市场的 审美高级的这样一个人去提出这个需求，让他帮你去实现。那如果说过去这种传统设计师在这波冲击下，那可能下半年真的要失业了， 包括说现在的大量的公司，他们已经在去裁掉公司百分之八十的这样一个程序员，让公司所有的设计程序代码全部 ai 化。

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

哈喽，大家好，我是迪迪，你有没有想过以后做 app 的 界面还是做网页端的界面？你并不需要用代码，而是只需要跟 ai 说就可以了。那谷歌在三月十八号前两天发布的这个东西，我觉得很多设计师可能都会坐不住，那这个呢？叫 stitch， 它现在进化成了一个完整的 ai 画布，那简单来说就是你可以用自然语言去描述你的想法，然后它直接能够帮你生成高保真的一个 ui 界面设计，不是草图，是那种可以直接拿去开发的设计稿。 那之前呢，我不知道这个词什么意思，所以去查了一下 stitch 在 英文里面它的这个意思叫缝合针角的意思。那这个工具的核心功能之一呢？其实就是把不同的屏幕能够缝在一起。 第二个我觉得可能有的一个含义就是 stitch 这个产品的定位，它就是一个桥梁，把设计师和开发者能够连接起来，把自然语言和 ui 界面能够连接起来，然后把想法和代码能够连接起来。所以这个缝合的动作本身也是由两个本来分开的东西能够结合起来，和产品的理念能够高度的相一致。 那一般我都会看一下这个新闻稿，它里面出的一些新的功能，所以今天来跟大家一起分享一下。 那他们给这个标题起的是叫 web design， 那 之前很火的一个词就是 web coding， web coding 呢？感觉就是用 ai 写代码。那么现在设计也一样的一个逻辑，你不用从线框图 开始，你可以直接告诉他，我想要用户打开这个页面的时候有能够感受到什么，看到什么啊？我的业务目标是什么？我最终需要引导用户做什么？甚至可以截几张你喜欢的参考图给到他，他就可以帮你开始设计了。 我觉得里面有几个比较重要的点，拿出来跟大家一起分享一下。第一个呢，是一个无线画布， 虽然这个已经是在其他的工具里面，像 excel 之类的已经非常火了，但是它这个里面也是引入了这个功能，你可以把文字、图片、代码全部能够拖进来，从最早期的一些想法一路可以点到啊最后的一个原型，而且全在这一个地方。那第二个呢，就是 agent， 这个它有一个全新的设计的智能体，能够理解你整个项目的上下文，你同时想探索多个方向，然后做不同的版本，它都可以帮你并行的去处理。还有一个 agent manager， 就 像一个上级，它能够帮你去追踪每条线的一个发展进程。 第三个呢，你可以看到它其实有一个新的 design 点， md 的 一个引入，我觉得这个对于设计团队来说会非常的实用，你可以从任何一个网站的 u i l 里面去可以提取它的一个设计系统，或者说你把你自己的设计规范导成一个 markdown 的 文文件，然后传给它， 这样的话在不同的项目之间就可以进行复用，而且啊不需要每次都从头再来。另外一个很强大的功能，我觉得比较好的话，用口语化的方式，比如说给到麦克风，说给我三个不同的导航栏的菜单， 或者说帮我换几个配色，我需要用这几个颜色，那几个颜色都放到里面去帮我实时的去看一下，所以他还会主动的来采访用户，我自己问我问题，然后帮我把整个想法给梳理清楚，所以我觉得这个功能也挺新颖的。 设计做完了之后呢，其实你是可以直接导出来给到开发，它有像 m c p 或者 s d k 可以 跟 ai studio 这些 开发工具能够完全打通，所以整个环它其实都是在哥的生态里面能够完成。那整个过程呢？其实从一开始你的一句话，到最后给到开发所有的一个代码，它都是在这个闭环里面能够完成。 那我的感受呢？就是 web coding 其实已经在重塑开发这件事情了，那么现在 web design 其实就是在重塑设计了， 以前设计和开发之间会有一个很高的墙，那 stitch 这个产品它其实就是想把这套墙给拆掉，那不管你是说是创业者、产品经理，还是说 o p c 艺人公司，以后想要验证一个想法的话，就不需要去找专门的设计师了， stitch 现在可以免费的试用，感兴趣都可以去玩一下。