Matrix 首页推荐 

Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。 

文章代表作者个人观点，少数派仅对标题和排版略作修改。

25 年 12 月，我制作了一组音乐可视化播放器，有「飞天小女警」「方块蹦床」「兔兔滑冰」和「封面粒子」4 个主题。在社媒上获得了不错的反馈，某音发了两篇共计 10w+ 播放，2w+ 互动，也在留言区收到很多好评：

可以在这里体验：https://njzneverdie.wystudio.zone。也可以直接看录屏，这是 4 个主题：

制作初衷是因为萌生了结合 Newjeans 品牌来做音乐可视化的灵感，这不是一个盈利性质的项目，仅作为个人在设计 + AI Coding 方面的探索（内置的歌曲和歌词来源网络）。

这篇文章会分享「飞天小女警」播放器的整体制作流程：如何利用设计工具 + AI Coding 实现音乐可视化和角色动画，回顾踩坑经验，及分享提示词（Vibe Coding 工具为 Cursor）。

创意起点：像素风游戏概念

11 月的某天，好友「三口饼子」突然发我一支 Newjeans 的 MV，说特别喜欢，作为 Newjeans 的资深粉丝，我是看过的，借此我又重温了一遍。

没有看过的朋友，可以搜歌名《New Jeans》观看，这支 MV 的动画设计融合了多种风格，情节俏皮灵动。5 位成员化身飞天小女警解救小兔，穿梭在不同画风的「平行宇宙」：如古典油画，千禧年卡通， 现代 3D 潮玩……

我的灵感来源是其中的像素风游戏这个概念，飞天小女警在类似超级玛丽的横版游戏界面里升级打怪：

作为 Newjeans 的忠实乐迷，我在想，是否可以二创一个小女警「随着音乐飞行」的音乐播放器？听歌的时候，让五位成员化身的小女警陪伴着我。我平时用的音乐播放器大多是静态的画面，而这种音画同步效果自带「卡点」，律动感加倍；同时通过 IP 素材二创，让场景更沉浸，也能强化乐迷的情感体验。

那天是 12 月 1 日，刚好迈进圣诞月。我就想，不如把整个场景设定为圣诞氛围感的夜晚？五位飞天小女警穿着圣诞装扮，飞过飘着雪的城市夜空，城市里的建筑被白雪覆盖，明亮温暖的圣诞装饰透过夜幕发着光...

想象了下，我真的很喜欢这个构想，希望能把它实现出来。因为已经做了方块蹦床等其他3个主题，web 的框架（歌曲列表/主题列表/播控）已经有了，现在只需要专注于小女警主题内部的设计和实现。

这里的关键挑战是音频驱动角色飞行的效果，所以第一步，我打算验证这个效果，先做出最小可行产品（MVP），再逐步迭代。

音乐驱动：做出角色跟着音乐动起来的MVP

阶段 1：实现「随着音乐冲出去」的运动效果

我最初的设想是角色在画面左侧竖向排列，背景向左移动来体现角色向右飞。角色身后有拖尾来展示飞行痕迹，随音乐冲出去越远，拖尾就越长。

根据设想中的画面效果，我从 MV 里提取了角色静帧和背景图，加上我想要的飞行拖尾，拼了张参考图给 AI：

示意图有了，现在要让 AI 通过代码来实现角色随音乐运动，但我不太了解如何设计音乐和运动的对应关系。不过这个拖尾，让我想起了最常见的一类效果即柱状频谱图，每个立柱随着音乐高低变化，是否可以把拖尾当做频谱柱来实现效果呢？

我向 AI 传递了音乐频谱图的想法，并探讨了在此基础上如何实现：

AI 的解答概括来说就是每个角色有自己代表的频谱范围，拖尾/飞多远，是频段当下的能量值决定的：

虽然不确定这个策略是否可行，但 AI 提供了小成本试错的便利，先运行出来看看，不行就再指挥它改进。于是我就把 5 个角色的静帧以及歌曲放入文件夹，按照这个策略先动工试试。

很快，完工了。我打开网页观察到的最大问题是，由于「频谱柱」的逻辑就是实时连续伸缩变化，套用这个逻辑会导致角色随音乐一直在连续、高频地前后运动，很抽搐不自然：

而我希望的效果是大部分情况角色是在平稳飞，只在某些时候能随音乐重拍「冲出去一下」。于是把问题反馈给 AI 修改，不断优化，回看了下聊天记录，一共经过了 5 轮迭代。

在第 5 次迭代，我让 AI「全面，深刻地复盘这个问题」之后，它意识到，我其实是想要实现一种随音乐的重拍「冲出去」的感觉，应该计算的是「能量相对变化」，而不是「能量绝对值」：

AI 重新调整了策略，是我想要的那种随着音乐「冲出去一下」的效果了：

回顾了下这里修改多次才找对方向的原因，一方面因为我不了解音乐驱动的方式都有哪些（只知道「频谱」那种）一开始的指令就偏了；另一方面 AI 也没能更快地在我后续的反馈里意识到更换策略（一直在频谱逻辑里微调参数）。

写到这里，我也和 AI 探讨总结了下视觉表现及其适合的驱动方式：

阶段 2：让运动效果更真实自然

找到了合适的音乐驱动方式，但运动效果还非常生硬。和 AI 反馈后，它建议可以让运动模拟真实的物理弹簧，加上惯性和阻力，又经过 4 次参数微调，达到了比较自然的效果。

考虑到不想遮挡住背景里的元素，以及希望视觉更加平衡，我又把角色的排版改成了居中，还给拖尾增加了爱心效果，最终效果是：

赋予生命：给角色加上飞行序列帧

参考静帧延展飞行组图

当前，是用「静帧」来测试效果，虽然调好了音乐驱动的逻辑，但角色本身像「贴纸」在移动。为了让角色有生命力，需要让角色做出飞行的姿态和动作，且能无缝循环，最终效果：

我是利用一套序列帧来达到这个效果。想到毕竟是像素风，动画应该不用很多帧数，打算用5张素材图来做循环动画。

做法是利用之前生成的静帧，作为「参考图」，让AI延展成一套动作，模型用 Nano Banano 3 Pro，在 Figma、Lovart 或 Gemini 里都可以制作。

提示词（用蓝色角色举例）：

这个 8bit 像素风格的角色正在摆出「飞行」的姿态，两个肉色的是手臂，两个白色的是脚。衣服和眼睛有蓝色的部分，头发是灰色。请你帮我修改它手脚的动作以拓展成一套连续飞行动作的序列帧，一共 6 张图片。

要求：

1、保持角色形象一致性，角色朝向一致性。

2、动作首尾相接不断循环，我给你的图作为动作 1，最后的动作 6 也循环回动作1。

3、只稍微修改手脚的动作，不要增加任何新元素。

4、背景必须是纯白色。

实际生成后，常见的问题如角色不同部位配色错位、生成了多余的肢体、肢体比例不合理等问题：

只能多次抽卡并不断调整提示词，并且需要人工微调细节。因为我是在 Figma 和 Gemini 官网制作，这两个工具无法像 Lovart 那样生成多张图片，所以我还需要把一张大图里的 6 张小图分别裁切出来（不方便，但我发现生成在 1 张大图里的角色一致性比生成多张单独图片要好）。

小细节是，在裁切单图的时候要确保单独图片采用同一个画布尺寸，同一条对齐基线，以避免帧动画产生抖动、闪烁。

序列帧效果：

此后，我还生成了一些 8bit 的圣诞装扮比如圣诞帽、围巾和蝴蝶结，给角色穿戴上就完成了最终效果：

之前我们已经完成了静帧运动，现在序列帧素材全都准备好了就可以让 AI 把静帧换成序列帧了：

首次运行后，动作太快太闪烁，我就让AI把动画放慢了些达到了比较自然的动态。

没想到 AI 在这里还埋下了一个隐患：对于多久切换一张动作图，它写的策略是基于「设备画面渲染间隔」，逻辑是：设备渲染 6 张画面的时候，角色换一次动作图。（和设备屏幕自己的刷新率有关）

在 60fps 的设备下是 0.1s 换一次动作，但是在 120fps 下，就是0.05s换一个动作，每个设备上看到的角色动作快慢是不同的。有一次我电脑快没电了，系统开启了节能模式，帧率下降了，然后整个网站所有的动画都变得非常缓慢。后来在一次优化中，才改成了写定 0.1s 换一次动作图而不是基于设备渲染画面，这样才能保证无论什么设备帧率都不影响飞行动作速度。

画布式设计Agent让素材制作提效

如「序列帧」这种美术素材制作或者前期的灵感发散，更推荐画布式设计 Agent 工具（如 Lovart），区别于对话式 AI 的线性呈现（如 Gemini），画布能让灵感和创意自由地组合和延伸，同时也方便直接在图片上编辑。其实即梦，海螺，可灵，也都支持画布交互了，但只有 Lovart 有 Nano Banano，其他的生图模型都没有香蕉好用。

由于当时我只有 Figma 会员，因此所有素材设计都在 Figma 完成，但 Figma 的 AI 生图不是 agent 的形态，能力还很有限，我的制作效率也受限了。

Figma 的 AI 生图改图是单次编辑的交互方式，没有对话上下文，提示词无法保留和复用。我经历了很多次因为没有提前把提示词保存一份，导致生成后提示词全部消失，要重新输入。Lovart 支持一次生成「多张」独立的图片，Figma 只能把多图片生成在「一个图片」里，要分开只能自己一张张手动裁切。

Figma 里改图，新生成的图会替换原图，如果需要用原图进行多次创作，就需要提前复制一份不然原图就找不到了。不过在图片素材已经生成完毕，需要精调细节或排版布局的时候，Figma 丰富的各种编辑功能则更能胜任。比如角色序列帧的人工精修，就需要制作一些高斯模糊的小矩形来修补细节。

搭建场景：三层视差滚动背景

生成首尾无缝循环的图片

最后一大任务，就是场景设计。

我是先用原 MV 里的截图和AI探讨，才了解到：要分别生成 3 张无缝循环的背景图，再让它们以不同的速度往左移动，如果不做视差，就会感觉像一张「贴纸」在移动。

了解了整体方案，下面重点就是制作 3 层首尾相连无缝循环的背景。

我心里最没底的地方，就是让图片可以「首尾无缝衔接」，这是方案能推进的关键。于是我让 AI 帮忙写生图提示词，提供了原 MV 截图作为参考图，并说明要改成「夜晚」、「下雪」、「圣诞」的氛围。

AI 输出提示词后，用 Nano Banano 试了下，原来确实只要在提示词里直接指明「水平无缝循环」就能生成首尾相接的图片：

根据 AI 提供的提示词，我先把较为简单的远景和前景生成好。这两层图片画面内容构成比较简单重复，不是视觉重心，分别只需要生成一张图来无限循环就足够了。

远景提示词：

像素艺术游戏背景纹理，2D 横版游戏。深蓝色的夜空渐变，天空中有乌云漂浮。远处是非常模糊的摩天大楼剪影，使用深海军蓝和紫色调来表现深度。极简细节，强调氛围感，8 位复古风格。水平无缝循环，比例是 16:9。

复制了两张图前后拼了下，确实做到了无缝相连。前景提示词：

像素艺术游戏背景纹理，2D 横版游戏。沿着画面底部水平排列的雪，白色，带有冷蓝色的夜间阴影。极简细节，强调氛围感，8 位复古风格，纯白背景。水平无缝循环，比例是 16:9。

最棘手的是中景，因为它承载了视觉的重心，需要展示出丰富多样、错落有致的城市建筑，圣诞装饰。如果中景也只用一张图来循环，很快就会循环到同一个元素，观感上会很单调重复。所以我打算让中景的内容铺得更长一些，因为 AI 目前没法生成比例很细长的图，所以我打算为中景制作 3 张图，图 123 顺序衔接，图1的左侧再和图 3 的右侧无缝衔接：

之前的方式只能做单张图的首尾衔接，无法做到让图1的右侧和图2的左侧无缝衔接。最后我选择了最「传统」也最「可控」的方式：先制作出建筑单体「零件」，然后像搭积木一样，手动把一个个建筑排布组合出图 1、2、3。只需要在图片的接缝处（如图 1 结尾和图 2 开头）放置同一个建筑即可保证无缝循环。

但我发现 AI 提供的提示词无法直接生成MV里那种形状多样、带有各式窗户纹理的建筑风格，最后我决定，先让 AI 把 MV 里的建筑拆成单个建筑，然后做风格参考，来生成类似风格的建筑再拼起来：

MV 画面拆分建筑的提示词：

把这张图里的建筑，拆分成单独的一个个建筑，彼此之间要有留白，背景纯白。

参考拆分后的建筑生成更多类似建筑：

参考这张图的设计风格，生成一系列类似设计风格和色调的 2D，8bit 复古风格的建筑素材，每个建筑之间留有足够的空隙以便我之后单独取用。 请注意，不要添加任何深色描边，保持这种简约色块的风格。建筑也不要太复杂了，就类似参考图例这种简单的构成。

手动排布组合成图 1、图 2、图 3，这个过程还挺有趣的，有种拼图的感觉：

继续用 nano banano 编辑图片，让雪覆盖在建筑上，然后把 3 层背景都放上后的效果：

看起来还不错。

既然设定是圣诞夜，那就再生成一些圣诞元素添加到场景里，氛围感更浓了：

接着就把所有图片依次导出，尤其注意中景和前景都必须是透明底png图片。

让图片向左做视差移动

这部分是整个项目最轻松的，描述需求好后，一次成功：微调了下滚动速度，以及修复了接缝处的一条细线。

彩蛋、歌词和氛围感

一些乐迷们心领神会的细节

作为 Newjeans 的乐迷，我想在场景里增加更多艺人相关的元素，有点小彩蛋的感觉，让乐迷能在发现后会心一笑。

最喜欢的细节设计：我把东方明珠塔的尖顶和Newjeans应援棒的兔子形状结合，让艺人的元素悄悄藏在了建筑里。灵感来自于 Newjeans《Supernatural》的 MV，这支 MV 特别奇幻充满想象力，画风很 City Pop。

除此之外，我还在一些建筑的外墙增加了带有「NJZ」字样的灯牌，并让一栋摩天大楼外墙亮起的灯组成爱心形状。在远景里，我安排了巨型氛围组成员兔子、姜饼人和麋鹿。

氛围组角色运动也是用序列帧的方式，这个兔子滑冰后期修了很久，因为 AI 没法生成这种「顺拐」的动作。

下一场充满氛围感的雪

圣诞夜似乎总和雪有关，雪是提升氛围感的关键。直接让 AI 开始生成：

让歌词漂浮在场景里

如果希望和歌词能跟着歌曲的进度同步展示，是需要准备「带时间戳」的歌词的，这个挺不好找，最后是 Manus 帮我搜到的。大部分歌曲的时间戳歌词很难找，只能给 TA 歌曲视频让 TA 边听边记（这个效果就不是非常精准，后面还做了一些人工校准）。

对于歌词的展示，我期望的感觉是：歌词不应该僵硬地贴着， 而是要像在水里一样自由漂浮。一开始我提供了一张示意图并描述了想法让AI先开始做，我也完全没底 AI 是否能理解并实现我要的「漂浮感」。不过一次就实现了，后续就迭代一些动画细节，比如漂浮的位移和抖动频率、防重叠最小间距、渐隐渐显、最大宽度及折行等：

以上就是这个项目所有重点部分了。测试完 4 个主题的可视化效果、UI 控件交互和自适应效果后，终于到了部署上线这一步。

部署上线

对于这类非商业项目，GitHub 托管 + 云平台（Vercel/Cloudflare/Netlify）部署是最高效的方案。代码同步到 GitHub 后，云平台关联 GitHub 仓库，之后每次提交代码到 GitHub，网页都会全自动重新部署上线。

不过直接用这些平台提供的默认二级域名（xxx.netlify.app/xxx.pages.dev），由于墙的存在会导致国内访问不稳定。

比如我最初部署在 Cloudflare，域名是 njzneverdie.pages.dev，时常加载不出内容，解决办法是绑定一个自定义域名，我在腾讯云买了一个域名后访问稳定了很多。

如果是商业化项目且用户都在国内，按规定必须走 ICP 备案且部署在境内云服务器（腾讯云/阿里云），否则有合规风险。如果项目是面向海外，那就完全没有访问不稳定的问题了。

性能优化

之前都是在本地直接打开网站，体验非常丝滑。但是部署后从网址上打开，能感觉到加载速度极慢，尤其是小女警主题，角色、场景需几十秒才缓慢加载出来。

和 AI 探讨了下原因，它找到了 11 个性能问题，还按照优先级梳理了给我：

用户反馈

在抖音宣布上线后，收到了非常非常多反馈，能感受到我通过这个赠品想传递出去的心意，乐迷们全都收到了：

也收到很多意见建议和 bug 反馈，我梳理了下：

最近太忙了一直没处理，空了一定先把浏览器问题解决。到这里这篇文章的所有内容就结束了，回顾了下 4 个主题整体时间周期如下：（注：时间仅为下班后晚间时段）

一点表白

3 年前跟着小麦老师学跳《Hype Boy》这支舞开始，我就对这个组合深深着迷，五位成员更新了KPOP文化以往给我留下的印象，如歌词描述的那样：「So Fresh So Clean」。后来我没有错过她们任何一支舞的教学，反复听了每首歌，仔细看了许多 MV，甚至还认真拉过片。她们音乐里那些对异想天开世界的构建，对热烈青春的描绘，带给了我许多共鸣和启发，让我充满创作的欲望。

很难想象如果没有 AI，非视觉和技术专业的普通人要如何去实现各种天马行空的想法。未来的工具一定会更好用，剩下的就是对需求的洞察和去创造的动力。

在创造的路上，我们还有很长的路要走。用海辛&阿文的话来结尾吧：

只要在行动

就是在向前走

Every step, however small,
Is a step forward

> 关注 少数派小红书，感受精彩数字生活 🍃

> 实用、好用的 正版软件，少数派为你呈现 🚀