stitch怎么自己编辑元素

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

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

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

这是星流的界面这是 loit 的 界面。这是星流的功能这是 loit 的 功能。没错，他们两个相似指数高达百分之九十九。如果你今天用不了 loit， 那 我将用一条保姆级别教程，告诉你星流改图能有多自由。首先我们打开浏览器搜星流，打开星流的主页， 底下有灵感发现包含了品牌设计、海报、广告、插画、 ui 各种的，有你喜欢的，你就点开看一下，里面就有对应的提示词，我一般就是直接新建项目，右边就是它的智能 agent， 你 可以和它对话，也可以直接上传我们自己的图。在左边的无边画布里面， 一张复杂的海报，没有 psd 原文件。在星流里，你只需要点击编辑元素，整张图片就被拆分成了独立的图层，文字、图案、背景全部分开。如果图片不满意，还可以单独选中，在旁边的对话框修改， 不用跳转到其他的软件，并且你能看到它会自动找到和海报上一样的字体。你可以直接编辑文字，可以像在 ps 里那样，任意的拖动， 调整大小，换字体，精准排版。如果不需要改元素，海报也是可以直接改文字的，点编辑文字就能直接打字，替换原来的字体，样式、颜色全部保留，再也不用到处找字体重新做了。 之前有朋友反映编辑文字后的图片变模糊了，其实你点一下它的 h d 放大功能，就能变成高清图了。 平时我们做好设计需要展示效果，那它的样机功能一定要用起来，找一个自己想要的风格的图，让它把图片变空白，再点变样机，就可以随意把设计图拖到包装盒、手机壳或者广告牌上，自动匹配透视和光影， 一键产出高大上的展示图，从此实现样机自由。并且它的操作也和 lowwatt 一 样，完全就是指哪打哪，可以实现精准编辑，尤其适合有多个元素需要组合的情况，选中以后它就能智能识别。 而且星流里面也内置了多个主流的图片和视频模型，做好图片设计以后，我们可以直接点视频模型，说句话就能实现图片转视频的效果，不用跳转其他软件了。 所以无论是改稿、改文字还是合成图片做样机做视频，星流完成的都非常不错。而且星流和 lowit 本来就是一家公司，但是它不需要借助其他的工具，甚至不需要下载 网页端就可以直接用，所以感兴趣的朋友你们快去试试吧！那本期视频就到这里了，我是苏苏，欢迎大家关注我主页，还有更多的 ai 实用小技巧可以去看看哦！

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

我惊奇的发现 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 的 方式把原型图做出来。今天的分享就到这里啦，希望对你有所帮助。

谷歌四 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 仍然是免费使用的，不过一天只能提问五十次，快去试试吧！

很多人第一次用 speech 会卡在一个地方，提示词到底该怎么写？我后来总结，其实可以用一个很简单的结构来解决，第一，你要先说清楚这是一个什么产品，属于什么行业，给谁使用，比如一个面向大学生的英语学习 app。 第二， 明确这是一个什么页面，是首页、列表页，还是详情页。第三，把这个页面的内容讲清楚，有没有搜索框，有没有进度条，有哪些核心信息。 第四，再补一句风格，比如简洁、干净，或者偏专业，有信任感。当你把这四点讲清楚的时候，其实你已经在做一件事， 定义设计的边界。 stitch 在 这个过程中更像是一个执行工具，你给的信息越具体，它的结果就越稳定。 所以总结一句话，提示词不是在说做什么页面，而是在说明这个页面应该满足什么条件。但最后有一点很重要，不要指望一句提示词就能得到最终结果。如同 stitch 的 产品设计理念一样，创造更加设计的最佳方法是不断迭代，而不是追求完美的初始方案。 keep educating， keep creating， 继续构思，继续创造。如果你觉得我的分享有价值，请点个赞关注我们。

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

谷歌出的 ai 设计工具 stitch 迎来了一个巨大的更新，消除了设计稿与生产代码之间的断层，它不仅仅是生成代码，而是编织代码。拿我们做独立站来说，就是 你不用设计师出稿，你也不用懂设计，只要甩给他一个网址， ai 就 能瞬间秒扣全套视觉风格配色字体，一步到位。这跟我上节视频讲的如何去复刻同行的？嗯，同行的网站是一样的道理，就是可以帮你轻松地复刻同行的一个网页。嗯，因为我习惯了用 gmail 了，所以如果你们想试一下这个 stitch， 也可以试一试啊。 其实他们俩异曲同工，因为他也是支持最新的就奈三模型的。他怎么讲呢，他不是简单的绘图，他是带脑子的设计。 嗯，像手机、 pad 网页适配呢，他一键可以全部搞定，你甚至可以直接跟他对话，像用语音助手一样指挥他设计想要什么功能，动动嘴就行，交互性特别强。设计完了呢，可以直接导出代码，还有其他格式的，你想导出也行。像数据库呢，登录逻辑， ai 统统帮你写好了， 真正的是他，目前竟然是免费的。所以说，程序员或者是个人创业者，想做独立站的，赶紧去试一试。还是那句话， ai 工具， 嗯，有很多，你可以选一个适合你自己的，像我就是这么耐的重度使用者，我就喜欢用这么耐。嗯，这个工具我是不会想去用的啊，我只给大家介绍一下。所以说呢，工具好不好用呢，在于我们怎么去用它。如果想第一时间解锁全球顶尖 ai 网页工具的，点个赞，关注我。

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

最近 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 二点零亲手砸了专业设计师的饭碗， figma 一 家这两天直接跌没了百分之十二。 u i 设计的底层逻辑从今天起，彻底变天了。以前啊，是你提具体需求，让设计师来构思出图。现在只要你有个想法， ai 呢，就能直接出高保真成品。 是在为小白翻身而兴奋，还是在为自己的技能贬值而焦虑呢？以前做设计是手工拼组建，现在呢，是 vibesign。 别管你是产品经理还是独立开发者，这套二零二六年最前沿的工作流，我教你三步，直接复刻，看完就能用。建议点赞、收藏、分享给朋友哦。 第一步，手绘草图，秒变高保真，别再折腾什么组建库啦，直接把你随手画的相框图拍照扔进 stitch， 瞬间生成带交互带完整设计系统的 south landing page。 这种从制作者到审阅者的降维，打击效率提升不止十倍。 第二步，利用 voice canvas 实时调优，你只需要对着屏幕说，换个暗色系，给我三种不同的导航布局。以前设计师呢，要改大半天，现在 ai 啊，实时改完，直接点击 play 就 能跑交互原型逻辑跳转全自动。 第三步，打通设计到代码的闭环，这也是最硬核的王炸。 stitch 二点零呢，只是 design markdown 协议，通过 m c p server 可以 直接接入 cloud code codex。 以后啊，设计稿不再是图纸，而是直接流入开发的结构化资产。中间那层人肉翻译的前端工作，正在被 ai 彻底吃掉。 这种能让普通人直接绕过专业门槛的降维神器，强烈建议你啊，先点赞收藏起来。二零二六年， ai 的 路径非常清晰，先吃代码，再吃设计。 转发给你身边做设计、做产品，做开发的朋友，帮他提前啊，避开这个坑。 ai 时代，拼呐，从来不是谁的手快，而是谁的方向更准。我已经把 stitch 二点零的官方入口和那份 design markdown 协议实战手册整理好了， 感兴趣的可以评论区聊聊哦！关注我，我是陈凡，带你了解更多能落地的 ai 商业玩法。

我去，兄弟们，成了终，终于成了，总共用 ai 一个亿，赚两万块钱，请媳妇吃大餐去， ok， 然后我们来说一下啊，首先呢，我们先通过记迷你 创建一些智能体，首先，然后把这些信息传入到自己生成设计稿，再传到 ai studio 生成出版的代码啊，然后我们可以添加一些自己想要的其他的东西啊， 然后导入到 github， 然后再用 menu 子润色一下，这个基础的代码就已经生成了。然后呢，我们再通过 cloud code 生成一个完整的架构， 这个架构包含前后端，然后包括部署，然后现在就是一个基础的样子。然后呢，我们接下来通过 os code 编辑，然后通过我们国产大模型质谱四点七，然后再做一些完善， 也就是说把架构变成真实的代码， ok， 现在代码就已经全部完成了。然后呢，给大家看一下，这是大概的样子， ok， 然后这有可以选做，然后有我的，这里面有我的预约学习周报，张强，还有一些设置， ok， 还有一些消息， ok， 然后还有一些积分商城，就是我们我选做获得的积分可以用来换取一些东西。 接下来我会进行一个 ai 计划，计划大家有什么想要制作的 app 可以 评论，在评论区我会抽一个点赞最高的应用，每周直播开发这个新应用，然后被吃掉的用户可以获得这个应用的百分之十的原始收益权，快把你的想法留在评论区吧。

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

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

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

最近这个谷歌的这个 steam 就是 ai 生成这个 ui 设计文件的这个工具，现在更新了一个最新版本，然后它的功能呢非常的强大， 然后呢今天我跟大家演示一下，这是呢它的这个官网，然后呢可能你登录的时候需要一些科学的方式来上网，然后呢我们在这里呢我们就直接输入一段提示词，比如说我们 输入一段设计一个中文预约附近上门帮自己遛狗的 app， 然后呢模型我们就先点这个界面三点零的这个 flash， 然后这底下呢它可以显示外部和移动端，那我们这里显示移动端，然后点深层，然后我们这里先登录一下 这个是这样子的，然后它进入还是进入到这样的一个白色的一个页面，然后我们继续把这段话输入进去，然后点击这个回车， 这样我们就看到这个右边它就在进行这个分析，然后对我们这段其实是进行这个具体的这个需求的一个分析的过程。 很快它就出了一个简单的一个一个大的一个 p、 r、 d 的 一个介绍，就是功能的介绍，就是说它分来几个板块，比如说它分首页发现展示附近的喂食的这个喂养师，然后支持这个价格筛选呢距离筛选，然后有这个服务详情，还有这个 预约的这个界面，还有这个订单的管理，它就大概生成了几个主要的这个核心页面，然后我们看到这边它首先是出了一个一个组建规范，然后呢右边就是依次生成的四个的核心页面，然后在生成过程中，好，我们现在看到第一个页面，这个第一个页面应该是， 应该是预约界面，你看到没有？预约界面就是这个选择这个这个喂养师之后，然后你进行这个支付的一个界面，然后其他页面也出来，然后这个是首页， 首页的话，然后他这展示的就是说一个版本，然后呢下面的是是一个分类，然后下面就是一些这个喂养师的一个列表，然后每个卡片上面都有这个 名字啊，他的标签呢，还有这个距离和这个价格。然后这个呢就是这个点击之后这个列表之后，这个驯养师的这个他的详情页介绍他的这个服务的一个过程的一个页面，预约确认的页面，然后呢这个是什么订单的这个页面， 所以我们可以看到在他这个深层的这个理解的这个对业务的分析的过程我觉得还是挺准的，基本上他满足了一个整个这个 app 的 一个大的一个功能的框架，但是这个风格不一定是非常好看的，他是觉得一个 demo 的 一个概念搞的话，我觉得是非常 ok 了，给他丢个建议给他， 我希望他更符合中国化的设计风格。嗯，打过去看看， ok， 他 这边也说出他的修改的一些思路， 比如说布局采用这种典型的金刚漆快速入口，这个确实符合这个我们的这个淘宝啊，美团的这种框架的这个首页的这种布局， 然后强化附近突出距离和实名认证，增加信任感，然后视觉元素上引引，引入了这个视觉元素，然后引入符合国内审美的这个色彩搭配适应，适当的增加这个页面的信息密度，保持 把这个风格改的审美更加符合国内。然后呢它的信息密度更大一点，这个这个确实很适合很抓住中国的 app 的 这种现有的这种布局的这种方式。国内的这种电商这种服务的 app， 它的信息都是密度很高的，确实它理解到了，这样一看，我觉得它修改的效果确实就非常有中国化了，我觉得是直接就是一个非常 接近于国内的这种 app 的 这种框架的感觉了，因为前面这个更更像一个欧美的感觉，这种大圆角啊，这种大卡片、大流白的效果，这个他就比较紧凑的。然后他金刚漆改成了这种像这种支付宝啊，或者说像美团的这种这种金刚漆的做法，我觉得他还是理解力还是很 ok 的。 那我们现在再做个修改，我们希望 出一个深夜深色的版本， ok， 他 现在就在做这个首页进行这个重新的生产，我们看看他的效果， ok， 他 首先还是还是出了一个黑色的一个组建的规范。 ok， 这个深色的版本就出来了，我感觉一下这个效果非常的漂亮，基本上是我觉得已经达到了百分之七十的效果。如果拿这个再去修改一下，我觉得基本上就是就是一个可以落地的版本了。然后我看一下它的色彩的搭配啊，包括这个这个配图啊，我觉得都是非常好的。 那它这个同时呢还可以支持这个一键就做这个 demo 的 预览，我们我们来预览一下看看， 对，我们就发现它已经可以链接了，对， 它就自动可以把这个圆形可以链接过来。然后呢我们让它构思新页面，我们看看，我们来搞个服务分类列表吧，帮它 喂哦，它是这个六谷陪玩这个类别，下面它有做的一个服务列表，我觉得它基本上它很智能的就能理解这个 app 的 各种的业务的构思和构建，我觉得挺实用的。同时它这个也支持这个构建规范的这个修改可以随时调成它的颜色啊， 包括他还有一些设计的这个规则，你都可以直接在这里通过通过这个改这个提示词也可以啊，或者直接改他的模板也是 ok 的， 包括他的深深摩擦都可以进行修改。然后他的这个设计出来的这个文件呢，你同时还可以导出不同的格式，比如说可以导出这个我们常用的斐克码，直接可以导出来。 然后呢也可以连接这个 m、 c、 p， 直接可以放到这个呃，其他的一些 ai 编程的这个工具里面去说，整体来说，我觉得它的这种 ai 的 智能化已经是非常的强大了。对于这个需求啊，对这个文本的理解啊， 包括它对整个互联网的产品的这个思维啊，这种框架能量，我觉得都是非常优秀的，那我觉得非常值得大家去试一试，记得点赞关注哦。