不只是UI，都要下岗位了？新的AI UI+交互工具来了！飞书智能体+nanobanana也能生成UI了！

现在ai工具的发展真是日新月异，很多互联网从业者通过ai工具搭建工作流来帮助自己提高工作效率。不管怎么说吧，打不过就要加入，与其天天抱怨不如来看看用这些工具能不能帮你提高核心竞争力。

接下来，我会分别通过飞书+nanobanana和一个google stitch 3.0来给大家介绍目前AI 生UI的工具，进化的有多么快！

目前很多企业其实都在用飞书的多维表格以及扣子这些ai工具去打造更高效的智能体，例如产品经理可以输入需求，一键生成需求文档以及原型图甚至交互说明。飞书多维表格的优势在于一些批量生成，并且聚合更多的ai工具来高效的处理工作流，但大家要明白的是，我们不要局限于某一款工具带来的结果，以及要明白我们产出某个设计案例的底层逻辑。

好，那么我以生成UI为例带大家用飞书多维表格来走一遍。为了更好的生成UI这里会用到2种场景：

1.我看上了一个UI图，我希望我生成的UI图能模仿他的设计风格 

2.我自己已经有相应的UI设计规范，我要根据我自己的规范生产UI图。

基于这两个场景，那么我们的工作流就会有细微的调整。

先用第一个场景举例：

Step 01

首先我们来创建一个多维表格，在第二个字段列表里将字段类型设置为附件，只有这样才能上传图片。并写好标题，如：上传图片。

Step 02

在第三列字段中设置好用来解析图片的智能体。点击探索字段捷径，字面意思就是告诉你这里可以调用很多ai工具，点击字段捷径中心里面就有很多工具供你选择。你觉得哪个ai工具的图片解析能力强就用哪个，比如这里我们可以用豆包1.6。

选择完之后这个表单就会让你填写更多的内容，例如你需要把这个生成这个智能体的关键词放进去。智能体的关键词我已经写好了：

特别要注意的是，要明白每一个字段的作用和其互相的关联，例如第三个智能体需要通过图片来生成关键词那么，这里就需要在图片内容这里选择第二个表单（上传图片）进行关联。

其次是关联你的大模型账号，因为生成内容需要消耗token，所以后面如果遇到生成图片的时候如果失败了，原因可能就是因为没有绑定大模型账号或者大模型需要的token不够了。其他的跟着我这样设置即可。

我们可以看到当我们上传好一张UI图，字段列表4的解析图片输出结果就出现了相应的提示词：

非常的详细对吧。但是，如果认真看我智能体描述的同学应该看到，其实我把产品的信息架构和功能解析都放进去了，所以生成出来的肯定是和我上传图片相关的新UI图，如果你只是希望参考上传图片的风格，那么就要把信息架构和功能模块描述这些描述去掉。然后在提示词里编辑自己要的内容。

Step 03

生图。同样的，刚才生关键词我们用到了豆包1.6，那么在第5个字段列表中，我们就需要调用文生图的工具，这里推荐即梦和Nanobanana（后面简称香蕉）。当你点击关联账号之后就会出现这样两个弹框，分别是即梦和香蕉的。

如果你要关联即梦，那么就需要密钥和接入点，只要去登录火山引擎，按照下列操作去做即可。

1.获取key

2.获取接入点

如果要关联Nanobanana，那么你需要登录这个网站：https://fieldshortcut.com/zh/login。登录注册后进入这个页面复制API Key。然后去绑定。

当然啦，聪明的同学就能想到，压根就不需要这样付费，直接登录Nanobanana和其他工具官网生成就好了，没错，只要你有魔法那就没问题。只是说在多为表格里面是比较集中的去批量处理一些需求，会更方便。

大功告成！我们来欣赏一下多维表格+banana的大作吧！

不出所料！非常的拉胯！看来生成UI这件事情并没有那么简单，毕竟现在的大模型都是用来生产图像的，UI这东西果然没那么好生成。那么前面费了这么大的劲生出了一堆垃圾有什么用呢？大家别着急，这个工作流只是是示范，你们完全可以用这样的思路去生成别的东西，例如海报、IP、产品图等等，而且多维表格的优势就在于批量做，在一个平台上调用多个智能体来进行搭配。还有扣子，你可以自己开发智能体，属于“一劳永逸”，比如现在抖音很多的一键生成历史故事啦、动态漫画啦等等，虽然同质化比较强，但是只要自己修改一下智能体提示词就可以了。

你就使劲天天生成天天发，说不定哪个视频就爆了，拿token狠狠砸。

那还有没有可以生成UI的工具呢？有的有的。比如妙多（不是广告！）我再把我刚才那个吊炸天智能体生成的关键词喂给他，看看他能生成出什么花样来。

好的，就是这样，那大家看看，这个效果怎么样呢？好像还是和我想的差的比较远。而且只是一张图片不可编辑。

那么我们再换个简单一点的提示词看看

诶，你会发现UI生成的很规范了，文字也不出现乱码了，甚至是可以编辑的！那就有点吃不了细糠的感觉，生成UI图片只能用一些既定的、简单的提示词在组件库里拼拼凑凑。

当然没说他不好哈，大家如果要去局部修改或者快速排列一些表单还是方便的，比如我让他给图文换一种排列方式他就很好的做了出来，毕竟指令和目标都是很清晰的，但新增一些内容字段出了点bug，部分frame里的内容看不见了，拉大了画布才看见，并且我让它新增播放按钮，也没有靠右对齐。同时我是这让一个svg格式的图标的线条加粗，并没有反应。

好吧，虽然有用，但不多，可能这个ai还是要训练一下才行，积分不够了，赶紧撤退！

另外想去体验下的同学可以看一下他的ai设计文档的部分功能：

怎么说呢，至少比现在培训班零基础学出来的UI设计师做的好多了吧～

google stitch3.0

然后google stitch3.0，ai生UI这方面也挺不错的，UI看上去也更成熟和细致。

以下是我生成的两套UI图片，一套web的一套移动端的。大家可以看到两套设计出来的界面还是挺规范和统一的。

同时你可以通过局部编辑去做更多的细节调整，比如选中整个界面切换成白色风格拉，比如选中一个图标切换成色块风格都可以。

然后我还拿了两张原型来试试，诶发现他也能根据原型来生成视觉效果图，你还真别说，这个效果还不错。但是我试了下，不管是英文提示词还是中文提示词，生成的界面都是英文的。

然后然后，神奇的地方要来了～目前我们通过google stitch生成了界面，但依然是静态的，那有没有可能我把一整套界面生成好了之后让它把交互和开发都做出来呢？！

有的有的！

我们可以把这些界面以htlm格式下载下来，然后打开谷歌aistudio，在build里面新建一个工程，把html格式的文件拖进去让它创建。然后你就会发现它把前端代码给写好了，当然这不算什么，figma也会。但是他能根据你提供的几个有关系的界面，把界面之间以及单个界面的交互也做出来了。虽然部分交互不准确，但是你会发现一个可怕的事情。

交互部分页面刷不出来，我就不放了= =

一个人可以把产品的需求、UI、交互、开发都做了，当然都很粗糙，实际生产还有待加强，但这个流程基本已经跑通了。

后来我还继续给它喂了我那段吊炸天的提示词，但实际效果还是不好，但是如果你对产品要求不高的话，UI这方面已经可以投入生产了，你要改什么按钮大小、位置、尺寸其实都能改了。纯做界面润色的UI设计师确实要下岗了，当然前提是一个对设计要求不高的产品可以这么做。但是像一些对体验、视觉精准度、创意要求非常高的产品，那一个人还是完成不了的，比如让一个图标换一种风格，你可能能换对一个，但是其他的你就不能保证一样了，尤其是大量界面的设计标准和规范化。

其实我觉得最有希望先做到这件事的就是figma，将来你只要将组件库和规范搭好，ai会自动读取这些组件库的数据形成一个调用的池子，你想要怎么变化他都会根据组件库的规范帮你生成，这样生成的界面可能你都不需要调整什么尺寸、间距和颜色了。

现在我觉得比较困扰大家的是，干啥都要钱，关键是你还得同时用到很多的工具。要不停的生成抽卡，不停的充钱。就拿我昨天尝试一段一镜到底的小视频来说吧，它需要通过首尾帧的原理让ai把中间部分补充出来，为了生成一段长视频，且看起来比较正常，就需要很多的分镜，每一个分镜都要生图抽卡，同时你还需要设定好首尾帧中间片段的关键词描述，因为视频生成也要抽卡，哈哈！

所以一段十几秒的视频可能成本就要10块钱甚至几十块钱。比如我昨天拿来玩的这个视频。

其实前面10秒还是挺自然的，但是后面想要这么自然，就弄了半天，尤其是这个拔剑起飞坐到剑上这段，中间还换了不少的工具来生成，不同的模型生的效果也不一样，抽了很多次，

最后也只能这样了。

总之，ai的可玩性很强，同时如果你研究的比较深了，你就可以变现了，目前很多企业都用ai来做一些宣传视频、品牌ip等等，成本大大降低，但是训练ai的成本也是不容忽视的。

一些ai视频玩的比较6的人几乎可以自己制作一部短剧了。用ai写剧本、脚本、分镜、生成配音、视频，一个工作流+几个定制的智能体就能搞定。

好了，就这样吧！我也要默默的先充积分去了。。。。

文章来自于“应谋鬼计”，作者 “应骏”。