这个AI一键生成原型和设计稿，并支持发布成为动效网页

最新推荐文章于 2024-09-05 09:52:52 发布

「已注销」

最新推荐文章于 2024-09-05 09:52:52 发布

阅读量3.1k

点赞数 1

文章标签：人工智能

原文链接： https://mp.weixin.qq.com/s?__biz=MzAxNjMyMDUzMQ==&mid=2247554878&idx=1&sn=2e63e6d1d727bf178c483f58d2f08f57&chksm=9bf4c642ac834f547aace38cf5e0e5904901658891295404b6579d1ac625ca214a61403be968&scene=126&sessionid=0

版权

最近有款国产AI设计工具“即时AI”，风刮得很大，官方声称可以一键生成App和Web的UI设计稿、一键发布为在线动效网页，测评了一下，先说结论：

对于没有UI设计经验的普通人极大的降低了使用门槛，简化了设计流程，同时提升了速度。并且目前的效果已经基本可以直接拿去用了，生成页面的设计效果要优于初级UI设计师水平。使用的人还是需要了解UI的专有名词，纯小白用户并不适用，产品经理和程序员的群体会更适合。

场景：对产品经理来说，更便捷和快速地展示原型效果更好地向上汇报、对于组织架构不完整的产研团队可以解决产品或交互的人力不足的问题、能够节省跟设计师和前端的沟通时间，同时基于AI“无限自动创造生成”的能力，可以不断去探索产品的形态边界。

未来，伴随AI生成能力水平的不断提高，工作流程很有可能被缩短为「产品经理-设计师-后端」或「产品经理-前端-后端」，更或者来到产品经理的「黄金时代」。

以下为全文（转载自：AIGC研修社）：

想想第一次制作网页设计还是十年前的事情了。网页的制作工具经历了Photoshop，sketch，figma，再到现在的AI直接生成。

这些工具的变迁，也是科技的变迁。从最开始的用Photoshop来制作网页，非常繁琐的手动标注页面，人工切图。到sketch开始自动化标注切图。还记得2017年的时候组织翻译的原子设计，然后慢慢的UI工作流开始越来越组件化，UI设计工具也把组件化整合到了工具中。

再后来就是AIGC兴起，界面设计工具再一次变迁。

最近的设计工具基本全面在拥抱AIGC，但是对于UI设计来说，这条路并不好走。一开始大家会延续文生图的思路，都是走文字一键生成页面的模式，但是对于大部分的真实产品工作流，UI设计是一个需要结合产品，原型，用户调研，每一步都需要数据支撑很严谨的事情。

跟文生图的那几个工具类似，便捷还是可控是每个产品都需要思考的关键点，一边是人人都可以快速学会使用的midjourney。另一边开源的 stable diffusion 深入到了各个细分的工作流之中。

AIGC让人人都是UI设计师还是让现在的UI设计师解放生产力，是两条不同的解决方案。而这两种不同的解决方案代表的产品目前有：

1、文字直接生成页面

国内的代表产品是即时设计，国外的是uizards，但是目前免费可用的只有即时AI。文字直接生成页面的方式基本上完全颠覆了过去的工作流，也是目前最快速生成页面的方式，最新的即时AI生成一个页面只需要30s。

2、AIGC完善界面设计工作流

最近的代表就是figma的AI设计工作流，很好的把现在的AI的功能结合到了现有的产品里，而且这个工作流从创意到最后前端代码都有涵盖。在figma发布他们自己的AI之前就已经有很多搭载在其中的AI插件了，这一次figma把这些插件全部都整合在一起了。我们还能在里面看到今年年初拿到融资的设计白板类AI工具fabrie的影子。

因为figma的AI还没有真正的发布，下面的案例是用即时AI的最新功能测试的。

一键生成时尚网站

这次使用的工具是即时最新推出的web页面的生成功能。目前免费，每天有20次的体验次数。

体验网址：https://js.design/ai

官方介绍：「即时 AI」能力进阶！自带网页动画，30s 生成更精致的 Web 设计稿！

官方文档：https://fyze31atzb.feishu.cn/wiki/GNCTwKHmyinCMIkN8e5c18E0nvg

Prompt：类似vogue官网页面，简洁，大胆的设计风格，黑白主题。

模型选择：JS-UIbotics，这个模型的生成速度明显加快，只需30s，并且组件化的规范程度也更好。

点击生成页面后，只需30s，就可以得到四个不同样式的网页。

说实话这次生成的页面还挺惊喜的，几乎可以直接用了，无论是图片，文字还有布局都没有什么问题。

现在开始感受到甲方爸爸和老板们的快乐和痛苦了。我发现很难选择，选择太多也是坏事。生成好的页面可以点击编辑来修改里面的内容。你可以把自己的产品图片和文字替换上去。

作为一个看效果的demo，我暂时不对里面的内容进行修改，到这一步已经足够了。

到这个阶段还可以直接生成所有人可以预览的网页链接。选择你要发布的页面然后点击发布网页即可。发布后如果还需要修改内容，还可以继续更新页面。我选择了第一个生成进行发布，大家可以直接扫码查看效果。

网页的动效我录了个小视频，非常的顺畅，这也是惊喜的地方。

可控页面颜色

AI的文生图领域一直以来有个挺大的问题，就是无法生成准确的色值。Midjourney 和 stable diffusion 都是如此。但是对于设计师来说颜色的控制又特别的重要，尤其是UI设计师。

这次的即时AI把主题色也加进去了，可以直接通过描述词来控制页面是深色模式还是暗色模式，以及设定主题色的具体色值。

下面这个页面就是试图生成主题色是#A5D63F，深色模式的时尚网站。

可以看到 icon 按钮以及链接文字都变成了主题色。

当我们点击编辑后，可以看到颜色样式里的主题色已经被系统的设置好。

点击编辑颜色可以看到色值就是提示词里写的 #A5D63F

并且可以一键替换主题色，效果如下。

生成式UI的应用场景和未来

优点：对于没有UI设计经验的普通人极大的降低了使用门槛，简化了设计流程，同时提升了速度。并且目前的效果已经基本可以直接拿去用了，生成页面的设计效果要好于不少初级的UI设计师。

人群：使用的人还是需要了解UI的专有名词，比如深色模式之类的，纯小白用户并不适用。程序员和产品经理的群体会更适合，我的周围的程序员朋友也非常喜欢这类产品。

对于专业的UI设计师来说，复杂的页面还需要调整，不过也节省了不少时间。我能想到的应用场景其实主要在老板经常要求的一天出高保真页面。现在可能几分钟就可以实现。

如果单纯用现在工具满足设计师实际工作的角度来说，针对性的插件或者即将发布的 figma AI 可能会更符合设计师们的需要。但是如果往长远去想，UI设计这个工作也不过才出现和普及十年左右的时间，最近的一批基本上是依托于移动互联网的热潮下的。我们现在使用的网页也好，APP也好，都是因为技术的局限无法跟机器自然的交流而存在的。

而在大语言模型的冲击下，人类跟机器的交互会越来越接近自然的人与人的交互，那么下一代的界面的UI是什么？以及是否还有现在意义上的UI？其实都是一个问题。在没有人知道答案的情况下，颠覆性的创新反而可能是更正确的选择。

同时AIGC带来的工作流的改变也会直接影响设计师，产品经理，这些职业职能范围的变化。其实这点在前几年已经发生，如果产品设计的流程被工具极大的简化了，那么可能从产品到设计再到前端只需要一个人，产品团队的人数会大大的减少，而产品迭代的速度会大幅的加快。

过去的半年，视觉设计的工作流已经被颠覆了，接下来要轮到UI设计了。