stitch win如何用

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

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

vide design 来了！我的天呐，前端 figma 的 天塌了！谷歌 stitch 这次更新直接换赛道了。以前写页面最痛苦的不是不会写代码，而是写不出好看的。要么映客 figma， 要么把 tailwind css 背成元素周期表。 现在，你只要说人话，我要一个干净的仪表盘，兼具舒服字体。现代它就在无线画布里，把 ui 直接生成出来，丢截图甩网址念咒语都行。主打一个审美不够 ai 来凑。以前先画线框再对齐像素，现在先定感觉，再让它自动补齐组建与布局。 更离谱的是，它给的不是静态图，而是直接能跑的交互原型，点哪跳哪，注册流程，用户路径一键就能模拟出来。 想改也简单，一句话更活泼点，它就秒改。而且响应式也给你安排明白，浏览器里直接预览不同设备效果。但真正让我觉得天塌了的是，它能导出 markdown 格式的设计规范，把统一装修标准发给 ai， 十个项目不在十个风格。 这一波最尴尬的是谁 tailwind css 这类只卖实现效率的工具，当你一句话就能生成界面，谁还背工具类模板也更难卖了。 所以真正的护城河，不是把按钮做圆角，而是业务逻辑，数据稳定这些硬骨头。 ui 可以 ai 开挂，但应用能不能跑，稳不稳才是胜负手。最后问你，动动嘴就能出界面，你还会打开飞格玛吗？评论区聊聊。

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

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

这是我给 google stitch 的， 这是 stitch 给我的。但你被这些表象骗了，真实是 stitch 给我的。是这样是这样是这样。乍一眼看很好看，是不是很懵？抽了一堆卡，但细看全是问题。比如你看这里多了搜索入口，这里怎么又冒出个头像，就很奇怪， 明显不合理。 switch 并没有完全的理解，我给他的原型很多根本没法落地，因为 ai 生成的太死板。现在大家都在吹 ai 有 多强，但却忽略了最后还是要靠人去落地。所以我将设计师戏称为 ai 善后师。再说传统的 ui 设计工作流， 阿克什尔配的原型作为参考， figma 输出 ui， photoshop 输出视觉图。但现在 ai 时代变成了原型与 ui 等于 stitch 加 figma， 视觉优化等于极梦加 ps， 再把这几个工具串联起来，形成 ai 设计工作流程。那么 ai 给我的图就可以刷的一下变成这样，再刷一下又可以变成这样。这样。 总结就是， ai 时代要想不被替代，就要组成 ai 工作流，让 ai 工作流形成你的护城河。因为当下的 ai 输出的大部分都是宽泛的，缺乏情绪、业务用户的理解，所以不管你是小白开发者还是设计师， 只要掌握 ai 工作流，都能做出你想要的设计。下一期我将输出 ai 工作流式操过程，记得点赞、关注、收藏，我是大木，咱们下期见！

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

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

兄弟们， google labs 新出的 stitch 工具真的太狠了，堪称设计开发界的降维打击。不用写代码，不用画草图，直接语音说需求。比如做个音乐类应用产品，包含登录首页、详情评论页， ai 就 能直接生成完整 ui， 还自带响应式布局。它的无线画布超实用，竞品截图、手绘草图、语音描述都能丢进去，一键生成几十种设计分支，随便挑选就行。还能语音实时改设计，调色调、改按钮大小，挪模块位置，说一声就改好。 选中所有页面，然后点击导出，然后选择使用 as studio 构建，会跳到 build 页面。当生成的图像导入页面以后， 请点击 build 按钮，可以把设计图转化为可直接用的 html 加 css 代码，还能导出 react view 项目创业者快速做 mvp， 小 团队直接省下设计成本。

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

手把手教你用 tree 做出漂亮的 ui。 今天我们用到的工具是谷歌最新推出的 stitch 和 tree。 stitch 的 详细教程可以看我之前的视频。 首先我们要在 stitch 里设计 ui 界面，这是我在 stitch 里上传参考图后生成的 ui 设计稿，操作特别简单，大家可以看一下最终效果，还原度还是非常高的。然后点击右上角的导出按钮，点击下载 zip 包作为我们的素材备用。 接下来我会带大家从零开始用 tree 搭建一个 view 项目，新手可以完全跟着这个教程操作。我本身对 view 比较熟悉， 如果你更擅长 react， 也可以用同样的方法创建 react 项目核心流程是完全一致的，这是 tree 全自动创建项目的完整过程。看完项目创建，我们再来看用 stitch 导出的文件， 我把下载好的文件放到了项目目录中，里面包含一个 html 页面原文件和一张 png 参考图。先运行这个 html 文件看看效果，这是一个标准的 u i 模板， 而现在前端开发主流是用框架实现，所以接下来我会带大家把这个页面完整转换成 view 代码，一步步复刻成 view 电商项目的首页，这里是我用的提示词。参考 stitch 目录下的文件 包含 html 文件和 png 参考图，将当前 html 页面完整复刻为 vivo 组建，要求 ui 支持自适应，严格遵循 html 中的样式规范，实现一比一完美复刻。我选择了 glm 五大模型来完成这个转换，这个模型的表现非常出色， 稍等片刻， tray 就 能一次性完成转换。我们运行一下看看实际效果，页面被完美复刻，没有任何偏差。 由此可见，用好初 a a 不 仅能做出精美的 ui 界面，掌握更多技巧后，甚至可以用它开发出可交付的完整产品。好啦，你学会了吗？关注我，学习更多 ai 编程小技巧！

做设计这行的，经常会遇到一些需求给过来说的不明不白，然后又要你输出的人，在你输出之后就开始思维涌出，不断开始指点天下了有没有？既然 ai 已经到来，我们就应该把 ai 用起来， stitch 的 一个逆天操作，这个偷懒的方法得用起来，打开 stitch， 把你的需求直接输入进去，比如我这个需求简单的不能再减了， 只有一个标题，一些参数没了，我们不管，直接丢给 stitch， 然后选择 ide， 这个是会有自己的思考，提出问题并寻找解决方案。然后一般还会给你三个版本选择，问你要哪个版本，你就随便选一个，这个就是我输出的一个版本，是不是快得离谱。 这个时候如果你想输出得是海报或者是 ppt 类的演示，但是自己又搞不懂的，都可以尝试，比如这些，这个 还有可以产品图直接放进去的，它可以非常详细的给你输出参考，然后等你觉得这个版本确定了，再拿这个去极梦做一个电图做参考，生成更高质量的图。好了，我们下次再见，有机会给大家分享一下 极梦的 ai 声图以及 cds 二点零使用分享，想看的麻烦点赞关注一波，谢谢！

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

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

你用 ai 写的应用功能没问题，但 ui 一 眼就看出是 ai 做的。以前修这个请设计师三千到一万美金等几周，现在有一套工作流，一个人一个下午搞定。 google stitch 二点零加 cloud code， 通过 m c p 连接， stitch 负责设计， cloud 负责代码，各司其职。你把应用截图丢进 stitch， 写一句 prompt 说明方向。它会生成多个设计遍体。关键是 它先出图再出代码，不受 html 和 css 限制，所以设计质量远超直接让 ai 写前端。更重要的是， stitch 会自动生成一个 design md 文件，里面包含完整的设计系统、 字体、层级、配色、方案、组建规则。把这个文件放进项目根目录 c load code， 每次 prompt 都会参考。它解决了 ai 应用最大的痛点， 多页面设计不一致。通过 m c p 连接后， cloud 直接读取 stich 的 html 和 css 源码，不是猜着做，是读懂真实布局后，在你的代码里重建，甚至会自动加好玩效果，和过度动画同一个 session 里还能接 superbase， stripe versa， 一 键上线一个 mark 档案文件，干掉了三千美金的设计师预算。

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

google switch 太疯狂了，设计师真的要失业了！每天一个强大的网站第九十八期今天要讲的是，这是谷歌刚刚上线的 ai 设计产品，仅需一张草图或一段提示词，它就自动生成全套设计稿。无论你是网站开发者，电商行业创业者，还是在摸索一人公司的普通人，这个工具能帮到你。比如想开发一个深色调的跑步打卡应用， 就直接调用工作流，从配色方案、首页历史记录到运动详情、个人资料全套生成，甚至考虑到容易忽略的细节，点击预览就可以看到页面呈现效果，还能进行修改、跳转、增加页面等操作，真的是指哪改哪。更贴心的是， 还能直接导入谷歌 studio 进行开发，导出图片，给领导审核，导出代码，进行编程，甚至连需求文档都做好了。更关键的是，这么好用的工具竟然免费使用！恭喜你又获得一个信息差！