My Secret Rainbow

内测先睹为快：AI 设计工具进展与思路 – 即时 AI & UIZard AI

篇首语

今年三月的月末，蓝湖和即时分别发布了两条消息，正式宣布了国内 UI 界面设计AI的启动。当时我们曾提到过，从各家产品的宣传视频来看，当前的 AI 界面设计只是论证了可能性，而并非可行性（或者说是确定性），但从可能到可行，真正进入商用环节还有不少的问题要需解决。

在最近的一个多月里，有幸分别获得了即时设计和曾经介绍过的 UIZard 的内测权限，也花了些时间仔细试用了一下这两款产品。MasterGo 方面还需要一点时间，后续进入内测后也会第一时间给进行分享。大家可以关注「设计有得聊」保持关注。

这一期的主题将基于对这两款 AI 设计工具的使用来和聊聊 AI 进行界面设计现在的能力进展如何，同时也和大家分析一下它们背后的逻辑，了解 AI 是如何工作的。

这次的主题内容会比较长，我会用两篇文章来完成。上半部分着重于两款 AI 设计工具的能力解析，下半部分则会着重聊一聊它们背后的设计大模型以及专家经验。

第一批进入测试的即时设计和 UIZard

其实这两款产品投入这个领域研发的时间都并不长，包括还未开放内测的蓝湖 MasterGo 和 Galileo AI，大家都是进入这个领域的时间都是在近半年。大家都是在一边不断地宣传一边在赶工期，期望能够抢占市场先机。

目前我们能测试的产品肯定都有不少的问题，所以我们当前的评测仅用于评判 AI 界面设计这个领域当前的进展，并不能代表大家最终的能力。

先来说说基于这段时间测试的结论：能力和完成度上UIZard 暂时领先，但大家离真正的可参与业务生产都还有一定距离。

在这一次的文章里，我会主要从需求转化为设计的完成度、AI 生成质量以及产品能力三个方面来具体分析一下它们各自当前的 AI 设计能力。

即时 AI 产品分析

即时设计的 AI 产品推进的速度很快，也是最早进入内测阶段的。从 4 月初拿到内测邀请到如今，能够发现他们还是做了不少能力上的迭代。

可能是由于服务器资源的约束，目前的内测账号每天只能生成 20 次。这个对试用的体感影响还是挺大的，往往有了一个思路就被这个 20 次的限制给卡住了。

01. 即时 AI 功能界面

即时 AI的产品界面相对比较简单。右侧分别是模型的选择和描述输入框，用户在输入需求描述后，AI 将会生成相应的界面在左侧画布界面中。虽然界面提供了两个在丰富度和多样性方面有差异的模型，但在实际使用中，两个模型的差异还并不是太明显。

即时 AI 设计主界面

在这里我们可以进入到编辑模式对 AI 生成的界面进行调整。这个界面编辑器可以说是即时设计本身的早期版本，只提供了一些基础功能。如果想要进行更加细致多调整，比如使用自己的组件库等资源，还是需要将它保存到即时设计的项目中，在进行调整。

即时 AI 设计主界面 – 编辑状态

02. 即时 AI 设计能力分析

接下来我们重点看一看 AI 的设计生成能力。为确保尽可能的客观，我在这段时间里陆续的测试了几十种不同的需求描述。从结果上来看问题还是比较多的，我会从需求理解、生成质量、丰富度等方面来和大家一起来分析一下。

首先，界面的生成结果依赖于用户输入的需求描述，而模型对于输入信息的理解则是 AI设计的首要环节。即时 AI 对需求描述的理解基本上是 OK 的，能够准备识别到关键词并产出对应的界面设计，但对于较复杂的细节描述产出的结果不太理想。

以「购物车设计」为例，需求详细程度依次递进来进行测试：

第一次需求输入：购物车界面设计

输出一组最基础的购物车界面。店铺、商品等模块信息基本 OK，但补充订单信息模块的逻辑和字段合理性有较大问题。另外补充一句，当在第一次需求的描述后面增加「暗黑模式」的描述时，这个关键词没有被识别到。

第二次需求输入：购物车界面设计，包含登录和非登录状态两个页面

AI 注意到了「登录」与「非登录」两个关键词，在产出的界面上体现出了这两个状态，但在解决方案上有比较明显的问题，基本上与常见的设计模式不太一样。

第三次需求输入：购物车界面设计，商品按照店铺进行聚合，展示店铺折扣、促销、满减等信息。

这一次的需求信息较为复杂，但这也是我们日常工作中最常见的模式。AI 的反馈结果不太好，除了按店铺聚合商品，所有折扣、促销等信息并没能被识别并转化。

三次需求描述的生成结果

为了确保对复杂需求理解的测试准确性，我更换了集中不同的描述方式，结果还是不太理想。比如下面这个，关键点识别到了但产出的界面逻辑有些问题。

需求输入：生成一个购物车界面，需要包含不同状态的设计界面。

购物车不同状态界面

在聊完对需求的理解之后，我们再来看看 AI 生成界面的质量与丰富度，这也是直接决定 AI 是否能进入到我们的工作流的重要依据。这里会着重关设计合理性、排版布局和设计细节三个部分。

这里的合理性指的是 AI 生成结果与输入需求描述信息之间的契合度，当然，这里的契合指的是大家对一类设计方案的共同认知，比如提到购物车、报名表单它大致应该会是怎样的设计。

需求输入：帮我生成一个六一幼儿园活动报名界面

六一幼儿园活动报名界面

活动报名界面的设计模式相对还是比较成熟和稳定的，但即时 AI 输出的结果并不太理想。首先是界面的排版布局与我们常见的设计方案并不太一样，还是有一些不太合逻辑的地方。

其次不同界面上所使用的组件和样式也都不太一致，需要做不少的手动调整。另外在生产结果的丰富度上，同样一句描述所生成的结果有差异，但称不上是“第二种方案”。

03. 即时 AI 功能试用小结

从生成界面的结果上来看，目前的 AI 能力还有不少的问题，这里就不一一列举了，大家可以点击大图查看。

即时 AI 能够基于需求描述生产基本的应用框架，但在界面的逻辑、信息架构以及细节的设计方面目前还不太理想。离宣传视频中所给出的 Demo 还原度还有不小的差距。

不过在对需求描述的理解上，即时 AI 比 UIZard 会稍好一些，能够识别出描述文案中的核心关键词并做一些相应的设计，只不过产出的质量还有待加强。

简单点来说就是，即时 AI 对需求描述的语义分析和识别的基础能力是 OK 的，但由于背后设计模型的能力影响，产出的结果还跟不上需求。随着模型能力的不断增强，这个问题还是可以解决的，只是还多需要一些时间。

UIZard Auto desinger 产品分析

本来都对 UIZard 的内测不抱希望了，结果前两天突然收到邮件，告知如果再不操作就要作废了。原来内测邀请的邮件早就收到了，但是被漫天的营销邮件给淹没了 😣

说实话，这次的内测 UIZard 有点不太厚道，即使你已经收到了邀约也必须先付费成为 Pro 会员才行。好在官方还留了一个口子，邀请 5 位新用户注册即可换取一个月的 Pro 会员。

所以如果你已经收到了邀约，不必立刻付费去试用它们的 AI 功能，先邀请几位好友换取 Pro 会员试用一下再做决定。

01. UIZard AI 功能界面

UIZard Auto designer 的产品界面比即时要“复杂”一些，没有采用宣传片中类 ChatGPT 的纯对话框模式。它将界面类型、需求描述和风格描述拆分成了三个字段以供用户进行设置。

虽然它没有即时 AI 那样简洁，但这样的做法能够帮助用户更清晰地向 AI 描述自己的设计需求，避免因描述规则不熟悉而降低输出结果的质量。这与我们在零售通智能设计方案中的思路是一致的。考虑到专业领域的语义识别目前还没有达到那么强大的水平，适当借助面板设置在当下是一个更合适的选择。

相较于即时 AI，UIZard 并没有生成的“中间态”，所有生成的结果会即刻保存至项目中进行编辑。我们可以基于官方提供的一系列组件和物料对设计方案进一步的修改调整。

02. UIZard AI 设计能力分析

这里我们也同样先用官方提供的案例来进行测试。顺便提一下， UiZard 目前仅支持使用英文描述。

设计类型：Mobile App

需求描述：A social media app for gamers

风格描述：Like Facebook but purple, techy, young

这里描述的是一个游戏社交应用，借鉴 Facebook 的设计但主题色使用紫色，风格上需要贴近年轻、科技的感觉。

官方测试案例

AI 的产出的界面包含欢迎页、落地页、首页、发现页、搜索页、聊天对话页和个人 Profile 页。产品主核心链路的界面和功能模块基本都有，但核心界面的多种状态、交互功能也缺失得比较多。可以简单理解为将网络上各类灵感库截图打散，基于用户输入的需求重新组合进行了输出。

换句话说，如果从一个作品评估的视角来看，UIZard Auto Designer 的能力类似一个 P4 应届生的设计能力。可以输出一个整体的概念方案，但在方案的逻辑、严谨性以及细节上还有很多问题，还无法直接承担业务需求。

……

原文：https://mp.weixin.qq.com/s/EP755WgZ1ltvQnZzKOrxdg