google 这套组合拳简直是王炸，太炸裂了，以前至少四个人才能干完的活，现在一个人用这套 ai 工具就能全包。从创意直接落地成产品文档，再到 ui 设计，最后做成完整产品，全流程 ai 一 站式搞定，效率直接拉满。 这是我做的实战案例，带大家看怎么一步搞定复杂 app。 首先打开 google stitch 官网，选择刚上线的 id 功能，把我提前写好的产品构思丢进去，看看 ai 能直接生成什么样的完整产品。 稍等片刻， ai 直接给出了三套不同风格的完整方案。这次我全都要直接让 ai 把三个方案全部落地生成，顺便做个直观对比， ai 直接生成了三份完整且超详细的产品文档，功能说明、 app 风格设计、字体规范，全都写的明明白白，专业度直接拉满。 接下来我们直接让 ai 生成 ui， 没过多久，他就按照产品文档输出了三套不同风格的 ui 界面，大家可以直观对比一下效果。 我直接选最后这套，点击右上角的 export 按钮，选择 ai studio 开始构建，页面会自动跳转到 google ai studio 界面，很快就生成了带交互功能的完整 app。 最后稍微微调优化一下，一款创意满满的 app 就 能快速上线了。 从一个灵感创意到可上线的完整产品，全程只用了十几分钟就彻底落地，你赶快去尝试一下吧！好啦，你学会了吗？关注我，学习更多 ai 编程小技巧！
粉丝3731获赞1.2万
相关视频
07:34查看AI文稿AI文稿今天给大家做一期谷歌 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 原声工具，有任何问题直接在评论区跟我留言。好的，我们今天的视频就这样，希望大家喜欢，我们下期再见。
6836瑞哥那
03:27查看AI文稿AI文稿这可能是全网第一个从零不需要写一行代码就能做出一款真正原声 app 的 最佳实 践。花费了整整两个月的时间与探索，我终于跑通了整个流程。不管你是经验丰富的工程师，还是零基础的小白，只要你跟着我的步骤，就能在半小时内做出一款运行在手机上的原声 app， 不是 那种浏览器里面。 h 五，今天我就要把这些经验全部分享给你。 第一步，打开 stage， 选择三 pro 模型。这里默认使用的是谷歌的界面，直接用中文和他对话，告诉他你要做一个什么样的 app。 比如我这里跟他说， 我要做一款可以拍照自动识别有效期的 app。 ai 迅速给出了几套极简主义方案的设计稿， 注意看这些卡片的间距、光影、圆角，全是严格遵循 google material 三设计规范的。 你可以对单张图片进行局部修改，也是直接用自然语言即可，直到修改到满意为止。注意尽量多花一些时间，免得再在代码层面修改调整会非常麻烦。 第二步，定稿后一键导出。这里 ai 已经把刚才的设计图转化成可以被机器阅读的 html 代码和 png 格式的效果图。以前这部需要 ui 和前端反复沟通，现在秒集完成。 第三步，打开 anti gravity， 建立一个项目工程。注意这里最好把前端后端分开，方便 ai 对 你的项目工程有一个结构认知， 建立 front end 和 back end 目录，再在 front end 里建立 design 和 app 目录，直接把导出的代码和图片放置在 design 目录下， 并给 demo 三 pro 下达指令。请参照这套设计稿效果，使用 flight 技术帮我生成 app 代码， 代码放置在 app 目录下，此时 ai 进入自动驾驶模式，他在后台疯狂调用接口写大的代码配置环境，你不需要懂什么叫组建，什么叫状态管理。 ai 就 像一个拥有十年经验的工程师正在帮你敲代码。 为什么要让 ai 使用 flat 技术写代码呢？请看这里。 ai 生成的代码包含 ios、 安卓、 mac、 windows、 web， 也就是一次性生成的几乎包含所有平台的 app 代码，简直太爽了！第四步， 打开 mac 上的 simulata 手机模拟器，输入一串 app 启动的代码，现在就让我屏住呼吸，等待 mac 原声模拟器，看，这不是网页，而是真正的 flat 原声 app 倒计时的逻辑，卡片的脉冲动效，全都完美的复刻了设计稿。当然，你也可以连接手机，直接让刚开发好的热乎乎的 app 装进你的手机里运行， 抛弃那种一句提示词就能开发出一个产品的幻想，那些都只是玩具。这种从想法到成品的全流程自动开发，我花了两个月才实践出来的最佳路径。如果你觉得有用， 请帮我点赞关注，抄作业过程当中呢？遇到任何问题，请在评论区留言，我会一一解答。
1.2万像素键盘手
01:41查看AI文稿AI文稿大家好，今天我们使用 stitch 加 anti gravity， 不 敲银行代码完成一个 app 项目。首先我们打开 stitch， 选择三点一 pro 模型， 输入我们想设计的页面提示词，点击发送，随后进入画布页面，等待几分钟生成完毕，看下效果。仔细检查设计图，如果有问题就在这里修改好，不然后面代码生成之后改起来就相对复杂了。 然后我们将设计图全选右上角导出，选择点 zip， 设计图就下载到本地了。 接下来前往官网安装 anti gravity。 下一步下一步下一步 第一步，导入配置，我们直接下一步。第二步，配置主题第三步， ai 模式选择严格模式，所有操作必须经过人工审核审核，驱动开发大部分操作会请求人工审核，官方推荐使用这种模式， ai 驱动开发会自动执行大部分操作，高风险除外。自定义配置，这次我们使用 ai 驱动模式测试能不能一次跑通配置键盘和扩展，直接下一步。然后登录我们的 google 账号，很多同学卡在这里，我会将我的解决办法单独做个视频，我们在这里创建项目目录， app 和 design， 将我们输入提示词，让 ai 开始生成代码 生成完毕，让我们打开 android studio 验证一下，还挺顺利的，没有报错，完美运行，感谢观看！
8暮晓
01:43查看AI文稿AI文稿一分钟教会您如何用 stitch 生成这种高质量的用爱并导入到 fk 码的全流程。来到 stitch， 首先切换模式，模式大概有四个，我们今天进行演示的是第一个和第三个，第一个可将设计导出到 fk 码， 第三个优先保证最高质量与推理能力。下面我们来设计一个音乐 app 首页，输入我们提前准备好的咒语。下面我们来设计一个音乐 app 首页，让模型进行处理。 这是用的第一个模式生成的界面，我们看到页面样式相对粗糙，且有的中文，有的英文，虽然可以直接到出道 figma 后期修改工作量大，下面我用第三个模式三点零 pro 再生成试试。 我们可以看到第二次生成的页面，从功能、风格、视觉都相对统一，效果更好。下面我们可以看看怎么 stitch 导入到 fake 码。使用第一种，如果用发色模型可以直接点击默认，点击复制到 fake 码即可。 可以看到所有元素都是可以编辑使用的，图标也是矢量的。若用的是三点零 pro 的 模型生成的界面，可以通过点击末点击查看代码， 点击复制代码，来到飞格码中，找到插件 html 处理载引，然后把刚刚复制的 html 粘贴到输入框中， 再点击运行，等一会儿页面就可以完美生成可编辑的页面。现在看这个页面也是可以编辑的啦！喜欢这个教程的宝子们记得点赞加关注哦！
365月半AI酱
03:17查看AI文稿AI文稿挑战不写代码，上线一个小程序第四期使用 vsco 加抠拍了加小程序插件，还原设计稿首页，首先在 vsco 的 插件市场中找到抠拍了并安装，安装完编辑器右边就有对话框了，您可以选择多种模型支持。 同样的，在插件市场搜索安装小程序开发工具，安装完我们就可以召唤模拟器了。然后打开 steam， 复制设计稿代码， 到 co pilot 的 对话框中输入提示词，接着看看我们要几轮对话才能完成这个页面。
72T站coder
00:28139fei的AI说
01:23查看AI文稿AI文稿很多人第一次用 speech 会卡在一个地方，提示词到底该怎么写？我后来总结，其实可以用一个很简单的结构来解决，第一，你要先说清楚这是一个什么产品，属于什么行业，给谁使用，比如一个面向大学生的英语学习 app。 第二， 明确这是一个什么页面，是首页、列表页，还是详情页。第三，把这个页面的内容讲清楚，有没有搜索框，有没有进度条，有哪些核心信息。 第四，再补一句风格，比如简洁、干净，或者偏专业，有信任感。当你把这四点讲清楚的时候，其实你已经在做一件事， 定义设计的边界。 stitch 在 这个过程中更像是一个执行工具，你给的信息越具体，它的结果就越稳定。 所以总结一句话，提示词不是在说做什么页面，而是在说明这个页面应该满足什么条件。但最后有一点很重要，不要指望一句提示词就能得到最终结果。如同 stitch 的 产品设计理念一样，创造更加设计的最佳方法是不断迭代，而不是追求完美的初始方案。 keep educating， keep creating， 继续构思，继续创造。如果你觉得我的分享有价值，请点个赞关注我们。
352廖尔摩斯设计工作室
01:01查看AI文稿AI文稿当你在 google 前意外加上 labs 并点开左上角的 experiments 时，你会发现这里陈列着谷歌最前沿尚未正式发布的 ai 应用。 接着，你找到了其中的 stitch 工具，将我提供的提示词输入进去，让它设计一款食物卡路里识别 app 的 ui。 令人惊喜的是，它立刻生成了一整套完整的应用界面。注意，不是单个页面，而是整套 ui。 之后你按下 ctrl 加 a 全选这些设计，又不经意间点击了右上角的三个点，发现这里竟支持导出。冷静下来后，你点击右下角的导出到 ai studio， 再轻轻点选下一步。 十分钟后，你惊讶地看到它已经依据效果图自动将整个 app 开发完成，界面与设计图完全一致。而最令人惊叹的是，右上角还提供了一键部署功能，这效率实在强大。接下来，我们一起看看实际效果吧！
222沉默聊科技
00:33查看AI文稿AI文稿看好了兄弟们，你们都在找的 state 二点零，我给你们找到了安卓、苹果、鸿蒙电脑都是可以使用的，下面火速分享给大家。 首先在我视频右下角分享键分享复制链接，然后要有这个没有的话去安装一个，打开之后我们点允许粘贴这里就会弹出一个包，如果没有弹出，我们就去网址里面输入我们的鱼头 保护，一样也是会弹出来的。弹出来之后我们点进去找到软件合集，取消全选，找到我们的包，点击点保存就可以了。
93yxh
01:41查看AI文稿AI文稿谷歌 stitch ai 设计工具全攻略，一句话打造专业 u i 设计奇迹还在为 u i 设计苦恼，谷歌全新 stitch ai 设计工具来袭，输入一句话就能生成专业 u i 设计。下面是从注册到初稿的保姆级教程， 零基础也能成设计大神！一、极速注册，三十秒上手打开浏览器，搜索 google street i diy， 进入官方平台，用谷歌账号一键登录，没有账号免费注册。登录后进入工作台，界面简洁，操作无门槛。二、 精准输入需求，按行业加场景、加模块、加风格、加适配公式，写提示词，能让设计效果最佳，如电商类、工具类、官网类都有对应势力。三、 上传草稿有手绘草稿，可让设计更契合想法。点击上传草稿，选 j p g p n g 格式图片，标记重点区域， 搭配详细文字提示。四、精细设置参数生成设计前合理设置参数，避免反复修改，包括选择设备类型，移动端或 pc 端设计风格预设或自定义 组建偏好，可保存规范。五、高效生成与优化点击生成设计，一到两分钟产出三到五套方案，选心仪方案，编辑优化，如颜色优化、布局调整、 组建细化。六、快速导出交付生成满意设计后，可按需导出高清图片，用于展示宣传设计员文件，用于二次编辑交互原型，用于沟通提案。适用人群，设计师、电商创业者、 个人项目爱好者话题标签， ai 设计教程谷歌 stitch ui 设计干货，设计师效率神器，零基础做设计！
118原见
01:13查看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 工作流式操过程，记得点赞、关注、收藏，我是大木，咱们下期见！
2140大木AI设计
01:57查看AI文稿AI文稿找到了一个笨办法，能够把 figma 里头的图经过二次导手，再导回 figma 里头编辑。 嗯，首先是就生成完之后，这边会有一个嗯播放这个按钮，可以变成这这个界面，就是打开你所有的项目吧，然后我们找到刚才的这个项目，就是他这有时间你可以看这个时间，不知道为啥我这界面出不来。 找点击刚才做这个项目，他就是比较还算比较完整的一个界面，然后这个地方他能够有一个导入到嗯，飞克玛 design， 但是好像要登录还是什么 会员吧？我没搞那个，我就直接给他整张截图了，截图之后就扔到 space 里头，然后跟他简单的描述一下我这是什么东西，然后你给我一笔一复刻一下，然后一定要说先弄成中文，全部是中文， 然后我就可以看出他导出这五张图其实也是两模两样了，但是大部分功能还是在的，就是最起码你是可以编辑他嘛。然后我就稍微的又调整了一下，就是像这样子，就是把这个底色换了一下， 就可以看到生成了五张，跟原来生成那个图还算比较像的，然后也就是 这五张，对，就是生成了这五个界面，然后到这一步就可以，就是你可以把这五张图全部打包复制到点这个猫，然后复制到飞格玛里头，就这个地方就是这样子，然后点转换，然后就会等待一段时间，等个一分钟吧，半分钟 五十秒，反正等一会，然后点复制之后就可以导到 fig 里头，直接打开一个界面，然后粘贴进去，就可以完全的编辑去了。
01:52查看AI文稿AI文稿上一期我们一起看了 stitch 生成 ui 设计稿的能力，那这一期我们就来看用 stitch 生成设计稿后，用 as studio 部署上线， 让更多的人看到你的项目，那教程呢，我已经整理成了文档，不要忘了点赞关注评论哦。哈喽朋友们，我是阿水。首先我们同样是打开 stitch 网站，选择好我们的项目之后呢，选择 mark， 再选择 a s 丢丢进行创建，这样呢就会跳转到 a s 丢丢的网站，可以看到刚才我们选中的网页呢，已经在这里链接好了，并且提示词呢也给我们自动加入了，我们只需要简单地点击 build 执行就 ok。 执行之后呢，我们的代码就生成好了， 那我们接着要做的就是将我们的代码上传到 github 平台，我们点击设置找到 github 入口，这里呢我们要填入项目名称和项目描述，一般这里呢我们先选择私有，接着点击确定， 然后我们就会进入 github 仓库。那接下来呢，我们就要借助 vcr 网站进行线上部署。打开 vcr 之后，第一步就是和我们的 github 账号进行连接，那好了之后呢，我们就可以看到这样的一个页面， 点击右上角的项目按钮，在这里呢可以找到我们要部署的项目，点击 import 后就会跳转到这个页面，再点击 deploy 就 可以开始部署了。那部署好了之后呢，我们就可以看到我们项目的默认网站，点击这个网站就会进入预览，那这样呢就可以把这个网址 分享给你们的朋友们，他们也就可以和你一样看到这个网站了。那从 stitch 到网站部署上线的工作流就完成了，快在评论区晒出你们部署的页面吧！ ok， 那 这期的分享就到这里，最后一定不要忘了点赞关注评论哦，我是阿水，我们下期再见。拜拜。
23阿水Ai说
14:09查看AI文稿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。 嗯，还有什么想想去看的一些话题都在评论区跟我说，我后面会经常去做。
03:48查看AI文稿AI文稿大家好，我是彪哥，今天这期视频教大家如何通过 mcp 协议将 stitch 接入 code x 来进行 ui 开发。 好，第一步我们先打开这个 stitch， 是 吧？我们这里面已经通过这个，嗯，哎呀，就画好了我们想要的这个 ui， 然后我们点过来，然后我们点导出，然后这里面有一个这个 mcp， 我 们点 mcp， 然后点设置 mcp， 然后这里可以选择这个 id， 我 们选格式。好，然后我们把这个复制到一个地方，你就能看到它里面的这个 api 啊，还有这些配置了，然后我们打开格式， 我们点设置，然后再点设置，然后我们在 m c p 服务器打开， 我这里之前添加了一个，好吧，我们这里面再添加一个这个地方，我们要选择这个流式 h c d p， 然后这个名字我们就叫 stitch， 然后在我们刚才复制的那个里面会有那个 ul， 这个就是我们刚才复制的这个，刚才那个 stitch 复制出来的这个我们需要把这个 url 复制到这来，然后我们这个标头是这个， 然后这里会有个值，就是这个，哎，这个 api。 好， 然后这样就可以了，我们点保存， 然后我们来测试一下，我们返回，然后开一个新对话，然后我们输入 at s t r c h c h， 帮我看一看我的 m c p 有 没有成功部署号， 好，我们等一下。 好，这说明我们已经配置好了，然后就可以用 codex 来直接开发这个 switch 的， 如果配置过程中遇到什么问题，可以在视频底下留言，我看到都会回复的，拜拜。
1055悟空爬虫
01:15查看AI文稿AI文稿谷歌四 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 仍然是免费使用的，不过一天只能提问五十次，快去试试吧！
59小奇说
