一键生成VS可控工作流：AIGC将如何改变UI设计工具

想想第一次制作网页设计还是十年前的事情了。网页的制作工具经历了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设计了。