一个音量条原型，暴露了AI产品设计的底层能力差距

很多人以为这是个“Figma 教程”，但真正炸裂的是：一个看似简单的音量条，完整演示了如何用变量、条件和表达式，搭出接近真实产品逻辑的交互原型。这不是设计技巧，而是AI时代产品人必须具备的系统建模能力。

最反直觉的点：这不是在“画原型”，而是在“写逻辑”

视频一开始就做了一件反直觉的事：完全不急着连交互，而是先定义变量。音量不是一段固定宽度的矩形，而是一个叫 volume 的数值变量。最大音量不是“143px”，而是 max volume。每次点击加减按钮，不是“动画到某一帧”，而是“执行一次数学表达式”。这一步非常关键——它把原型从“页面跳转工具”，升级成了“可计算系统”。

这也是很多AI产品团队原型失败的根源：UI看起来像真的，但内部没有状态、没有约束、没有条件。一旦你引入变量，原型立刻具备了三个特性：可推演、可扩展、可复用。你不是在描述结果，而是在定义规则。

真正有料的部分：用条件表达式逼近真实产品边界

加号按钮的逻辑不是简单的“volume += 10”，而是：如果 volume < max volume，才允许增加。这一行 conditional，看起来平平无奇，却是产品与玩具的分水岭。因为真实世界里，所有系统都有边界条件。

更妙的是，这个示例没有把“10”写死，而是引入 increment 变量，用 max volume / increment 来决定每一步变化。这意味着什么？意味着当你想把音量从 10 档改成 20 档，甚至适配另一套尺寸体系，你只改一个变量就够了。

这和AI系统里的超参数、阈值设计如出一辙：不是把数值写在逻辑里，而是抽象成可以被统一调度的控制点。Figma 这个例子，本质上是在教你如何把产品交互写成“可配置的函数”。

为什么这对AI从业者尤其重要

在AI产品中，我们越来越多地面对连续值、阈值触发和状态切换：置信度、温度、风险等级、自动/警告模式。这些东西用静态原型是表达不出来的。

这个音量条示例，其实已经预告了下一步：当音量达到某个区间，图标切换、触发高音量警告。注意，这不是“设计稿换一张图”，而是“变量跨过阈值，引发状态变化”。

如果你能在原型阶段就把这些逻辑跑通，工程、设计、AI 三方的沟通成本会直接下降一个量级。你讨论的将不再是‘像不像’，而是‘规则对不对’。

总结

这个视频最值得反复看的，不是具体操作步骤，而是背后的思维迁移：把设计当成一个有状态、有边界、有参数的系统。对AI从业者来说，这意味着你可以更早地验证交互逻辑，更清晰地定义阈值行为，也更容易和工程对齐。一个建议：下次做AI产品原型时，先问自己三个问题——状态是什么？边界在哪里？哪些值应该被参数化？能回答清楚，你已经领先一半的人。

关键词： Figma变量， 交互原型， AI产品设计， 条件逻辑， 系统化设计

事实核查备注： 视频标题、发布时间（2024-05-14）；变量名称 volume、max volume、increment；最大宽度数值 143px；交互逻辑为条件判断而非直接设置