背景：一个很小，但很急的任务
这是一个很小，却很典型的需求。
视频编辑准备增加“背景音效优化”功能，用户可以选择不同的声音风格。我们需要为几种风格设计对应的图案或图标，让人不用逐个试听，也能先对它们的差别有个大致感觉。
留给我们的时间只有一天，中间还夹着别的事。
按以往流程，交互要先梳理场景，视觉尝试静态方向，动效设计师再把动画做出来。效果放回界面后，如果尺寸不合适，或团队有了新想法，几个角色还得来回调整。
这次我们换了个做法：让 AI 把视觉尝试、动效实现和现场调整尽量串在一起。做完马上放进界面看，不合适就继续改。
拿到任务后，我先盯住三个问题：
- 几种声音风格能不能一眼区分。
- 图案缩进界面后，仍然要像一个明确、可点击的功能点，不能反过来抢走注意力。
- 动效要能稳定循环，后续也得好改。
思路：给抽象的声音找一套视觉语汇
我快速看了一圈声音类产品。比起具象图标，粒子或线条更适合表现声场的差别，也便于用代码实现。于是，我把“声音风格”拆成几个可以直接观察和调整的变量：
- 形状：圆润还是有棱角，边界清不清楚
- 节奏：平稳、轻快、悠长，还是有冲击力
- 粒子 / 线条：大小、密度，以及聚拢和散开的关系
- 幅度：克制、舒展，还是强烈
- 延续性：瞬间跳动、平滑过渡，还是带有拖尾
- 色彩：用冷暖拉开感受上的差别
这里最费脑子的，是把“温暖、透亮、均衡、保真”这些感受词，翻译成画面和代码都能理解的运动规则。比如“温暖”，我会先想到圆润的形状、缓慢的上下起伏，再配一组平稳舒缓的暖色粒子。
行动：试了三轮，才把路走顺
一开始，我在两个方案之间犹豫：直接生成视频，或者用代码做。
粒子和线条本来就是代码动效里常见的表现形式，我之前做 p5.js 音画交互时也接触过，很多细节都能单独调整。直接生成视频虽然快，但只要有一个地方传达不准，整段就可能要重来。最后我选了代码方案。做完这次尝试后，我也顺手整理了两种方式各自适合的场景，方便以后判断。
| 工具方式 | 输入内容 | 生成过程 | 输出内容 | 优势 | 局限 | 更适合的场景 |
|---|---|---|---|---|---|---|
| 即梦等视频生成工具 | 文字描述、参考图、首尾帧 | 黑盒生成，要等完整结果出来 | 视频或 GIF | 擅长有机、复杂、有氛围感的运动 | 修改成本高，很难精确控制局部和时间线 | 概念视频、氛围背景、不规则运动、一次性展示 |
| GPT + Codex | 文字、参考图、组件、运动规则和代码约束 | 生成代码后持续修改，可以实时运行 | HTML、Canvas、SVG、WebGL 等可编辑效果 | 可调参、可循环、可交互，也容易适配界面 | 前期要把感受翻译成明确的规则 | 产品界面动效、交互反馈、需要长期维护的动态组件 |
第一轮：先靠描述做 3D 粒子
我先把粒子的形态、运动方式、空间层次和整体氛围交给 AI，希望用一个有纵深感的 3D 粒子场来表现音乐律动。第一版很快就出来了。
单独看，它很抓眼。塞回真实界面，问题也马上冒了出来：
- 空间层次太多，粒子也太密
- 缩小以后看不出明确的视觉焦点
- 动态范围太大，会干扰界面里的其他信息
- 更像一张氛围背景，不像边界清楚的功能入口
这一轮让我意识到，动效成立与否，必须放到最终界面、真实尺寸和具体的交互角色里判断。它的任务不是证明“这里能动”，而是帮用户理解并点选这个功能。
第二轮：借成熟组件，把范围收窄
为了少抽几次盲盒，我转去找成熟的动态组件，最后选了 React Bits 的 Strands 作为参考。
这次我不再只给一段抽象描述，而是先给 AI 一个明确的动态结构，再让它基于这个组件生成不同声音风格的变体。
结果确实稳了。我大致能预判画面的形态和基础运动逻辑，AI 对设计意图的误解也少了很多。
新问题同样很明显：Strands 的形态已经定得比较死，运动方式也单一，很难真正拉开四种声音风格的差别。成熟组件让我知道结果大概会长什么样，也同时框住了继续探索的空间。
所以，参考组件适合帮我定方向，却不能替我为每种声音重新设计运动规则。
第三轮：先定关键帧，再让代码动起来
第三轮，我把视觉定义和动态实现拆开，不再逼一个工具同时做好两件事。
我先收集与声音特征有关的意向图，整理成情绪板，再用 image-to-image 生成静态关键帧。这一步先解决几件事：
- 粒子的基本形态
- 画面的疏密关系
- 主体在容器里的占比
- 视觉重心和留白
- 四种风格在静态画面里的差别
静态画面一确定，后面的判断轻松了很多。
把关键帧放进真实界面后，我先确认它像不像一个合适的功能入口。通过之后，问题就从开放的“它该长什么样”，缩小成更具体的“它该怎么动”。
接着，我用 Codex 把静态视觉还原成可以运行的粒子动效。第一版代码已经能动，但粒子的方向、律动频率和整体节奏都不太对。如果继续用“快一点”“柔和一点”“更有节奏”这类描述来回改，速度很慢，而且每次生成还可能同时动到好几个变量。
于是，我做了这次最有效的一步：
别再用 Prompt 抽盲盒，把真正影响结果的参数露出来。
我临时搭了一套调参面板，又加上时间线控制，把这些变量变成可以实时调整的参数：
- 粒子速度
- 运动振幅
- 粒子大小和密度
- 运动方向
- 扩散和回落的时机
- 拖尾长度
- 缓动曲线
- 循环周期
原来要来回描述几轮的细节，现在拖动参数就能立即验证。
为了让循环和衔接稳下来，我又用 GSAP Skill 建立时间线和缓动关系，并结合 Emil 的动效 Skill，继续调整节奏、惯性和循环细节。
最后，方案变成了三个彼此独立的控制层：
- 静态关键帧决定视觉语言
- 代码系统决定运动规则
- 参数面板校准节奏
到这一步，AI 做的已经不是一次次替我出图，而是帮我搭好一个能反复试的工作环境。怎么调、最后选哪一版，还是由我来判断。
结果
用这套方式，我们在半天内完成了 4 种声音风格的关键动效，并让它们真正适配产品界面。
真正省事的是，它们不是四段定死的视频，而是同一套系统里的四组参数：
- 新增一种风格时，可以复用原来的粒子系统
- 想让动效安静一点，直接降低振幅和速度
- 要改变运动方向，不必重做整段视频
- 比较多个版本时，可以快速保存不同的参数组合
- 团队临时提出新想法，也能当场试给大家看
过去要在交互、视觉和动效之间来回传递的问题，现在我可以在同一个界面里试完。