我做了一个把视觉实验变成可交付代码的工具

由于工作中经常需要制作歌词动效、播放器视觉和各种动态效果，我们设计师现在会使用 AI coding，快速验证视觉想法。

我们通常会先描述一个方向：让文字像粒子一样散开，让光线从文字里流出来，或者让画面产生柔和、持续的流动感。然后通过 AI coding，把这些想法快速变成一个可以运行的页面。

这种方式非常适合做视觉探索。我们可以在很短时间内看到一个想法是否成立，也可以不断修改代码，让效果逐渐接近预期。

但在实际工作中，一个能够运行的效果还不够。

如果之后想换一组文字，或者调整粒子密度、下落速度、拖尾长度和颜色，通常还需要重新修改代码。对于设计师来说，我们知道哪里需要变化，但不一定能马上说清楚应该修改哪一部分。久而久之，一个效果往往只能由最初制作它的人继续调整，也很难真正进入团队的工作流程。

所以这次，我做了一个内部使用的文字粒子视觉工具。

让视觉效果可以被直接调整

工具左侧是实时视觉预览，右侧是参数调节面板。

设计师可以直接修改文字内容、粒子密度、粒子大小、下落速度、瀑布数量、拖尾长度、拖尾透明度、文字颜色、粒子颜色、文字底色、光晕和扫光等参数。画面会随着参数变化实时更新。

除了基础参数之外，我还做了两种不同的瀑布模式。

一种是比较轻的细线瀑布，适合更克制、更有速度感的视觉效果；另一种是由多个拖尾叠加形成的柔光瀑布，整体会更厚、更柔和。

设计师可以先选择整体的视觉方向，再继续调整具体细节，而不需要每次都回到代码里寻找对应的实现方式。

工具也支持暂停画面、固定画布尺寸，以及在 Canvas 2D 和 Three.js / WebGL 之间切换。这样既可以验证视觉效果，也可以提前观察它在不同渲染方式下的表现。

把视觉调节变成可以交付的代码

这个工具最重要的部分，并不只是预览和调参，而是它可以把当前版本继续交付给开发。

在视觉预览下方，可以保存当前参数，也可以导出当前版本的完整源码包。

如果设计师觉得某一个版本已经确定，就可以把当前文字、参数、画布尺寸、播放状态和渲染方式一起保存下来。

导出的代码包里包含组件、控制面板、依赖和示例页面。开发可以直接打开运行，再继续把它接入具体的播放器或客户端中。

这和交付一张视觉稿或一段录屏不太一样。

过去开发拿到的通常是一个最终效果，需要根据图片或视频重新理解它，再重新搭建实现。现在他们拿到的是一个已经运行过的版本，以及生成这个版本的参数和代码。

他们可以直接看到：

• 这个效果当前是什么状态；
• 粒子是如何生成的；
• 拖尾和连接关系如何实现；
• 哪些参数可以继续调整；
• 当前版本对应的默认值是什么。

设计师先在工具里完成视觉判断，开发再基于确认过的代码继续接入。这样，视觉探索和开发实现之间就少了一层重复转换。

让一个效果成为团队可以继续使用的东西

我做这个工具，并不是为了让设计师替代开发，也不是为了把所有技术细节都交给设计师处理。

更重要的是，在视觉确认之后，设计师可以把一个效果整理成开发能够直接理解和继续使用的形式。

以前我们可能会说：

“这个效果希望更轻一点。”

“粒子和文字之间希望更连贯。”

“拖尾不要太明显。”

这些判断最终还是需要开发根据效果图和描述，重新翻译成参数和代码。

现在，设计师可以先在工具里验证变化范围，找到一个成立的版本，再把这个版本交给开发。

开发不需要从一张效果图开始猜测，也不需要重新搭建一个完全未知的系统，而是可以在现有代码的基础上判断性能、兼容性和接入方式。

这样做之后，开发面对的就不只是一个抽象的视觉需求，而是一个已经被运行、调整和验证过的实现。

我觉得，AI coding 让我们更快地把视觉想法做出来，而这个工具做的，是把这些一次性的视觉实验继续整理成可以保存、调整和交付的能力。

左侧是视觉探索，右侧是参数调节，下方是代码交付。

当设计师确认一个版本之后，它不再只是一个最终画面，也可以直接变成开发能够理解和继续使用的代码。

这就是我这次做这个内部工具，最想解决的问题。