My Secret Rainbow

#11 内测先睹为快：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 应届生的设计能力。可以输出一个整体的概念方案，但在方案的逻辑、严谨性以及细节上还有很多问题，还无法直接承担业务需求。

 

接下来我们用同样的需求描述文案来测试 UIZard AI 生成结果的丰富度。首先从生成的结果上来看，它始终保持着前面提到的 7 大核心页面，只是在界面的排版和元素上以及色彩上做了一些调整。

同样需求描述的多次生成结果

为了印证猜测，我换了一组 Dating app 的需求描述进行了测试，结果的确差别不大。

设计类型：Mobile App

需求描述：A dating app for young people

风格描述：Pink vibrant, Modern, Young, Elegant

产品团队应该是在对描述关键词与产出方案之间做了一些明确的匹配约束，所以只有是命中某一类型的产品，它的产出基本没有太大差异性。不过当前只还是内测阶段，我相信在后期官方应该会不断加入更多的“模板”来提升其生成结果的丰富度。

接下来，我们再来试试输入自己的需求描述，看看 AI 生成的效果如何。这里我继续在前面即时 AI 中试用过的购物车设计来进行测试。

设计类型：Shopping cart page

需求描述：无

风格描述：Light, Morden

UIZard AI 返回的结果和我想象的差异有点大，它并没有帮我生成一个详细的购物车界面，而是一个简单购物 App 的设计方案。因此我又使用了更为详细描述信息，但 AI 返回给我依旧是一套购物 App 的设计方案。

a shopping cart page, products group by seller, include unit price, discount, total price and promotion information

购物车界面设计生成结果

结果可以看到生产的结果依旧不理想，AI 还是基于背后的模板生成了一套简单的购物 App 的设计方案，看样子 UIZard 当前核心还是依赖于内置的模板做生成，在“定制化”方面还没有开始投入。

UIZard 还有一个非常有意思的功能值得关注一下，我们可以指挥 AI 在生成界面的同时“套用”一些具体的设计风格。比如我在下方的描述语中要求 AI 使用 Facebook 的风格：

设计类型：Mobile App

需求描述：A social media app for gamers

风格描述：Like Facebook 或 Like Youtube

这里你就会发现 UIZard Auto Designer 的生成逻辑是基于一系列模板的，它会基于用户描述的关键词来进行模板库的“匹配”，在完成一些细节和调整后再进行生成输出。这样做的好处就在于给后续的继续编辑留下了较大的可扩展空间。

在完成了界面生成后，我们可以在编辑器中对生成的设计稿进行进一步的修改和加工，左侧的 Template 会提供一系列官方内置的组件模块，同时它们也根据前面对风格描述进行了样式的转换，我们可以选择合适的模块直接拖入画布使用。

UIZard Auto Designer 编辑界面

目前来看官方所提供的组件资源还比较丰富，常用的一些组件、模块都有包含，如果一定要使用 UIZard 来进行界面设计，整体的产品链路也还是能跑通的。

另外，在编辑界面中还有一个「Magic」的魔法棒功能，这里提供了一系列的辅助设计的小工具，能够配合设计师完成一系列复杂操作。有几个功能试用下来还不错，这里挑出来给大家介绍一下。

截图扫描转设计

我们前面提到过，ZardUI 的生产是基于内置的模板，这也就意味着产出的结果会有不少的缺失。这里我们就可以借助这个截图转设计的功能，上传到服务器并转化成可编辑的设计稿。

我尝试了大概几张截图，简单的界面问题不太大，一些小细节修补一下即可。但较为复杂的（特别是中文）的界面，比如淘宝的购物车，转换后的损失就有点大了。

风格提取生成

这是一个非常实用的功能，可以通过上传截图或 URL 来提取目标站点（或 app）的设计风格，并应用在当前的设计中。

同样它也仅适合排版布局简单一些的界面设计，比如下图中提取并替换成 amzon.com 的风格。

设计稿转线框稿

通过这个功能我们可以将画布中的所有界面转化成线框图风格。它非常适合我们的方案前期，将我们收集的界面灵感转换成线框图来进行前期讨论。

图片助手 & 文案助手

对于生成界面最重要的信息元素：图片和文案，UIZard 也提供了两个小工具，可以基于前面的描述文案进行内容的生成。

热区预测

对于生成的每一张界面设计稿，我们都可以通过这个功能进行用户实际使用过程中的热区预测。

我没有找到这个功能背后的产品逻辑介绍，但凭经验判断这个预测能力还是 OK 的。我猜测它的预测是基于这个模板背后原本的数据。

03. UIZard AI 与设计系统

UIZard AI 还有一个在我看来非常硬核的功能，那就是可以在需求描述中指定使用某一套具体的设计系统规范。比如使用 Material Design 的规范来生成一个 CRM 的产品界面。

设计类型：Web Page

需求描述：A website for CRM SaaS platform, use material design system

风格描述：white background, Bright blue style, Techy

这个功能还是非常赞的，不过就目前的测试结果来看，只有 Google 的 Material Design 能感受到对设计的影响，国内使用群体最大的 Ant Design 并没有产生效果，应该是并没有接入。

UIZard 官方曾在网络上说过，后续 AI 功能将可以接入自定义设计系统。也就是说我们可以将业务级的设计系统进入到系统中，后续通过 AI 生成的界面将可以直接套用业务的设计规范进行生成输出。

从 Material Design 的例子来看这个功能现在应该已经跑通了，就等着官方后续完成迭代开放了。如果这个功能能做到好用，这将必定是它们的一个杀手级功能了。

有点小期待！

04. UIZard AI 功能试用小结

在前面的分析中我们可以发现 UIZard 在AI 设计能力上是下了不少功夫的。从模版库、官方组件、D2C、设计系统等功能的规划上来看，他们的确是用专家经验加设计系统的思路来构建它们的 AI 能力。

这也和我在前面的文章中与大家分析的思路一样：AI 是设计系统非常好的消费场景，以设计系统的思路来建设 AI 能力是具备非常高的可行性的。

其实无论是设计系统、组件库还是 D2C 等能力，这些其实都是早已存在的概念。这次只不过是借助 AI 的帮助将他们有效的连在了一起，也发生了非常好的化学反应。

UIZard 目前的产品能力布局是 OK 的，只不过目前产出的质量很大程度上还是受限于背后设计大模型能力的不足。假以时日，随着设计大模型的能力增强，UiZard AI 能力的可用性将会有大幅的提高。

 

写在最后

从用户输入一段需求描述，到 AI 生成一套设计方案，这背后的逻辑还是相当的复杂。AI 首先会对输入的信息进行分析和理解，接着通过特征提取将需求转化为机器模型可以理解的形式，然后结合模型中的先验经验进行设计方案的计算和生成输出。

在这个过程中，先验经验（指设计领域和行业领域的专家经验）对于生成结果的质量至关重要。虽然基础大模型、D2C、在线编辑器的解决方案已经相对成熟，但在先验经验方面，我们还是非常缺乏系统化的积累。而这必将成为未来各家产品之间最重要的核心竞争力。

前段时间和 MasterGo 的产品团队沟通，他们也非常关注这个问题，所以在设计系统和 AI 结合的方面投入了很多精力进行研究。离它们开放内测估计还有 1 个月的时间，我们到时候拭目以待吧。

以上是「AI 设计工具进展与思路」的上篇，我们主要关注在近期两款已经内测产品的能力和进展，在下一期的文章中，我们将核心讨论 AI 设计工具背后的“大模型”以及它与先验经验（指设计领域和行业领域的专家经验）的关系。如果大家还有哪些方面想进一步了解的，欢迎大家在微信群或私信我进行讨论。