AI 魔法框：框向未来

框一下，让 AI 来“猜你喜欢”？

我试着带你和我们一起走进我们构思 AI 魔法框的思维游戏中。

从意图到呈现，从 Input 到 Output

产品设计是软件工程中的一环，而软件工程最终都是将我们试图改变世界的意图，转换为一款面向用户的产品。产品设计师在设计的环节会涌现出无数的意图，他们不断行动，然后将试着用设计出的界面来表现意图。

过去设计工具的功能，也包括 Motiff 妙多中“AI 复制”“AI 布局”这样的功能其实都在明确达成一个目的，那便是“加速行动的执行”。我们称之为从“意图”到“行动”。

过去，在 Photoshop 中创建一个页面的行动并不容易，Sketch 的画板（Artboard）加速了这个行动。

过去，在 Sketch 中调整一个响应式的结构化布局并不容易，Figma 的自动布局加速了这个行动。Motiff 妙多的 AI 布局则进一步加速了这个行动。

将 100 步行动变成甚至仅需 1 步就完成，这是工具追求效率的终极目标，AI 也必然会起到关键作用。

而 AIGC 似乎增加了游戏的玩法。AI 直接生成内容 —— 对于 UI 领域，我们很直觉地期待让 AI 生成用户界面。而我认为，在从意图到行动的提升之路还亟待 AI 不断提升的同时，也开辟出了另一条道路：从意图到呈现。

而如果我们以一个更工程化的视角去看待这个命题时，这个问题的本质其实是：从 Input（输入）到 Output（输出）。

艺术伴随随机，而 UI 需要精确

我们先来看看 Output，即呈现的交付物。

UI 工作和我们所认知的艺术创作截然不同。艺术创作从不排斥随机性，甚至随机常常造就了艺术价值。而 UI 设计作为产品工程的一环，工程是基于用户和商业来精密设计的。它天然需要具备一个基础条件：精确。

例如，我们在使用 Midjourney 一类产品绘制图像时，我们往往还会期待 AI 超出我们意图给到的呈现。我们画一棵树，并不需要让 AI 精确它有几片树叶。

而在 UI 界面中，我们则需要相对精确地确认每一个元素，及其对应的功能摆放在什么位置，功能在对应位置产生的作用也是明确的。

而如何获取 Output 的“精确”？好像有两种途径：

• 缩小 Output 的范围。Output 相对小一些，AI 可控制地会更为精准一些。
• 增加 Input 的信息。告诉 AI 的信息越多，AI 对准确理解意图会更明确。

极限思维1：极大的 Input，极小的 Output

事实上，这样的例子无处不在。

例如你可以在 Motiff 妙多中画一个矩形。虽然这个行为看起来没那么复杂，那你确实输入了非常充分的信息。比如，可以输入：

• 矩形在 x 轴、y 轴上对应的坐标
• 矩形的宽和高
• 矩形的描边：例如不是连续的，而是断点。
• 矩形的颜色和描边的颜色：例如矩形可以是透明的，而描边则可以是一个渐变色。

而你需要的 Output 呢？它就是一个确定的矩形框。或者说，如果你将以上信息口述给 AI，AI 绝对可以精确地帮助你完成你的意图呈现。

极限思维2：极小的 Input，极大的 Output

这是一个怎样的例子？这样的例子在最近非常常见。

例如：仅仅描述一句话，让 AI 来生成一个完整的用户界面。

目前，已经有一些研究这个方向的应用发布了，它们的 Demo 看起来非常酷。（好像 Motiff 也有一个这么“看起来也酷”的 Demo，谁不喜欢摇滚乐呢？）

但回到现实，这个方式应该比较难在你的实际工作上为你助力很多。只要你迈出了“描述一句话”的第一步，你就会发现，你会试图不断补充你的 Input 描述，继续描述第二句话、第三句话、第四句直到一整段话……让 AI 更全面、更好地理解你的意图。

最后，为了那个更接近你意图的界面生成，你是否要考虑输入一整段话？

打破 Input 的局限性

抱歉，我们的这个叙述逻辑可能让你不知不觉的陷入了一个圈套：如果 AI 是你的合作伙伴，你需要变成一个话痨让他更理解你的意图。

如果你在和一个真实的合作伙伴讨论产品设计方案，你也会这样吗？会滔滔不觉地向他 Input 更多的文字来表达你的意图？我相信你不会的。

取而代之，你会迅速拿起一只马克笔，然后洋洋洒洒地在黑板上直接画出了一些流程图、线框稿，你会对着这些草稿，一边画，一边表达给合作伙伴关于你的意图。而这，就是直觉和本能下，最高效的 Input 方式。

在此，我们提出了一个假设：用户界面领域的 AIGC，Input 将不止是文本 Prompts，因为文本并不是这个领域原本最高效的输入方式。更好的方式应该是“图文并茂”。

最好的“图文并茂”：PRD？

这是一个自然的推演。既然我们假设“图文并茂”的输入可以提升 AI 生成用户界面的效率，那我们原本就有一个现成的最佳“图文并茂”：产品需求文档（PRD）。PRD 包含了丰富的图例和文字来说明表达产品设计的意图和目标。

那导入 PRD，让 AI 来生成 UI 呢？

这确实是我们在长期研究的方向之一。 Motiff 妙多实验室中的另一分支：AI 生成 UI 实际想达成的最终目标也是如此，我们不仅想让 AI 更好地学习 PRD，还希望在生成 UI 时能充分地应用已有的设计系统。

回到现实，距离实现这个“一步到位”的功能我们还有重重挑战，但这件事却也给了我们另一维度的启发。

一种新的交互：相遇在一个框

我们前文提到了两个关键问题：

• Input 可以不只是文字。进一步，还可以“画一画”。
• Output 出一个完整界面暂时很难。退一步，生成局部？

一个方向进一步，而另一个方向退一步，似乎恰好可以达到一种平衡。我们会发现进退最终会发生相遇，而这个相遇之点或许是一种新的解决方案，它可以是：一个框。

为什么是一个“框”？

因为“框”似乎能恰如其分地既兼顾 Input 的效率性和 Output 的技术可达性。

如果用户在 Motiff 妙多中画一个框，Input 至少可以包括：

• 框相对的大小。
• 框的位置，该位置周围的上下文信息。
• 以及画框以后，还可以输入文字来补充。

而 Output，我们则可以可以聚焦在这个框中具体要表达什么信息，从而更可控的生成用户可能需要的内容。

体验 AI 魔法框

当下，如果你注册了 Motiff 妙多的账号，就可以直接在注册后的新手游乐场中体验 AI 魔法框这个功能，感受这种设计师和 AI 之间的全新交互方式。目前我们对这个功能的定义还是“实验室阶段”，我们相信在不久的将来，它能走出实验室，真正为设计师的工作场景提供价值。

我们也欢迎用户向我们持续反馈对这个功能的建议。