stitch怎么做商品图

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

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

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

兄弟们，如果你们想设计这样的网站，一定要看完这个视频。这是 google 推出的叫 switch， 用 ai 来辅助产品设计和原型构思，你可以直接用自然语言描述你的需求，帮你快速设计 app 或者 web 网站。 switch 支持多种 ai 模型， 常见的基于三核 banana。 我 用的测试做了一个项目，是一个学生计划管理系统，同时设计了 app 端和 web 端两套方案。我们先设计啊，在这个案例中， stitch 主要帮我完成了两件事，第一， 帮我快速拆解功能模块，第二，明确每个页面的结构和重点，这个就是设计出来的效果。我们也可以下载设计图和原代码，直接完成代码开发，功能绝对一比一还原。接下来我们来看一下外网站的效果，一样的提示词， 没有太多的提示词可以设计出来，这样的效果我已经很满足了，想体验的兄弟们赶紧收藏，防止找不到。

我惊奇的发现 google stitch 真的 有一次巨大的更新，而且这个更新真的是非常的利好 ai 产品经理，哈，我们来看一下哈。其实本质上这里你可以去跟 google stitch 去进行对话，让它呢帮你把原型图选出来。但是它有一个非常大的更新，这里有一个 modify 修改点，修改了以后我会发现，哦，原来 stitch 它生成的这种原型稿是没有办法做这种元素的修改的， 现在是可以的，这里可以直接改字，比如说我把这两个删掉，这个就非常牛逼了。这里还有个利用 ai 修改，比如说我们点这儿，我们点利用 ai 修改，你可以跟它对话说换个底色。 我们举个例子啊，相当于你可以通过自然源来交互，他就会帮你去完善这里的这个时间组建的对应的细节。还有个重大的更新，就是现在对于这个圆形文件可以直接生成这种可以点击有交互动态的 prototype 了，我这边已经生成好了，给大家看一下，你看这里都是有对应的点击效果的，就非常厉害，还能输入。 这是第二个非常大的更新，这里可以继续的去编辑第三大更新，现在生成的所有的设计元素全部都给你整理好，而且你是可以去更新设计系统的， 比如说我们把这个所谓的这个主题色，把它换一个颜色，你看它的整体的这个颜色就已经修改好了。还有个非常牛逼的更新，我可以直接的去采用对话的模式去修改我的设计稿。 hey， great to see you， what are we thinking for the ding talk desktop chat industrial refactor today 对 于修改好的设计稿，我们统一可以选择导出，这里不仅可以导导出到 as studio， 而且可以直接导出到 figma， 再去做一些精细化的修改，这个时候代码就已经 copy 下来了， copy 进去 你发现在这个里面你再去做一些精细化的修改就可以了。所以 google stitch 再加上 figma 这种组合，其实对于咱们产品经理去出前端原型会非常非常有用。当然你会发现 我其实这里有一个叫做请根据 ui 设计标准 skill v 五点零是因为我本身把 stitch 的 与 cp 连接到我的 cursor 里面去，自己写了一个设置标准的 skill， 所以 大家可以去尝试通过 cursor 再加 google stitch 再加 figma 的 方式把原型图做出来。今天的分享就到这里啦，希望对你有所帮助。

如果你用 steam 还停留在简单的生两张 demo 图，那我只能说太基础了。用好 steam 这个落地工作流，真的能让设计师的效率拉满。比如我在 cloud code 里跑来一张美食生鲜类的界面，插播一条，如果你的电脑还没有装上 cloud code， 我 把安装过程以及遇到的关键问题都整理在这个文档里了。可以看到它的完成度完全达不到一个设计师的预期。 我们可以借助飞马 m c p 功能，把它发送到飞马导出为图片，然后到 stage 里让它帮我们优化这张界面。 stage 默认会选择 flash 模型，我们手动改成 pro 版本，可以看到它生成出来的界面质量好了很多， 但促销班呢？这里不太满意，就可以用设置的局部修改功能重新生成。点击左下角按钮，可以让它同时生成三个不同的版本，我们就选择比较好的版本，在右侧选择色彩规范。复制 m d 文件代码，然后来到我们的项目中，新建个以 m d 为后缀的文件名，并且把代码复制过来。我们先复制设计稿里的编辑格式，让它按 m 规范跑一遍，出来的结果还原度还是差很多的。那我们可以接上 stitch 的 mcp， 在 浏览器直接搜 stitch， 点击 mcp server， 找到 cloud code 的 安装方法，复制代码，先存在备忘录里，然后再点头像去设置页面，创建个密室，复制过来，替换掉 ipikey 的 资 本，整体复制到 cloud code 里，让它直接安装。安装完输入斜杠 mcp， 检验一下是否连接成功。 ok， 连接成功之后，复制设计稿连接过来，让它调用 mcp， 再跑一遍，出来的结果还原度已经到了百分之九十以上， 甚至页面滚动时顶部还细节地做了毛玻璃效果。 ok！ 本期内容就到这里，想要了解更多 c 语 ai 知识，别忘了点个关注！

最近 stitch 很 火啊，所以我也试着拿 stitch 做了一个网站。呃，我觉得 stitch 它对于很多前端的设计师来说确实非常好用，但是我今天搭建了一套工作流，然后可以让你用 atigraphy 加上 stitch， 即使在没有任何的前端设计的经验的情况下，甚至其实词你可能都不是很会写， 然后只要你用这套工作流，你就可以设计出非常非常高端。呃，不仅是好看，而且是能能用，能用在你的产品上的一套网站。 ok， 那 这套工作流呢？最核心的就是这两个 agent， 在 antigart 里面，它们叫 workflow。 那 第一个是这个 i a planning， 那 它主要是用来帮助我们来搭建一个输出，一个 information architecture， 意思就是一个信息架构图。 那在设计这个前端界面的时候，我们首先也需要做到一个设计它的信息架构，一个信息层级，包括用户的，呃， 用户的一个体验，体验地图等等。那这些东西主要是帮助我们除了做好一个网站好看，还需要做有层次，有逻辑，然后符合用户的使用心理，同时和我们的这个整个产品的这个介绍调性都是相符的， 决定了整个页面的这个布局。那这里面我搭建这个 i- planning 呢，他会主动的像一个成熟的前端的这个信息架构师一样，然后去跟我进行沟通，去引导我 去完成这个 information architect 的 一个输出，整个过程你只需要召唤它，然后它就会一点一点的推动整个过程去进行，不需要你专门的去记很多 prompt。 ok， 那 我现在他问我要做什么的一个网站，我告诉他以后这次是要做一个呃，介绍这个智能眼镜的网站。这个智能眼镜当然是我们虚构的一个东西，等会我会把这个整个的完整的产品的一些资料生成，然后发给他。 ok， 然后对，现在他正在给了我一些反馈，然后我们阅读一下这个部分， 他希望我他在问我需要一个什么样的一个设计，一个感觉呢？我希望的话是要有科技感，同时然后多一些艺术感跟前卫的风格，但是我不是很喜欢极简风，所以尽量少用极简风。 另外就是这个网站里面我希望他能多一些动态展示的效果。我现在头脑中想大概就是呃，类似一个眼镜，然后他可以 呃滑动，然后它可以展开，我们可以看到它内部的结构，这样它比较炫酷一点，或者是我们戴上眼镜以后可以看到眼镜和不戴眼镜之前不一样的一个画面，然后他就会帮我策划一下啊，首页、科技规格页、价格与购买页，然后关于品牌，每一页大概都是，呃 什么样的一个布置，以及有哪些页。 ok， 然后这个技术框架可不可以我看一下啊？感觉有一些是可以合并在一起的。 ok， 那 我希望把品牌页和愿景页融入到它这个首页里面啊，相当于一共就是三个页面首页，然后科技规格和价格购买，那这里面我们先简单去做一下，放入我们展示，然后我把这个东西想好以后，我们去当做一个 prompt， 然后发给他，让他去进行下一步的调整。 然后顺便说一下咱们这个 agent， 它是一个 id， 相当于是 一个升级版的 vs code 吧，你可以这么理解，它自己是可以通过 customization， 然后来自定义这个 workflow， 也就是 agent 的。 那整个 agent 我 设计里面呢？除了这个 agent 本身的一些系统提示词，我还让它去调用一些 skill， 那 这些 skill 都是我让 ai 去帮我去啊，具体去他帮我写的。 ok， 我 们把这个发给他以后，然后他给了一些反馈，让他告诉我整个用户的一个流程，先进首页，然后去体验，然后去啊探索，然后去购买等等。 那这些东西在这次这个网站里面可能不会显得特别重要，但是以后你做网站的时候，如果你是 希望可以给用户最好的体验，或者说你要减轻从一个动作到另外一个指令的一个步骤，那做好这个信息架构图是非常有必要的。那我们这边给他确认没有问题以后，然后看他这边开始去读各种各样的 skill skill 这边左边已经弄好了，然后他会去调用 skill， 开始 啊，就是完成我们的任务，那这边我们去打开 switch， 然后看一下啊， switch 这边我们这次直接调最大的这个 sync 文件， 三点一 pro 的 这个模型，对它这边信息加握图做好以后，我们可以打开来看一下， 这里面加入了一个 simmap skill， 这也是之前让 ai 做好的一个 skill， 他 会用一个 moment diagram。 呃，如果你用过 excel 的 话，你会知道它是用 excel 生成图，然后还有 c 导图等等，它这边是用 ai c i i 做成的一个展示 英文布局的这样一个相框图，那有这样的一个大概的一个英文布局以后，我们相当于说在生成整个设计之前，我们先给他设了一个暂停点， 暂停点位呢，我们就可以先把小问题明显的问题改掉，这样不用后面如果出错的话去反攻。 ok， 做完以后我们拿到了他这个 i a 的 这个架构稿。 ok， 然后我们直接把他名字给他，然后他就开始去生成这个 i a 了。 ok， 我 们这里跳转到这些 i a 生成完以后，那我们拿到这个 information architecture 以后，我们给大家看一下，它里面也是包含了哦，就是一个完整的。 这我之前还跟他说让他去生成一下物料清单，就是需要我给他提供哪些关于咱们这个智能眼镜的这一个资料， 那我会把这些东西都复制一下，然后等会儿发送给 kimi， 因为 kimi 它本身是带一个这个封群功能的，所以它并行的话做任务做的很快，我让它去帮我生成这些虚构的这些，呃，文案 资料，还有一些升序提示词。 ok， 然后我们把这个东西准备好以后，我们就可以啊去调用下一个 a 阵的，叫 vlog explorer， 它主要就是负责真正的视觉上的一个设计， 信息架构弄好以后，它会自动读取之前信息架构做的东西，然后新开一个新的一个上下文窗口，不占用之前的上下文。 这一步它继续引导我们去有一个灵感还有参考，看看我们有没有想参考或者学习的一个风格，然后大概是想做一个什么样的调型。嗯，那像做这个咱们智能眼镜这个网站呢， 其实我本身啊，我也不知道大概是要做一个什么样的一个调性，我能给他描述出一个 呃比较粗糙的感觉。其实这也是大部分人做网站的时候，如果他没有经过专业的这个训练是有什么样的感觉，那我可能比较喜欢大胆一个撞色， 然后我希望他有创意一些，然后带一些科技感，毕竟是一个科技类的一个网站，但是一定要避免那种开播朋克或者电子科技感，那样很容易看出来就是 ai 做的，然后千篇一律。所以他根据我们的这样一个反馈，然后生成了呃几种大的这个方案，这个方案它是根据呃保守、 适中和激进三个这个情况，然后来做的。这边我们看一下啊这几个方案，嗯，每个不同的配色方案，那我们来挑选一个感觉可能会比较好一点的 核心动态与交互理念，大家可以看一下，看看哪个你会比较喜欢，那我个人的话可能会偏向于选这个。第二个深空矿石与这个这个酸性的这个东西我本身比较喜欢酸性摇滚。 然后呢，对，我们看一下他需要我们干什么，对他这里面有多个步骤，然后其中也给了我们这个选项，那我们就是给他反馈一下，我们想选择这个选项 b， 然后他就会引导我们继续做下一步。他这边写的很全呢，鼠标编排，有交互的仪式感， 以及啊排版图形语言。之所以要有这些，呃，这个在 stage 里面叫 design system， 之所以要有这些是因为等会我们完成，如果我们后续要完成整个网站的设计的话，我们是需要一套比较系统的一个设计的语言设计的约定，然后来交给 ai， 这样能保证我们的整个设计是一致的，是连贯的，是有统一的这个品牌调性的。 然后整个 a 阵的这个设计里面呢，我比较关心的其实就是让他在地图和动效这方面一定要多做思考，然后多和我们沟通。那他现在给了我们一些这个地图跟动效的这个方案，我们看了一下这个动效的方案以后，感觉有一些动效，呃，其实我不是很满意， 所以我这里让他再去修改一下，希望他能，嗯体现出这个眼镜戴上与不戴的这个区别，或者是眼镜本身的构造，这个动态的一个拆解，让他给我提供新的三个这个动态的方案，然后进行对应的更改。 那对于一些艺术偏向性比较强的这种网站的话，如果只是光靠字体啊，排版呢？啊，这种设计是比较难以特别特别出彩的，最终还是要看一个底图和一个动态效果。他给了我这几种方案以后，然后我们看一下，嗯，数字， ok， 嗯，我们来选择一下哈，我可能会比较偏向于方案二这个一个机械结构的这样一种感觉， 我们再看一下，没有问题的话，那我们就跟他说一下，我们选择方案二， ok， 那 我们选择完以后，他会不会把这个提示词然后给我们？那他他给的是一个这个 图生视频一个提示，他图已经给过给过我们了，那我们就把图跟这个提示词然后放过来，我这边用的是可灵的这样一个模型，生成一个几秒钟的，这样一个一定是要高清哦，因为他是用的底图，一定要看的很清楚。呃，一个算是动画吧，这几秒钟，毕竟 ok， 他 那边生成的时候，我们来这边直接开始 stitch， 准备开始做，那 stitch 这边呢？ ok， 那 stitch 这边呢？我建议你也是我们把，我们现在不是有两个这个文档吗？一个是 i a， 一个是视觉的方案，那我们先把 i a 给他， 对，因为让他先去根据我们这个音符音符材质，然后来把这个先复现一下，先不用管整体的这个视觉，我们只需要把这个信息架构体现出来就可以。然后这边可能这边的这个视频生成好了，其实没有达到我预期的一个效果， 他那该英文咱也没有仔细看，对吧？呃，咱们先为了这个视频呢，先先凑合用。 ok， 他 这边做好了， 那其实已经很不错，挺好看的。但是他上面这很多图片呢，毕竟不是咱们自己的这个图片，所以其实反映不了咱们这个公司的这样一个实际状况了。以及啊，咱们这次为了演示呢，然后也用一下我们自己的设计设计方案， 然后把我们的自己这个视觉的设计方案发给他，让他去进行改造，改造完以后大概是一个这样的一个效果，上面这个是他之前的本来这个效果， 嗯，这其实地板效果其实也还是不错的。那下面这个是我们用刚才那套方案，然后视觉出来的，增加了很多撞色然后的一个效果。而且最关键的是什么呢？是我们下面的这些图片， 呃，等会都会换成我们真正的一个图片，就是我们真正的我刚才用 timi 生成的这些图片，或者说如果你是自己在做什么产品的话，那就是你自己啊准备好的你们产品真实图片。 ok， 那 这个设计我们还是比较满意的， 你增加了很多撞色，嗯，然后整体也是非常有科技感。对，那我们等会就会把这些东西呢，我们让它 export 一下 这个，它 export 的 话是可以可以这个输出到很多的位置的啊，可以放到 camera 上面，也可以放到啊 figma 上面，那我们这里面 就给他下载出来，下载成这个，然后我们放导入以后，我们写这么一段提示词，就是让他去哦，告诉他我们已经在设置上完成了这种设计。那你需要现在去啊，结合之前的这个设计的方案，然后 你需要列一下就是哪些图片呢，需要替换，然后哪些还需要我们额外的帮助，让他去问一下。然后这些都弄完以后以后， 就让他替换完图片，他就已经把我们刚才用 kimi 生成这些图片已经替换到上面了，这个时候他就已经是一个又美观，同时也是符合你 整个产品可以实际进行宣传的这样的一个状态。对，然后这里面我们着重弄了两个页面啊，这个是主页那 home 配置之后，我们点一下科技规格就可以看到这个。呃， 对，这是刚才 kimi 给我们生成的一些图片，都已经成功的放在这里面，包括 kimi 生成的这些参数也都在这里面了。这就不只是一个花里胡哨，然后不能看的网光能看的网站了， ok， 这样你就顺利的完成了一个从零到一，然后一个小白的视角完成了这次 antigravity， 加上咱们新出的 switch 的 这样一个 完整的设计。大家如果需要嗯，提示词的话，可以在后台然后跟我说，把提示词发给你们。这个最主要提示词一个就是 i 的 那个 啊， planner， 还有一个就是 little explorer， 他 可以手把手的带着你把整个的这个网站从你脑海中一个隐约的想法变成真正的一整套设计方案，然后交给 stitch。 嗯，还有什么想想去看的一些话题都在评论区跟我说，我后面会经常去做。

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

如何把别人的逻辑瞬间变成你手里的原型？不管是用来做竞品分析，还是验证自己的创业想法，这套工作流啊，都能让你事半功倍。操作啊，也非常简单，只需要三步， 核心思路就是让 ai 充当我们的产品架构师，先拆解别人是怎么做的，再提炼出我们该怎么做。这样做啊，不仅能大大提高生成的效果，还能帮你节省百分之九十的时间。拿我最近正在研究的 ai 健康产品为例，只需要把它的链接扔给詹姆纳，输入这段提示词， ai 就 能帮你把产品的功能、架构、设计规范，甚至用户体验地图全都拆解出来。光拆解还不够，咱们还需要让它帮我们提炼出 ai 能懂的产品描述。拿到这句描述以后，我们把它输入到这个 ai 工具里。 这是谷歌最新上线的一款基于代码逻辑构建页面的工具，它不需要你懂任何设计和代码思维，因为它完全是遵循网页开发的规范。 可以看到整个过程就一句话，不到三十秒，一套完整的圆形就出来了。大家看它的细节，这个仪表盘的层级，还有下方 ai 问诊的交互区，这不仅仅是一张图片了，而是一个有着严密逻辑的产品骨架。这才是产品经理需要的 ai 时代，哪怕你不会设计，不懂代码，一样能成为超级产品人。提示词放到评论区了，你们也去试试吧！关注达姐，带你第一视角玩转前沿科技！

hello， 大家， google stage 最近有一个重大的更新啊，这个更新的话就是把一个原本是 ai 化界面的工具升级成 ai 的 一个产品工作设计牌。啊，那 首先我已经尝试过了啊，首先就是在这里去输入你索要的页面，然后页面有什么功能，它直接就可以把你生成整套页面的系统。 同时啊他还会把一些配色什么之类的已经在旁边标好，以及你所画的一个所有的页面，他也帮你去陈列整理好。然后更新什么呢？比如说他有一个无线的画布啊，比如说我们可以随便拖动这个 去画布，同时同时我们还可以去去操作他啊，去操作修改他，比如说系统设置，我们可以改他那个系统的一些颜色，然后我们直接可以修改他的一些，比如说里面的一些文字什么之类的啊， 你看这个文字什么之类的，同时你还可以通过这个居然还重新生成什么之类的，还有我们可以直接去查看他的一个呃 u x 图，好吧，你看可以滑动，然后有做一些简单的一些交互，当然只是一些简单的交互了啊， 好，关注我，接下来我会探索更多一些 google state 的 一些玩法。

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

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

每次画交互图、改 logo、 写 prd 都要耗费一整天，如果你还在做这些重复的劳动，那你一定要看看这款刚刚完成十四级净化的 ai 设计神器 steam， 今天带你盘点它的五个逆天升级，看完绝对想要立马换工具！你 能想象只用说话就能做出一整套完整的 app 页面吗？不仅如此，它还能自己生成需求文档，自己生成下一个交互页面。刚刚发布的 steam 重大更新，真的把 ai 设计玩出了新高度， 这里有五项重大升级，第一是 ai 原声画布。 stitch 现在拥有一个更宽敞、更现代的画布，可以同时容纳图像、代码和文本，并跨越它们进行推理。第二是更智能的设计智能体， 你可以让他提换 logo、 编辑产品需求文档 prd， 甚至让他来采访你，以帮助你从头开始设计一个新的落地页。 而且你终于可以在同一个画布上混合放置移动端和桌面端的屏幕画面了。第三个可能是我最喜欢的，现在你可以用你的语音来进行歪笔设计了。第四是即时原形，只需几秒钟就能将多个屏幕拼接在一起，让你的想法变成现实。 点击播放按钮，即可及时预览你的交互式应用流程。你甚至可以根据你点击的位置，让 stitch 自动生成下一个符合逻辑的屏幕。最后第五是设计系统与 design 点 md。 现在每一个新设计都会自动生成一套统一的字体和配色方案。 你可以从任意网址提取设计系统，或者使用全新的 design 点 md 文件来导出或导入你所有的设计规范。二零二五年的 stitch 更像 ui 生成器。二零二六年这次升级之后，它开始更像 ai 设计工作台。

上一期我们一起看了 stitch 生成 ui 设计稿的能力，那这一期我们就来看用 stitch 生成设计稿后，用 as studio 部署上线， 让更多的人看到你的项目，那教程呢，我已经整理成了文档，不要忘了点赞关注评论哦。哈喽朋友们，我是阿水。首先我们同样是打开 stitch 网站，选择好我们的项目之后呢，选择 mark， 再选择 a s 丢丢进行创建，这样呢就会跳转到 a s 丢丢的网站，可以看到刚才我们选中的网页呢，已经在这里链接好了，并且提示词呢也给我们自动加入了，我们只需要简单地点击 build 执行就 ok。 执行之后呢，我们的代码就生成好了， 那我们接着要做的就是将我们的代码上传到 github 平台，我们点击设置找到 github 入口，这里呢我们要填入项目名称和项目描述，一般这里呢我们先选择私有，接着点击确定， 然后我们就会进入 github 仓库。那接下来呢，我们就要借助 vcr 网站进行线上部署。打开 vcr 之后，第一步就是和我们的 github 账号进行连接，那好了之后呢，我们就可以看到这样的一个页面， 点击右上角的项目按钮，在这里呢可以找到我们要部署的项目，点击 import 后就会跳转到这个页面，再点击 deploy 就 可以开始部署了。那部署好了之后呢，我们就可以看到我们项目的默认网站，点击这个网站就会进入预览，那这样呢就可以把这个网址 分享给你们的朋友们，他们也就可以和你一样看到这个网站了。那从 stitch 到网站部署上线的工作流就完成了，快在评论区晒出你们部署的页面吧！ ok， 那 这期的分享就到这里，最后一定不要忘了点赞关注评论哦，我是阿水，我们下期再见。拜拜。

给大家分享一个小技巧，怎么去生成网站的 o g 图？ o g 图就是你往社交媒体分享的时候的那个图片， 那我们可以用 stitch 去做这个事情，把网站的首页可以做个截图发给他，在这里告诉他帮我生成十六比九的网站 o g 图。然后我们看一下效果，这里它就开始制作了。好，这是它生成出来的一个效果， 我觉得还不错，还比较吸睛，当然你可以让他再去调整了，但是我觉得这是一个比较好的办法，大家可以尝试一下。

扣子也太他妈牛逼了，我跟你们说，我今天是直接输了一个产品名称，他帮我生成了完整的标题主图，还有详情页啊，我觉得特别落地，特别适合我们汕头的兄弟姐妹们，来，我们一起看一下啊， 来看一下，这是我们用扣子帮我们生成的产品三件套啊，第一标题供给了不同的方案，我们自己直接去用就可以了啊，直接复制粘贴用啊。第二个呢，商品的主图方案啊， 这个主图呢还分了好几张，因为主图我说的是手主图，第一张主图我们可以选择哪几张好就直接用，你看这一张，我的妈，这个后面还有花果香，这个特别棒啊，并且呢还这种啊，这个田园环境的主图也特别棒，当然呢，还有一些我们的商品的主图的辅助图啊，也可以看一下， 我们自己可以去选择啊，果园的呀，挑选的呀，还有我们一些包装的呀，等等等等啊。好，来我们继续再来看一下我们的商品的详情页啊，详情页呢是一长条的，有很多章，然后包括我们的产地，你看产地呀，哎，我们的一些细微的细节，一些我们的挑选啊，甚至我们的 完全特写的卖点啊，其实都有啊，我觉得生成的这一套产品三件套啊，标题主动衔接是特别落地的，我们可以达到百分之八十可以直接去用的啊，当然呢，我这里面可能还有一些缺点，大家可以再去优化，对吧？可以不断去生成对不对？来，接下我手把手教你怎么去用它。来， 你们看一下，首先呢，我们打开这个技能，这个技能呢是关于生成我们这个产品三件套的一个技能。哪三件套呢？第一个产品的标题，第二个产品的主图， 第三个呢，详情的详情页。啊，好，这样呢，我们直接去输入我们的产品名称就可以了啊，比如说我们去搞一个橙子，对吧？我们想要生成一个橙子 直接去打就可以了，比如说宜昌九月红。好，首先呢还会跟我们进行一个交互，去向我们询问更加详细的一些信息啊，以便他生成的更加契合我们真实情况 啊。当然呢，如果说你们是自己就卖城市的，你们更了解你们的这个产品情况，那更好啊。啊，我这边是随便去编辑了一小段这个产品的信息啊，当然不全， 根据我所了解的这个产品的信息啊，我直接发送给他，不够全啊，就一点点啊。好，首先发送给他，好，发送给他之后呢他会给我们去进行第二个交互。第二个交互是什么呢？需要我们生成哪些东西， 对吧？可能有的人他的需求就是，哎，我只想要生成主图就可以啊，我只想要生成详情页，对吧？好，比如说我现在我全部都要生成，我要标题，要主图，要详情页，我都要，对吧？ ok， 我 直接输入 d。 好， 第二个他问我们问题是有没有品牌资质，哎，我这边确实没有啊， 我一般啊，卖生鲜的其实做品牌的很少啊，那我就无，对吧？没有品牌之之志。第三个问我们啊，有没有关于一些参考图，对吧？啊？当然了，照你说的参考图可能是一些实物图， 比如说你家有果园，你想要拍一些感觉比较接地气的图片会更好啊，但是我这边可能没有，我就直接到一些某宝上去找一些我觉得不错的一些实物图去参考啊，比如说我现在到某宝上比如说我现在到某宝上去搜索一下啊， 好，比如说我到某宝上，我直接搜索脐橙，对吧？哎，比如说我感觉这几张都比较落地啊，好，我可以多上传几张，他这里上传这个图片附件呢，最多可以上传十张啊， 尽量找一些比较落地的啊，就是在果园实拍的，这样的图片会更好一些，对吧？这样显得更加的真实，他生成的真不真实，落不落地也跟我们这个啊，选择的拍照的，拍的一些图片也是息息相关的啊。 哎，比如说这个图片上面啊，有一些小蜂蜜，对吧，我觉得也比较这个真实。 好，这里我们选择了这好几张图片直接发送，发送之前呢，我们还是尽量的去说一下，参考我发送的这一些附件图片。 ok， 好， 接下来就开始进行思考了， 首先去解析我发的这些文件，然后呢再去根据我的要求去做事就好了，这个时候呢需要耐心等待一下。经历了漫长的十多分钟，我们这个结果终于出来了，可以看一下啊， 首先呢这个上面呢是一些我们的主图，可以给我们去推荐，然后呢一些产品细节，当然呢有一些是生成的比较不落地啊，尽可能的他们是参照了我的这个给的图片去做的啊。 ok， 还有一些详情页啊等等。好，我们看完整的这个产品报告啊，第一个呢，标题对吧？标题呢也给了我们一些建议啊，供我们自己去参考，对吧？这个标题呢，基本上都是比较全的啊， 里面有他告诉了我们是有多少个制服，对吧？因为我们正常做电商的话，这个商品标题的制服是六十个制服啊，不要搞错了啊，尽量不要填的超过啊。第二个呢就是我们的主图，主图给了哪些东西呢？来看一下啊。 第一个呢，我们这个主图哎，上面有一些我们经常做商品主图也需要做的一些元素，比如说，哎，我们的这个产品卖点信息啊，我们的产地信息啊，甚至我们的这个营销活动啊，或者说我的物流保障啊，这些基本上都是有的，还是一个点我们自己去选择，对吧？当地现摘啊 啊，比如说这个收起来还算是比较落地啊，是属于这个田园采摘风格，对吧？这些都主图， 当然呢第二个呢，除了主图的手图之外呢，还有主图呢，有一些辅助图也是供我们去参考，因为我们都知道啊，我们要上传这个主图的话，有五张，第一张是手图，后面四张是俯视图，对不对啊？自己我们也可以去参考去选择，当然有一些上传的可能是比较官方啊， 这个是根据我们给的参考图片和产品信息给的是否足，是否落地啊，好往下滑呢，我们再看一下产品的详情页啊，产品的详情页包含的我们的一些手屏， 对吧？哎呀，以及我们的产品的特点呀，对不对？以及我们的这个产品的具体的产地优势在哪里啊？也帮我们去通过实物加绘画去帮我们生成出来的啊，我觉得整体来说的话是比较落地的，可以直接去用的啊，无非就注意你们可能有一些关于 ai 生成的相关的标识，可能是需要去 相应的去裁剪一下，顺丰保障啊等等，售后无忧啊，售后保障等等等等。 ok， 这个就是我们完整的一套啊，给我们生产出来的，包括我们的标题，包括我们的商品主 图，包括我们的这个商品详情页，这个产品三件套的这个技能呢，其实可以超过市面上百分之七十设计师，或者说一些拍摄摄影啊， 去做出来的图片啊。当然呢，如果说你们还想生成更多地的话，还想多去参考一些东西的话，也可以继续让他再去给你生成啊。今天呢，我们关于这个通过脐橙这个橙子生成的产品三件套的这个演示步骤就到这里。

做电商的都知道，其实我们卖的不是商品，是图片，一张图呢，能不能抓住人，决定了顾客会不会点进来，会不会下单。但是如果你说要专门去请美工找模特搞拍摄， 成本高不说，而且还非常耗时间。还好呢，现在有 ai， 那 到底怎么做呢？今天手把手分享一下实操，平时没有那么多复杂的操作，靠 ai 就 能搞定电商做图这件事，两个方法直接搞定。一、 ai 商品图加万能改图，不用拍也不用修，直接拿别人的优质图一键替换成自己的产品，马上就能用，还能用文字指令指挥 ai 改图 换背景呢，改颜色，去水印，修细节，哪里不顺眼就改哪里，像聊天一样简单。第二，全平台模板加 ai 促销文案，不管你是什么平台，不管是什么类目，美妆啊，零食啊，还是说日用， 里面都有现成的模板。更省心的是，它连文案呢，都能帮你自动生成，先生成那种容易打动人的卖点描述，不用你在绞尽脑汁的想广告词。而且呢，还能一键生成带货视频，扔几张图进去，自动的帮你剪成，节奏感强，适合主图播放的视频， 不用学，剪辑出来的效果呢，也挺专业。我用它呢，主要真的是因为它真的很省事。比如这个万能改图的功能，在 ai 板块里学好指令，贴进去，放一张白底图， 几秒钟就可以出好几个可用的版本。生成后呢，如果说哪里不满意，还可以单独微调。对我们这种呢不想供美工，自己又不会作图的小卖家来讲，效率真的提升太明显了。

这是我们的产品图，这个是我们的参考图，最终的返回的结果图我们可以看一下，这是我们的结果图，他已经成功的将我们的产品的沙发替换成了参考图的沙发，那么就可以快速的生成一张电商图 片，小龙虾。生成电商图片的这个流程之前我们前期需要我们已经安装好了 off 可乐小龙虾，上期视频我们有介绍过详细安装过程，第二个需要我们刚才那个技能去安装， 第三个就是我们需要 pcs flex app 的 官方的 k 可以 个人去申请，实际的工作流程就是我们用户发送了生图的指令 给飞出机器人，飞出机器人其实就调用我们的后端的小龙虾的服务，就 opencloud， 它实际又会调用我们刚才配置的 k 的 生图的接口 以及它的技能。它的实际的技能使用的是谷歌的相交的最新的大模型，因为目前来说谷歌的生图的大模型相对来说它的性， 尤其是它的升图效果对简体中文非常的友好，不会出现乱码的情况，所以基本上我们建议是使用谷歌的这个 banana 二的模型。 升图的结果的图片会通过调用接口的形式发送给飞书机器人，然后我们用户就可以在飞书上可以看到我们升图的效果，其实是一整套的流程， 就是他的核心的流程的原理。好，接下来就给大家演示安装的步骤，让我们小龙虾快速集成绘图的功能。首先回到文档，我们复制这行的命令，然后回到终端粘贴回车，然后我们验证一下是否安装成功，进入这个验证命令，进入这个目录， 我们能看到 pc fix open cloud 这个 q 技能已经安装成功了，现在我们去获取个 k， 打开网站，我们获得一个 k， 就是我们的 k， 复制我们的 k， 我 们设置好了 k 以后，最好是我们让龙虾验证一下，检查一下是否已经配置好正确的 k， 因为就是我们只有在 k 正确的情况下，我们调用生图接口才是 ok 的。 看到后面他已经给我一些结果了， 这是最终生成的图片效果，可以看到一个山水画记录，我们的生成效果是最主要的是为什么调用谷歌的香蕉模型， banana 二模型，因为他对应的他这个字体对简体中文的字体是很精确的，他不会出现乱码的情况，所以这一点就特别强调，所以我为什么要选择 谷歌的这个大模型？收，其实我们在本地的时候，直接可以使用流沙的浏览器的页面形式进行对话，让他们帮我们生成图片，那么是这张图片就可以在我们的浏览器中就可以看到，因为目前测试的结果就是在飞书上我们无法看到图片，只能看图片的。 uio 在浏览器中是可以看到图片的效果的，这是我们的图片的，那我这边图一是使用的产品图，图二是使用的参考图。我的目的就是使用产品图替换参考图中的沙发来生成一张图片，让达到一个电商生图的快速的一个效果，可以看到他最后给我们返回的结果，首先这是我们的产品图， 然后这个是我们的参考图，最终的返回的结果图，我们可以看一下，这是我们的结果图，他已经成功的将我们的产品的沙发替换成参考图的沙发，那么就可以快速的生成一张电商图，回到这个网站上也可以看到刚才我们生图的效果， 这就这刚才我们使用的账号生成的图片的效果已经在这里了，其实你可以在网站上去使用，但是我们集成了是 opencloud 的 这个小龙虾以及飞书，所以当我们在手机的时候，就直接可以使用飞书的方式来去生成电商图片， 然后在电脑操作的时候也可以使用这种方式。其实后面不光是电商的详情图，其实所有的电商行业，你可以选择衣服以及你的产品，都可以使用这种方式来去替换生成你的产品图。 另一种也是个人可以用一些证件照的形式，也可以使用这种方式来去快速生成你的图片，所以这是他这一套下来，其实这一整套的工作流是比较适合让你快速抉除的这样的一个需求的。 好了，以上就是完整的视频内容，如果大家对视频有任何的问题，可以在评论区进行留言，相关的资料也可以通过评论区进行获取。