stitch怎么发布

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

哈喽，大家好，我是 cooper， 我 最近发现啊， google 上了一个新的工具叫 stitch， 用来做像个人简历网站这些比较整合的网站呢，非常方便。我刚刚尝试了一下，用它做了这个个人简历网站，也是 一秒出来，一些整合整合网站也是很快就能出来。这里跟大家分享一下这个工具，它叫 google stitch， 大家去那个上面搜 google stitch， 打开就能用了。如果说你的地区不是在美国，如果在一些什么香港问题上，你可能是要去换一下这个地区才能用啊。有的地区它可能显示是说 stitch is unavailable。 那 个状况 进来之后其实也很简单，就跟对话框对话，他也不需要你去付费什么的。你把，比如说以这个简历为例啊，你把自己的简历要贴在这，把你的东西把一些这种你个人经历贴在这里，对，让他去生成，他就爸爸，他就开始做。如果说你做的不满意，你可以让你，比如说一开始他给我生成英文的，我就让他给我生成中文，比如一开始他没有把我的照片放进去，直接可以让他把这个照片放进去， 他会在一个非常大的画布上去给你进行操作，让你们看到每一版的修改，你要能继续下一步，如果你觉得他设计满意，如果不满意，你可以直接去，比如说你可以在这里框一个框，你可以对，比如说你在这里框一框， 你看你可以针对这个去修改，假设你对任何框不满意，你都可以通过右边这个把它框起来， 它底下就会出现，你可以直接对在那个框里对对话，完成这个修改，一旦你对设计满意的时候，你就可以直接就进入下一步。它这里提供一个功能，就是它你可以直接 preview， 比如说你点那个 new tab， 它就跳出来，等一会你这个网站的预览直接给你做好，你可以去看它包括说移动端的效果，还有比如说 ipad， 它才叫 tabla， 这可能需要再做一些适配 对网页端的一些效果，对，你看可能效果还是挺不错的，就拿那么一个极速响应来说，对你要去做也可以继续，比如说你可以把它分享出去，这个是一个 pro 的 一个链接，这个你看就像一个实际网页的一个东西一样。 如果你要还可以直接看他的后端代码，他直接给你生成，你 copy 下来，你保存进 gmail 的 文件，就可以变成一个网页，你随便再去拖管去部署什么的，就就能做发布了，非常非常简单，真的也不需要一直不需要你有设计的工具什么的，就完全就是一个跟他对话的工具，真的非常方便。我还玩了一个另外一个什么玩法， 给他贴了一张小黄鸭原图，就是这个，我让它生成一个，也是在最后方给它生成一个苹果风的这种网站，它也是立马就能抓到精髓，直接生成这么一个苹果风网站就就也很好玩，换成中文也马上就换了 preview， 你 看它 new tab 也是马上能看到，也是马上能看到它 preview 的 一个效果，包括说在移动端，在手机端都可以。我觉得做网站现在真的是非常的方便， 就 google 不 仅要 find coding， 它还要 find 记载这里，你 excel 还能，比如说去到一些你喜欢的工具，比如说像 fake 嘛？像那个，这可能不做的，我又不做设计。那你还可以直接比如说在那个 i studio 们继续去编辑这个 网站，你看打开了那个 google studio， 你 看它会直接把你的工程给贴到这里来，它会直接默认有个命令，就是说做一个能呈现出这个的 app 或者网站，你都可以去编辑代码，去做更细的那种调节。是，反正它叫 google stitch， 推荐大家去试一下。 google 真的 是太好了，我永远不孝子，永远不孝子，谢谢大家。

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

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

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

来来来，来来来，上一条视频，我发布了 teach 生成前端代码的视频，全网第三万人看过，有些动听。说什么，你不会以为前端只会生成一坨静态的 h d i 代码吧？ 哎呦我去，哥们，我就想问了，你不会以为现在 webcoding 的 工具只能做一坨静态的 h d m i 代码吧？但是今天就专治各种不服。我现在在实体区随便生成一张静态的 ui 界面，然后把它的前端代码导入到 studio 里面， 这里呢，就直接跳转到 stadio 的 界面，然后我们一键发送刚刚粘过来的代码，现在 stadio 就 在建立它的交互界面。 ok 啦，现在咱已经导出啦，这是查看它的前单代码， 然后这里可以实现基础的交互， 我就随便生成了一张 u i 界面的前单代码，导入到 stadio 里面都能实现基础的交互。还有一个更搞笑的评论说， 十年前就有此类的产品，可以啊，哥们，够先进呐，那你那那会用的是 gv 六还是 gv 十？真的是 一个比一个逗。该说不说，现在的 ai 工具，它并不是说把设计或者说是把前端都给替代掉了，而是并岗了， 这就要求我们做产品横向的能力一定要拓展，危机生命还需要发育，让子弹多飞一会，散会。

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

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

有没有需要做自己独立网站的，可以看一下 google 新发布的 sketch。 首先声明一下，我是一点代码都不懂的，但是因为最近在找工作，所以我利用这套工具做了一个自己的个人网站。下面我跟大家分享一下我的工作流。 整个过程呢，其实就两步， sketch 负责页面设计和审美， cursor 负责具体的逻辑和交互。第一步呢，我们先用 sketch 生成股价。首先呢，找到一个你觉得参考价值高的网站 do a sketch， 然后用自然的语言告诉他你需要什么板块， 如果不满意的话呢，就让他重新生成，直到你满意为止。可以看到我这里也生成的非常多。然后我们确定之后 导出，选择一键导出为 zip。 第二步呢，我们用 cursor 注入灵魂，很多人这里会慌，我不会写代码啊。先别急，我们有全知全能的 ai 大 人。首先呢，把你的 html 的 文件拖进 cursor， 接着呢，打开这个 chat 的 对话框，一切豁然开朗，哪里需要修改，直接用自然语言告诉他， 他完全能理解你的意思，并且会帮你做好。这里呢，还有一个小技巧，如果描述了几次他都没有做好，你可以去问 chat， gpt 或者 gmail， 告诉他我想要什么样的交互效果。请告诉我该怎么给 cursor 写提示词。 然后呢，再把大模型给你的提示词复制给 carson， 往往会有意想不到的惊喜。最后呢，我想说，现如今会不会写代码其实一点都不重要，重要的是你如何把你自己的想法翻译出来。

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

谷歌最近更新的这个设计 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。 能给你实时的设计反馈，那这个情绪价值真的直接拉满。 而且我觉得整个页面都很傻瓜式，即使你之前没有接触过设计的相关理论，也可以用它真正的去帮你参与整个设计流程，那感兴趣的小伙伴赶紧去试一下吧！

大家好，欢迎收看本期视频。 最近 google stitch 的 热度非常高，它能通过提示词、图片来快速生成 ui， 以及更完善的原型设计流程，这确实很有意思。我觉得 stitch 确实有它的过人之处。 如果你追求快速构思产出视觉稿或梳理初步的用户流程，或者想把产出内容导入 figma 进一步细化，那么 stitch 确实是个理想的选择。但我觉得我们还需要从另一个角度来看待这个问题。如果你的终极目标不仅仅是做出一张好看的视觉稿，但老实说，如果你想做出真正出色的 u i 和代码， 其实并不一定非要用 stitch 配合 clodops 四点六代码工作流中即可做出极佳 u i， 特别是再配上合适的前端设计技能模块。 要我说的话，目前我最推荐的工作流就是 virant， 为什么呢？因为这个平台的整个工作流非常契合这种需求。你可以安装前端设计技能模块，并在流程中直接启动，进入计划优先模式，在独立工作区对比不同设计方案， 直接在代码中持续迭代，无需在原型与实现间反复切换。而这正是很多人容易忽略的关键点，特别是在讨论 ai 生成 ui 的 时候，好的 ui 不 只是丢句，帮我做个仪表盘， 然后对着深沉的界面发呆。好的 ui 设计层级兼具排版、响应式视觉克制、动效及一致性，让设计契合产品，而非千篇一律的 ai 工业废料。 oppo 四点六搭配前端设计模块最出彩， 不再先在画布上生成设计师后再去重构代码，而是直接在实际的代码库中进行操作。 opus 四点六能够理清项目结构、现有组建和设计方向，并一并考虑到所有的产品约束，而前端设计技能模块就像在此基础上的艺术指导层。 下面我来演示一下我实际的工作流程。首先在 version 中打开项目，然后将模型切换为 cloud office 四点六，接着我会打开技能市场，搜索并安装前端设计技能模块。接下来的设置非常关键， 不要只是安装完模块，然后输入把界面做漂亮点，这样只会做出平平无奇的设计。你要做的是激活输入框中的前端设计技能模块，然后给出明确的设计指导。在构建之前，明确以下三点，能让模块发挥最佳效果。 首先是确定视觉论点，简单来说， ui 的 整体调性应该是怎样的？是高端杂志感？科技风？活泼沉稳？还是紧凑或留白？第二是内容规划，具体包含哪些板块？各自的功能又是什么？ 手凭主视觉辅助板块、细节板块、末尾 c t a 仪表盘、工作区或设置面板，只要契合产品需求即可。第三是交互论点，用哪两三个核心动效来为整体感官定调？ 比如首屏内容的交错显现，或者是吸顶滚动的板块，以及能强化功能可见性的悬停过渡效果。这一点直观重要。因为这样， oppo 四点六就不必再去盲目揣摩什么是优秀的 u i 了， 而是由你直接为这项任务提供一套完整的设计系统。比如在 veterans 中，我会这样写，调用前端设计技能模块，打造一款高端 ai 编程应用落地页 视觉核心点坠内容架构策划首屏全屏布局 信任背书模块工作流详情模块结尾 c t a 转化区交互核心思路，首屏交错入场动效工作流模块吸附效果克制的悬停交互，避免套路化的 sars 卡片设计，首屏视觉要像海报一样吸睛，每个板块只聚焦一个核心视觉点， 这种提示词简直是神来之笔，因为设计经验本身就在引导模型走对方向，它更倾向于产出构图强烈、层级清晰、文案经验的作品。视觉重心更少，卡片堆砌更少，随机配色及设计感动笑， 它还能精准避开那些会毁掉 ai、 生成 ui 雷区，如平庸卡片、网格、品牌感缺失及杂乱手屏设计，以及那些大同小异的板块， 这确实是一个很大的优势。我会先进入规划模式，这是我青睐 verdant 的 另一个原因。与其让模型一上来就胡乱堆砌代码，我可以让 opus 四点六先理清 u i 结构， 我会让它规划好页面布局、组建拆解响应式策略、图片应用动画方案以及排版层级。 只要规划方案没问题，我点击确认就可以让它开始构建了。这就是它优于很多纯设计生成方案的地方。如果我对初稿不满意，我没必要全盘否定，更不需要从头再来。 我可以直接给 opus 四点六下指令，去掉卡片式设计，让手屏视觉以图片为主，把文案缩减百分之三十， 换一个更沉稳的强调色，让移动端布局更紧凑，设计意图更明确，品牌感太不明显了。将产品名称设为最突出的视觉重心，由于它直接基于真实的前端环境修改，能直接在代码中生效，而非仅仅生成一张漂亮的静态效果图。 说实话，这确实非常惊艳。而 version 进一步放大了这一优势，这得益于它支持工作区和并行任务。 此外，这种工作流还能引导你打磨 u i 细节，让你实时发挥前端技能，而不是等三小时后才想起来。 因此，如果我想对比不同的设计方案，我可以同时开启多个隔离工作区，让 open state 六针对同一个需求给出不同的设计方案。一个工作区可以走克制的排版设计风，另一个可以尝试更明快的初创公司风格。还有一个可以采用更侧重功能性的应用美学。 然后我对比各个版本的差异，保留其中最棒的想法，把我想要的部分合并进来。本质是多版本并行思路，并应用在你真实仓库中的前端代码上。所以就这一点而言，没错。 stitch 适合发散构思，但 verdant 配合 open spiriter juni 配合前端设计技能模块，成品感更强，更接近交付标准。当然，我并不是说 stitch 不好用，若想快速尝试想法，它仍有价值。确定视觉风格或需要轻量级设计画布，但如果你已经进入了应用开发阶段，且非常在意最终的落地效果， 那 opus 四点六这条路线绝对是上佳之选。接下来我详细聊聊如何在实操中配置这个前端设计技能模块。每次我都会设定几条固定的准则，首屏不要用那种千篇一律的 sars 卡片，网格默认不使用常规的 hero 卡片， 主视觉图要全屏展示，或在视觉上占据绝对主导。全站字体种类最多不超过两种，除非有完善的设计规范，否则只用一种强调色。首屏要有海报般的冲击力，而非像文档般枯燥乏味，确保每个模块只聚焦于一个核心功能。 要设定明确的视觉重心，而非随意堆砌毫无作用的装饰性渐变。加入两三个关键动效，胜过十个多余的微交互。 接着我还会明确 ai 该使用哪类产品文案。如果是落地页文案，就要更具产品营销感。如果是仪表盘界面，就采用功能性文案， 这一点直观重要，因为要让 ai 深层的界面显得一眼假。简单做法是写出落地页风格的营销话术在严肃的产品界面里，所以这也是我会提前配置好的环节。 如果你没在用 verdant， 在 kill c l i 中也能实现类似的效果。 kill c l i 中我会准备可附用的前端设计提示词或规则，然后根据这些指引针对代码库运行。 opus 四点六， 这完全行得通。 kilo 依然是极佳的终端首选方案。如果你习惯这种工作流，只是手动操作的环节会稍多一些。而在 verdant 中，有了技能市场和直接在工作流中激活技能的能力，让整个过程更利落。接着简单说下 cloak code， 它同样能胜任。 如果你主力使用 cloud code， 可以 直接在里面保存前端设计技能模块或规则文件，然后让 oppo 四点六重新设计页面或整个前端流程， 这种方案同样可行。我个人觉得在目前这个特定场景下， verdant 让整个安装、激活以及并行探索的流程变得更加清晰直观。那么我对这一切的最终评价是什么呢？谷歌的判断，没错，人们确实需要 ai 辅助 ui 设计， 这也正是 stitch 诞生的初衷。但我认为更重要的一点是，想要做出顶级的 ui， 不 再需要专门的 ai 设计画布了。只要有强大的编程智能体，配合 clodopus 四点六模型， 加上设计精良的前端设计能力，为模型提供实际的审美指导，你得到的不仅是好看的界面，更是能直接上线的产品。依我看，这才是最有价值的地方，因为最终目的不是为了对着原型图孤芳自赏，而是要把产品真正落地。 所以，如果只是想快速构思，用 stitch 没问题，但若要论前端代码的真实落地， verdant 配合 opus 四点六，再加上前端设计进的模块，效果简直绝了。总的来说，整套流程非常出色。大家有什么想法？欢迎在我们下期再见，下次见，拜拜！

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

谷歌推出詹姆奶驱动的 ai 设计工具 stitch， 简化前端开发，革新设计行业。 stitch 升级为 ai 原声 web 设计平台，更智能、快速、强大创作能力前所未有。 stitch 重大升级想法，实现更简单，设计效率极大提升，创意实现更轻松。 stitch 提供 ai 原声画布、图像代码、文本并行处理，彻底改变设计流程。 stitch 可替换 logo 评估设计生成 prd， 构建落地页，功能强大。 stitch 引入语音 web 设计，免提操作，实时反馈，高效获取设计灵感。 stitch 展示屏幕提供即时原型自动生成，下一步灵活管理品牌规则，免费体验。 stitch 只需谷歌账户，开启你的 ai 设计之旅。 stitch 重大更新，重新设计的 web 设计平台正式亮相，更智能高效。 stitch 界面换新 ai 原声画布，支持 ai 设计系统，提供全面创作空间。 stitch 的 ai 原生画布配备代理管理器，协同完成任务，大幅提升效率。 stitch 新增即时原型功能， ai 自动生成界面，快速预览交互，大幅缩短原型设计周期。 switch 提供强大的生成、修改和预览功能，设计效率倍增，确保最佳呈现。 ai 原生画布可同时处理代码、图像和文本，统一管理设计资源，提高效率。代理管理器方便跟踪项目进度，清晰了解每个代理状态，确保项目按计划进行， 无需代码。 stitch 即时预览交互流程， ai 自动生成下一步界面，简化原型设计。 stitch 支持 gemini live agent 语音控制， ai 设计，实时调整方案，实现语音交互。 自定义主题、颜色、字体等细节导入网站设计，一键复刻风格，高效创建个性界面。谷歌推出 ai 原声 web 设计平台 stitch， 简化高保真设计，自然语言，轻松迭代和构建原型。关注全球 ai 速递，获取更多 ai 前沿资讯。

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

现在找工作大家都用一样的模板， hr 很 难记住，你不妨把简历做成一个可交互的网页，一起发过去。你可能会觉得这也太难了，但是谷歌最近更新的 switch， 一 切都不再是问题。今天用两分钟教你制作个人网页， 先确认需要制作的网页都有哪些内容组成，找份简历拆解一下，我们可以看到一个简历分成这些部分，个人信息、经历、 技能，再加上网站需要的首页，我们就确认了需要制作的所有模块。接下来我们一步一步的完成这些模块，不要想着一下子做完，尤其是首页，会定下后续的风格基调，大家可以多试几版，确认了美术风格再往下做。 打开 stitch， 把项目类型从 app 切换成外部，然后输入首页的提示词，在提示词上填入自己想要的内容，我们就可以得到一张首屏界面。除了左右分蓝布局，你还可以试着做一下左侧边蓝布局，海报主视觉首页布局， 知道你彻底满意首页确认之后，我们接着做个人信息页，输入下面的提示词，这里最关键的一点是，提示词里一定要强调一句，整体风格保持统一， 保持一致的 ui 设计，这样做出来的页面才不会一张一个模样。接下来技能和作品页也按照同样的方法生成，把内容替换成你自己的技能，项目、案例、经历就可以了。 最后再补上联系页面，有什么联系方式就填什么，等上述的页面都生成好，把它们下载下来，放进一个统一的文件夹里，再用翠把这些页面拼接起来， 增加页面该有的交互功能，这样一个真正能拿去展示的简历网页就做好了。好了，本期的教程就到此为止了，所有提示词都打包在了文档里，需要的话关注私信我，我们下期再见。拜拜。

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

欢迎欣赏我的灵魂画技，而这是 google stitch 用它生成的网页。那今天我要分享的是，零基础的小白怎么用 google stitch 设计出专业又好看的网站和 app？ 之前你可能也听说过它，但最近谷歌又给它来了一版重磅更新，发布日的当天， fikma 的 股价直接跌了不少。 ok， 那 怎么用 google switch 从零到一生成一版设计？第一种办法是纯文字生成，那这里我跟他描述的是，我想要生成一款可以用来匹配活动的软件，运作逻辑有一点点像 dating app， 他 就给我生成了这样的效果。想抄作业的朋友可以直接看这里，这里有官方提示词的参考格式， 特定的风格提示词，还有优秀网站的提示词。参考网站，你可以直接一键复制粘贴到 google speech 里面，出来的效果是不是还不错？ 那第二种生成方式是丢链接，那我这里直接把苹果的链接丢入到出入框里，让他用同样的风格给卫龙辣条设计一版官网设计。 他答，这就是生成的效果，是不是还蛮接近的？但是又可以看出跟参考链接还是有区别，我觉得谷歌有可能是刻意的保持这种区别来规避抄袭的问题。 那第三种生成方式就很适合像我这种灵魂画手，把你的草图丢给他，让他生成正式版的网页设计，我觉得这也很适合，有时候脑子里有想法，但是嘴巴就是表达不出来的情况， 出来的效果虽然不是说最完美，但我觉得也已经很完整了。那我在推特上看到了一组对比图，我在这里做了一次小小的验证，我把铁丝的提示词和参考图扒下来丢给他，让他再生成一版， 但这个效果吧，说实话差距还是蛮大的。这里有可能是我的提示词不完整，但我觉得更重要的是对 google switch 要一个合理的期待。 它的完成度其实已经很不错了，但也没有必要过度的去神话它。那生成设计只是第一步，重点是修改修改再修改。这次 google switch 更新的亮点之一也是让它更容易修改了它。生成一版设计之后，我们其实还可以再探新点，让它多生成几版给我们挑选和比较。 确定完大致的方向之后，我们可以再去调整颜色和字体。这次更新的亮点之一就是他在每次生成完设计之后，都会同时生成一版设计系统。他厉害的地方在于，你可以直接点击他，然后对颜色进行手动调整。 如果我对配色方案满意了，我可以再让他把新的设计系统用到所有的页面设计上， 这一点我觉得非常的方便。而且 google switch 生成的页面一般都是英文版本，这里我们还可以直接让他把所有的页面都改成中文版。 那调整完大方向，现在我想要对局部的细节进行修改，我可以直接点击想要修改的板块，然后修改文字，或者交给 ai， 让他去给我做进一步的调整。 修改完之后，现在来到最后一步，那怎么把它变成真正的网页和 app？ 这里 google switch 可以 导出不同格式的文件来进行后续的操作。 如果你是设计师，对设计的要求比较高，你可以一键导出文件到 figma， 然后再在 figma 里面去做进一步的调整和修改。那如果我现在对设计满意了，我就是想让它快点变成一个可以用起来的网页或者 app。 我 可以直接导出一个压缩文件，然后再把它导入到 ai agent 里面。 这个文件就包含了每个页面的 html 截图，还有一个 design md 文件。这个文件里他会把设计的规范和要求都罗列出来，这样在后续的产品搭建中，他就会去遵循这些设计规范。 那作为 google 的 ai 工具，它还打通了到 google ai studio 的 工作流，你可以直接导出到 ai studio 里面去做后续的工作。我体验下来确实觉得很丝滑，真的就直接变成了一个可以用的软件。 ok， 那 今天的分享就到这里，我是 rami， 我 们下次再见。