stitch全流程

嗨，给大家介绍一个十秒就能生成专业 ui， 快 速生成产品原型的一个产品，那就是 google 的 stitch。 那 呢，它不仅仅这对于我们的一些 ai 的 产品经理，它也针对我们不懂设计的一些小白，让我们也能快速上手做自己的 app。 那我这边呃开始示范操作一下，我已经有一些提示词，我就直接复制上去使用。我想要做一个呃社交宠物类的 app， 那 么它的风格可能是可爱手绘拆泡泡风，它的功能有一些，呃关于宠物社交啊，线下相亲， 还有一些呃宠物打卡的友好的场所。呃，然后我点了个 fast 模式， fast 模式呢，它就是呃可以生成的那个 u i， 可以 快速导入到我们的 fake 码，做下一步的一个调整。我先试一下 generation， 之后它就会跳到一个生成的界面，左边，它是我们的一个呃输入框的界面中，右边就是我们的画布的界面，它这里显示我们只需要等待十秒，它就可以出来了。 ok， 它已经显示出来了这个框架， 我们的 club 页面也出来了，然后地图界面也出来了，还有我们的呃宠物的，比如说它的，我们关注哪些宠物啊，会发现，比如说周边是不是有一些其他宠物啊，交友， ok， 四个页面都出来了，如果大家需要进一步的，比如说啊做一些调整，我们可以在左边进行一个输入，然后如果想要，比如说修改它的主题啊等等，我们可以在右上角上面去修改，还可以生成不同 嗯格式的 u i， 比如说手机电脑端， ipad 端等等。我们我们这边把它的因为感觉这个底太白了，那我们去修改一下它的主题， 外观的话，选一个 dark， 然后它这个字主要是黄色，那我想让它变得更加明显一点，我选一个红色号，我们试一下。 ok， 它现在在跑，在生成，看它的界面底就变成了一个呃深色界面，然后呃 ui 的 一些颜色也变成了我想要的一个红色。 那么比如说改完之后，那我们想要下一步进行到 fake 码调整的话，我们可以点击默这边有一个复制到 fake 码， 我们自己如果想下载的话，其实也可以下载，它有非常多的一些格式，你也可以直接导入到 as studio 里面，让它去进一个开发，或是下载到 zip 文档，那我们这边的话直接复制到 zip 码就可以了， ctrl c， 然后 ctrl v， 你 看我们就可以实时地去编辑它的一些文字啊这些等等 我们就可以做下一步的修改了，是不是非常的方便？我觉得这个就是啊，解决了我们之前用 white coding 直接去做一个 ui 的 界面，然后它经常比如说一直调整不出来我们想要做的东西，我们想要自己手动做一些优化的时候也不行，那么我觉得 stitch 就是 很好地结合了这几点，能够让我们真正地去落地。 ok， 谢谢大家，今天的分享就到这里。

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

果哥又要掀桌子了！最近发布了一个很可能要颠覆 ui 设计的 ai 应用 stitch， 连富盛这种大佬都忍不住第一时间上手体验。以前我们做一个 app， 要画图、要配色，还要懂交互，光磨合就得半个月。现在只要你会说话 或者给他一张参考的草图，他就能给你出一套世界级的 ui 界面。比如我让他帮我设计一个极简风的独处 app 的 ui， 包含启读业，还有个人中心，几秒钟一 套可以直接拿去融资的 ui 设计图就出来了。注意看，它生成的可不是一张张死板的图片，而是一整套的逻辑严密的、可交互的 ui 地面。无论是从排版的层级、信息、节奏到整体的氛围， 都有一套完整统一的设计逻辑。这是只有专业的设计师才具备的系统性思维。不仅如此，如果你觉得细节不满意，还可以让它多生成几个遍体 供你选择，甚至只需要在图上标注一下，它就能帮你精准的修改局部的细节。这种指点江山的感觉， 才是 ai 时代正确的打开方式。更厉害的是，你只要选中所有的界面，一键导入 ai 九九，真正把设计图变成可交互、有代码、能落地的产品原型，强烈建议大家都去体验一下。点赞、收藏加关注，我们下期见！

一分钟教会您如何用 stitch 生成这种高质量的用爱并导入到 fk 码的全流程。来到 stitch， 首先切换模式，模式大概有四个，我们今天进行演示的是第一个和第三个，第一个可将设计导出到 fk 码， 第三个优先保证最高质量与推理能力。下面我们来设计一个音乐 app 首页，输入我们提前准备好的咒语。下面我们来设计一个音乐 app 首页，让模型进行处理。 这是用的第一个模式生成的界面，我们看到页面样式相对粗糙，且有的中文，有的英文，虽然可以直接到出道 figma 后期修改工作量大，下面我用第三个模式三点零 pro 再生成试试。 我们可以看到第二次生成的页面，从功能、风格、视觉都相对统一，效果更好。下面我们可以看看怎么 stitch 导入到 fake 码。使用第一种，如果用发色模型可以直接点击默认，点击复制到 fake 码即可。 可以看到所有元素都是可以编辑使用的，图标也是矢量的。若用的是三点零 pro 的 模型生成的界面，可以通过点击末点击查看代码， 点击复制代码，来到飞格码中，找到插件 html 处理载引，然后把刚刚复制的 html 粘贴到输入框中， 再点击运行，等一会儿页面就可以完美生成可编辑的页面。现在看这个页面也是可以编辑的啦！喜欢这个教程的宝子们记得点赞加关注哦！

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

谷歌最近更新的这个设计 agent， 我 愿意给到一个吭的级别，只要动动嘴就能做出网页，关键是可以及时修改，连交互都是自定义的，审美也在线，最重要的是解决了以往 ai 做网页的痛点。 那到底更新了什么？今天一个视频告诉你，那详细的文档也整理好给大家啦。第一，它支持 url 提取设计系统，直接把参考网站的链接丢给他 ditch 就 能瞬间提取出整套配色方案，包括它的交互版式，甚至反推成 markdown 形式的提示词文档，我们自己附用或者参考逻辑结构的时候就很方便。 第二，指哪改哪。除了有跟其他 ai 做网站的自然语言交互功能，它也支持一键识别你做出来的页面，指哪改哪也支持上传自己的图片进行修改， 还可以调用 ai 进行修改。而且我们知道谷歌它接的是香蕉模型，那这个深图效果不用说。第三，即时原型做好的静态设计呢？在这里点一下就能快速变成预览版的交互原型， 甚至可以直接在页面指定某个按钮交互的跳转，在这里也可以更换不同的转换效果。第四，你也可以直接对着画布截图说话，让 speech 一 边听一边改。 i think i'd like to see three different color variations of rate your mail screen that's a good idea i'll work on creating three distinct color variations for rate your mail。 能给你实时的设计反馈，那这个情绪价值真的直接拉满。 而且我觉得整个页面都很傻瓜式，即使你之前没有接触过设计的相关理论，也可以用它真正的去帮你参与整个设计流程，那感兴趣的小伙伴赶紧去试一下吧！

从今天起，做 ui 设计再也不需要手动画图了。谷歌刚刚甩出王炸级 ai 设计智能 tst， 带着颠覆性的新概念， 外部的赞直接杀疯了！他彻底打破了传统设计软件的操作逻辑，你只需要在对话框里输入一句话，比如我想要一个抹茶绿手工感极强的极简主页，他瞬间就能生成几套高保真视觉方案供你挑选。而他最厉害的 仅是秒出图，更是全流程的动态写作，他生成的绝不是静态死图，而是能直接点击滑动的交互原型。更离谱的是，你可以直接发送语音， 像指挥真人一样，让他帮我换一种排版和配色风格，他立刻就能听得懂，并自动修复整个设计系统。一句话，你只要动动嘴，剩下的排版、配色，甚至是前端交互，他全都包了！这效率不仅直接冲击触及的 u i u x 和视觉岗位， 带来了一波史诗级的红利，从此告别漫长的设计排期，脑子里的想法瞬间变现，直接拿去拉投资，你觉得如何呢？

谷歌四 t 七更新后加入了哪些功能呢？首先是无线画布功能，现在你可以同时操作多个项目，然后把参考图、文字、说明、代码片段全扔上去，接下来就交给他了。下面让我们进入实战开局。一支笔设计一个科幻网页的草图，先画个外星人，没毛 眼睛、鼻子嘴巴，最后再来个帅气的发型。这边再来几个按钮信息框，网页的草图就设计完了，直接丢给 stitch， 把我们要生成的网页提示词复制下来， 粘贴上去，等它运行一会就行了，这里就自动跳转到无限画布的界面了。期待一下 stitch 能把我画的这坨答辩究竟能跑出什么花样 效果涂出来了。大家觉得 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。 谷歌给这次更新造了个词叫 web design， 不 用学设计工具描述想法就能出设计最关键。现在的 cich 仍然是免费使用的，不过一天只能提问五十次，快去试试吧！

万万没想到，一觉醒来，设计行业的天又塌了！谷歌重磅更新了 ai 设计工具 stitch， 还造了个新词儿，叫 web design 氛围设计。一喜塌的天，还有 ui 设计巨头 figma 的 股价两天跌了超过百分之十二。这次具体更新了什么？ stitch 不 再是输入一句话出一张图这么简单， 变成了一个 ai 原生化部，图片、代码、文字一股脑全扔给他，他自己就能搞清楚你这个项目到底要干嘛。以前做设计最折磨人的是什么？不是没想法，是一版改完，甲方说再来一版， 现在 a i t 你 同时跑好几个方案，你只管动嘴挑毛病，换个深色背景，换了这个菜单，出三个版本，给我选三个方案，直接摆你面前。颜色字体排版，以前改到凌晨三点的活，现在动动嘴就行。而且它还加了一个叫 design md 的 东西， 干的事特别简单，帮你记住你的设计风格，你这次用的配色、字体、间距全部存进这个文件里，下次新项目直接调用，甚至你看到的一个网站。哎，觉得好看，他能一键把人家的设计规则扒下来，配色、排版、间距全提取，直接用到你自己的项目里， 团队再也不用为这个蓝到底是哪个蓝这种破事反复开会，设计稿也不用再甩给程序员说你看着办了， steam 直接连上了程序员用的编程工具，设计师这边刚画完，那边代码就自动生成了，不用开会，不用对接设计到写代码，一步到位， 功能听着都是在帮设计师。但真正的问题在于，以前你花好几天打磨的东西，现在他几分钟就能给个差不多的版本，而且完全免费。 以前一个产品从想法到上线需要产品经理、设计师开发一整条线的人，现在一个人一句话就够了。当所有人都能做设计的时候，设计师的价值到底在哪？这个问题可能比 figma 的 骨架更值得担心。

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

一句话，生成高保证 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 神器教程！

哎，你有没有想过，就一个下午的时间，你脑子里那个绝妙的 app 想法，就能变成一个真正真正能上线的软件？听着是不是很酷？今天啊，咱们就来聊聊这个一个可以说是彻底改变游戏规则的新玩法。 我问你啊，你是不是也这样？脑子里突然叮一下冒出一个绝妙的 app 点字，感觉这玩意能值个百八十万的，但转念一想，哎，我不会写代码啊。然后呢？然后这个绝妙的想法就只能永远地静静地躺在你的备忘录里，是不是太可惜了？ 那如果我告诉你，就今天下午，你就能把那个想法变成一个功能全全的应用，而且你连一行代码都不用写呢？你可能觉得我在开玩笑，但这确实就是我们今天要揭秘的现实。 好了，咱们直接进入正题，为了让你跟得上，这次我会把它分成四个部分。首先，咱们聊聊传统的应用想法瓶颈到底卡在哪？然后呢，我会介绍薄薄、莎莉这两个人，用他们的故事来对比一下新老两种方法。 接着就是最重要的干货部分，我会一步步拆解这个三步搞定的 ai 工作流。最后，我们来畅想一下，学会之后，你到底能创造出什么东西。 好，咱们先来看第一部分，这个所谓的应用想法的瓶颈。说白了，在过去，你想把一个好点子变成软件，那可是一条又长又烧钱的路，你得搅人吧，得做市场调查吧？设计、开发、测试这一套流程下来，没个几个月甚至几年根本搞不定，投入巨大，关键是失败的风险还特别高。 就是这个瓶颈拦住了不知道多少有创意的人，但是现在不一样了，因为强大的 ai 出现了，整个游戏规则都变了，为了让你更直观的明白这变化有多大，来，我们来认识两个人，薄薄和莎莉。他俩都想到了一个特别棒的应用点子， 你看这个对比，哇，简直是太惊人了。左边是爆布，走的是老路子，就跟走迷宫似的，又绕又不确定，还特别烧钱，全是坑。 再看右边莎莉的新方法，那简直就是一枚火箭，嗖的一下直达目标，成本几乎可以忽略不计，几个小时原型就出来了，唯一需要你操心的就是你的想法本身，这差别你说是不是天壤之别？ 那么问题就来了，莎莉到底是怎么做到的？它是有什么秘密武器吗？答案其实很简单，它用的就是一个非常强大，但操作起来又极其简单的一个由 ai 驱动的工作流。 好了，各位，最激动人心的部分来了，第三部分，三部 ai 工作流，这不光是杀利成功的秘诀，也是你马上就能学会的新技能。 这个工作流的核心啊，我给他起了个名字，叫 ai 双人组工作流。你听这名字意思就是，在这里你不用亲自动手写代码了，你的角色是导演，你手下呢，有两个超级给力的 ai 助手，一个扮演 ai 设计师，你跟他说说想法，他就能自动帮你把所有前端界面视觉设计全搞定。 另一个呢，扮演 ai 工程师，负责所有后台的逻辑数据库部署，这些脏活累活，一个主外，一个主内，简直是完美搭档。 那么整个过程呢，被压缩成了非常简单的三步，第一步，让你的 ai 设计师把前端界面做出来。第二步，让 ai 工程师把后端功能建好。第三步，这步是可选的，如果你想让你的应用更牛，还可以让 ai 工程师加两自动化功能，就这么简单。我们一步步来看具体怎么做。 先看第一步怎么跟你的 ai 设计师合作，过程特别简单，你只要用大白话跟他描述你的想法就行，甚至画个草图给他都行。然后用一个简单的指令告诉他你需要哪些功能，比如登录区，进度条，还有你喜欢什么风格，现代的还是简约的？ 几秒钟之后，这个 ai 就 会把所有界面布局，甚至连可以直接用的前端代码都给你生成好。最后你点一下，导出这些文件就到手啦。 你看，这里就是一个现成的指令模板，你甚至可以直接复制粘贴去用，只需要把括号里的内容换成你自己的产品类型、功能和风格就行了。这个指令就相当于你这个导演给你手下的设计师下的逼导命令。 好，设计稿有了，现在轮到我们那位全能的 ai 工程师出场了，你把刚才导出的文件直接扔给他，然后用另一条指令告诉他你想要什么样的后台功能。接下来神奇的事情发生了，这个 ai 工程师会自己规划整个系统架构，吭哧吭哧写代码，连接数据库，搞定用户登录系统。他甚至还会自己测试，自己修 bug， 最后把整个项目部署上线。 这哪是一个工具呀，这简直就是一个完整的工程团队。那给 ai 工程师的指令模板也给你准备好了，接手这个前端项目，加上用户登录数据库，还有那个某某某功能，搞定之后直接部署上线。 你看，就这么一句话，一个权杖工程团队的工作，他就给你干完了，别急，还没完。如果你觉得这还不够酷，想让你的应用更智能一点，还有这可选的第三步，添加自动化。比如说想让你的 up 能不能定时发个帖子，或者自动给用户发邮件，或者每天生成一份分析报告，完全没问题。 你只需要再给你的 ai 工程师下一个简单的指令，就像这样告诉他你想要什么样的自动化功能，这就好像给你的应用装上了一个自动驾驶系统，让他自己跑起来。 好了，到这儿整个蓝图，整个方法你已经全都掌握了，我们进入最后一部分，也是我最期待的部分，你准备创造点什么？ 你看，从一个想法到一个功能全齐的 app， 现在真的只需要一个下午，就那简单的三步，这份蓝图你已经拿到手了。所以最后我想问你一个特别具体的问题，好不好？ 你脑子里现在第一个蹦出来的，最想用这个方法把它做出来的那个 app 想法是什么？来，在评论区里写下来让我看看，也让大家看看未来都会有哪些好玩的应用诞生。

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

全站开发，听说你还在头疼 ui 设计，不知道怎么生成出高保真的原型页面，今天我就帮你解决这个烦恼。打开 c t， 只输入简单的一句话描述你的项目，然后等待 c t 帮我们生成页面原型。这里可以看到生成的页面原型也是很不错的， 我们可以继续输入提示词，让它修改内容，比如换成中文主题，可以看到重新在下面生成了中文主题的一版页面原型，然后全选所有页面原型，点击导出，使用 ai studio 进行构建， 点击构建，然后下载 cp， 输入命令运行， 然后看一下生成的效果吧。页面结构很清晰，样式也挺不错， 今天就分享到这里，记得点赞收藏哦！

手把手教你用 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 编程小技巧！

就在上周，我深度体验了 stitch， 还写了一篇体验笔记。但说实话，我当时其实还没真正理解它的强大， 直到我开始用它的一个功能，即时原型 instant pro 的 type。 我 用不到三十分钟做完了一个大学生英语学习 app 的 mvp 方案。 那一刻，我的第一反应不是惊喜，而是我之前可能浪费了很多时间。那什么是即时原形？你可以把它理解成不是在画原形，而是在生成流程。在传统工具里，比如 x ray 或 figma， 我 们是先画页面，再连交互。 但在 stitch 里，这个过程被彻底反过来了。当你进入这个模式，你看到的不是画布，而是一个已经在运行的产品。你点任意一个区域，可以跳转页面，可以用 ai 修改，也可以直接生成新的页面。 比如你在一个立即预定的按钮上点击 stitch， 会直接帮你生成后续页面，整个流程是实时长出来的。这个时候你会发现一件事，你不再是在做页面，而是在构建一个产品。 那为什么我说它可能是原型工具的终结者？因为在过去，交互原型是整个产品设计中最核心的一步， 它是把需求变成结构的过程，也是所有讨论的起点。但现在，这个过程被压缩到了极短时间内。从设计原型变成生成产品路径，你只需要专注一件事，想清楚用户要做什么业务，目标是什么，剩下的交给 stitch。 所以最后我想分享一句话， stitch 不 会取代设计师，但他会重新定义设计师的工作方式。好的设计不再是慢慢画出来的，而是在不断生成和迭代中形成的。

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

做网站到底有多快？简直跟开了挂一样！最近我用 c 去做微信小程序 u i， 一 句话直接生成，真的太顶了！还能一键导出 facebook 图片 h t m l 关键还完全免费，你想怎么改就怎么改，精准拿捏你的想法效率！直接拉满 u i， 搞定后扔进 i t groupon 自动生成前端代码，用 j m n 删除了界面跟原图一模一样， 还原度拉满，前端搞定，再用科尔森秒写后端逻辑和接口，全程零门槛不卡顿，具丝滑，一套流程走完，微信小程序直接上线！从想法到上线，快到离谱！想用 i 制作自己的小程序，赶紧点赞收藏！

挑战不携带，马上现一个小程序第三期 steam 深层 u i， 体验一下詹姆莱的魅力。先来浏览一下 steam 官网， 看看什么是 steam， 免费使用额度每月三百五十。接下来我们开始体验，点击生成， 这里可以看到 sis 给我们生成的设计描述，点击继续，然后进后 ui 设计搞生成。