衡量和改进AI生成的UI设计

我的女朋友从未写过一行代码，但有一天早上醒来，她构建了一个机器人来获取难订的Resy餐厅预订。机器人运行得很好，但她的第一个抱怨是：用户界面看起来很糟糕，感觉就是AI生成的。

她并不孤单。有人称之为“AI垃圾”，也有人说模型“缺乏品味”。软件开发已经民主化，但到目前为止，好的UI设计似乎尚未普及。

我一直在思考同一个问题：能否让我的代理（agent）完成更好的UI设计工作，这样我就不必亲自操刀了？

这是一个难题，我不敢说已经解决了，但我取得了一些进展。以下是我在这个过程中学到的东西。

衡量AI设计的质量

大多数人将设计视为主观的，但我认为它更可衡量。好的设计能帮助用户和企业实现目标。如果你理解某个功能旨在完成什么，就有可能评判其设计。

以我在Uber工作时的一个例子为例。当时，Uber试图向乘客交叉销售其他服务：Uber Eats、杂货、预约乘车等。因此，公司对首页进行了设计更改，以突出这些服务：

这是一个“好”的设计更改吗？这取决于：更多用户尝试Uber Eats了吗？是否因为地图上的汽车信息丧失确定性而减少了叫车请求？在用户和业务目标的约束下，有可能猜测设计是否“更好”。

这是第一个大挑战——如何创建大量AI生成的设计变更，同时理解用户和业务背景，以便正确评判设计输出？

为此，我采用了开源应用，并创建了我想添加的新功能。

我手动生成并审查了数百个新功能。我标注了发现的设计问题，并让LLM总结问题。绝大多数问题归结为以下几类：

• 优先级：优秀的设计师在用户体验中无情地排序。只显示核心信息，核心路径非常明显，其他一切都不妨碍用户。模型似乎认为所有用户操作都同等重要，结果导致用户面对杂乱。

• 排版、间距和颜色：模型过度使用颜色，且没有一致的间距，使UI杂乱。这都与第1点相关——优秀设计师使用颜色、字体和间距来吸引用户注意特定操作。模型没有优先考虑哪些操作重要。

• UI“漏洞”：人类设计师永远不会搞错的小事（组件对齐不准、文本换行造成奇怪外观等）。

• 设计系统遵循：引入不同的组件、按钮半径、字体等，导致体验不统一。

测试改进以生成更好的设计

我尝试了20多种不同的代理设置，以改善编码代理的设计输出。然后用相同的开源功能创建测试对这些代理设置进行测试，并手动评估设计是否改进。这导致需要审查超过500个屏幕，于是我创建了一个评估工具，用于快速比较和评分不同代理对同一设计变更的输出。

我发现最有效的方法包括：

• 自我改进循环：如果模型“看到”自己的设计，它可以改进。我发现让模型查看它生成的UI，并要求它修复问题，带来了有意义的提升。这并不令人惊讶，但却是最大的杠杆。

• 基于常见问题的评估标准：在自我改进循环中，使用我基于AI设计常见问题标记的评估标准改进了输出。分享我在最初生成功能时识别的常见缺陷，在审查标准中最有帮助。

• 注入优秀设计案例：我以前从设计精良的应用（如Stripe、Airbnb）中构建了50万+屏幕的语料库。在评估标准中向模型展示这些案例，进一步改善了输出。

一些出乎意料无效的方法：

• 基于“常见设计最佳实践”的评估标准：这并没有真正帮助。我猜模型已经在训练数据中包含了这些。真正的收益来自于我发现AI设计中的常见缺陷，并在评估标准中强调它们。

• 经典AI设计“垃圾”的负面示例（例如紫色渐变、过大的圆角卡片、表情符号项目列表）：向模型展示AI设计的常见模式帮助不大。展示“优秀设计”的图片比展示“AI设计”的不良传统信号更有效。

一些注意事项

需要注意的是，所有工作的一个潜在缺陷是“改进的输出”基于我的人类评估。我只能说上述杠杆使设计看起来更好。

我最近打包了代理并与一些公司分享。根据公司的不同，团队在大约70%的UI PR中接受了代理的建议。这给了我一些信心，说明我的评估是有效的。但这仍然可能是一个有缺陷的信号：工程师可能更容易接受“简单”的建议而非重要的建议。我仍在摸索这部分测量方法。

下一步：延迟和成本

测量的改进来自花费更多时间和令牌。代理先做出设计变更，查看设计变更，评判它，然后改进。这很好，但需要更长时间来做出变更，且消耗更多令牌。

下一个挑战是加快这个过程并使其更节省令牌。代理最初每个设计功能平均需要约30分钟和约50美元。我们已经将两者减少了约50%。仍在努力，我会再写一篇文章介绍实验方法和结果。