☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
零门槛做爆款视频！Seedance 2.0五大应用场景拆解
一、全文速览图哈喽，这里是 Clip 设计夹，今天分享的是「Seedance 2.0 AI 视频应用场景」。
一、全文速览图
25年12月，我制作了一组音乐可视化播放器，有“飞天小女警”、“方块蹦床”、“兔兔滑冰”和“封面粒子”4个主题。在社媒上获得了不错的反馈，某音发了两篇有10w+播放，2w+互动，也在留言区收到很多好评：
可以在这里体验：https://njzneverdie.wystudio.zone
也可以直接看录屏，这是4个主题：
当视频在手机上无法加载，可前往PC查看。这是其中的一个“飞天小女警”主题（视频 00:26—00:43s）：
制作初衷是因为萌生了结合Newjeans品牌来做音乐可视化的灵感，这不是一个盈利性质的项目，仅作为个人在设计 + AI Coding方面的探索。
（内置的歌曲和歌词来源网络）
这篇文章会分享“飞天小女警”播放器的整体制作流程：如何利用设计工具+AI Coding实现音乐可视化和角色动画，回顾踩坑经验，及分享提示词。（AI Coding工具为Cursor）
二、创意起点：像素风游戏概念
11月的某天，好友“三口饼子”突然发我一支Newjeans的MV，说特别喜欢，作为Newjeans的资深粉丝，我是看过的，借此我又重温了一遍。
没有看过的朋友，可以搜歌名《New Jeans》观看，这支MV的动画设计融合了多种风格，情节俏皮灵动。5位成员化身飞天小女警解救小兔，穿梭在不同画风的“平行宇宙”：如古典油画，千禧年卡通， 现代3D潮玩……
我的灵感来源是其中的像素风游戏这个概念，飞天小女警在类似超级玛丽的横版游戏界面里升级打怪：
作为Newjeans的忠实乐迷，我在想，是否可以二创一个小女警“随着音乐飞行”的音乐播放器？听歌的时候，让五位成员化身的小女警陪伴着我。我平时用的音乐播放器大多是静态的画面，而这种音画同步效果自带“卡点”，律动感加倍；同时通过IP素材二创，让场景更沉浸，也能强化乐迷的情感体验。
那天是12月1日，刚好迈进圣诞月。我就想，不如把整个场景设定为圣诞氛围感的夜晚？五位飞天小女警穿着圣诞装扮，飞过飘着雪的城市夜空，城市里的建筑被白雪覆盖，明亮温暖的圣诞装饰透过夜幕发着光...
想象了下，我真的很喜欢这个构想，希望能把它实现出来。因为已经做了方块蹦床等其他3个主题，web的框架（歌曲列表/主题列表/播控）已经有了，现在只需要专注于小女警主题内部的设计和实现。
这里的关键挑战是音频驱动角色飞行的效果，所以第一步，我打算验证这个效果，先做出最小可行产品（MVP），再逐步迭代。
三、音乐驱动：做出角色跟着音乐动起来的MVP
阶段1 实现“随着音乐冲出去”的运动效果
我最初的设想是角色在画面左侧竖向排列，背景向左移动来体现角色向右飞。角色身后有拖尾来展示飞行痕迹，随音乐冲出去越远，拖尾就越长。
根据设想中的画面效果，我从MV里提取了角色静帧和背景图，加上我想要的飞行拖尾，拼了张参考图给AI：
（在真实的商业项目里，角色需要设计师自己原创，或是结合品牌来设计。对于这个个人二创的非盈利作品，更多是为了探索音乐可视化和沉浸听歌体验，我就直接从那支MV里把角色“抠图”出来了。）
示意图有了，现在要让AI通过代码来实现角色随音乐运动，但我不太了解如何设计音乐和运动的对应关系。不过这个拖尾，让我想起了最常见的一类效果即柱状频谱图，每个立柱随着音乐高低变化，是否可以把拖尾当做频谱柱来实现效果呢？
我向AI传递了音乐频谱图的想法，并探讨了在此基础上如何实现：
（因为我做这个主题的时候，网站已经搭好了，如果从头开始做，还需要提到歌曲列表和主题列表、播控、歌曲封面等逻辑）
解答概括来说就是每个角色有自己代表的频谱范围，拖尾/飞多远，是频段当下的能量值决定的：
虽然不确定这个策略是否可行，但AI提供了小成本试错的便利，先运行出来看看，不行就再指挥它改进。于是我就把5个角色的静帧以及歌曲放入文件夹，按照这个策略先动工试试。
很快，完工了。我打开网页观察到的最大问题是，由于“频谱柱”的逻辑就是实时连续伸缩变化，套用这个逻辑会导致角色随音乐一直在连续、高频地前后运动，很抽搐不自然：
而我希望的效果是大部分情况角色是在平稳飞，只在某些时候能随音乐重拍“冲出去一下”。于是把问题反馈给AI修改，不断优化，回看了下聊天记录，一共经过了5轮迭代。
在第5次迭代，我让AI“全面，深刻地复盘这个问题”之后，它意识到，我其实是想要实现一种随音乐的重拍“冲出去”的感觉，应该计算的是“能量相对变化”，而不是“能量绝对值”。
AI重新调整了策略，是我想要的那种随着音乐“冲出去一下”的效果了：
回顾了下这里修改多次才找对方向的原因，一方面因为我不了解音乐驱动的方式都有哪些（只知道“频谱”那种）一开始的指令就偏了；另一方面AI也没能更快地在我后续的反馈里意识到更换策略（一直在频谱逻辑里微调参数）。
写到这里，我也和AI探讨总结了下视觉表现及其适合的驱动方式：
阶段2 让运动效果更真实自然
找到了合适的音乐驱动方式，但运动效果还非常生硬。和AI反馈后，它建议可以让运动模拟真实的物理弹簧，加上惯性和阻力，又经过4次参数微调，达到了比较自然的效果。
到这里，最关键的问题就解决了。考虑到不想遮挡住背景里的元素，以及希望视觉更加平衡，我又把角色的排版改成了居中，还给拖尾增加了爱心效果，最终效果是：
四、赋予生命：给角色加上飞行序列帧
参考静帧延展飞行组图
当前，是用“静帧”来测试效果，虽然调好了音乐驱动的逻辑，但角色本身像“贴纸”在移动。为了让角色有生命力，需要让角色做出飞行的姿态和动作，且能无缝循环，最终效果：
我是利用一套序列帧来达到这个效果。想到毕竟是像素风，动画应该不用很多帧数，打算用5张素材图来做循环动画。
做法是利用之前生成的静帧，作为“参考图”，让AI延展成一套动作，模型用Nano Banana 3 Pro，在Figma、Lovart或Gemini里都可以制作。
提示词（用蓝色角色举例）：
这个8bit像素风格的角色正在摆出“飞行”的姿态，两个肉色的是手臂，两个白色的是脚。衣服和眼睛有蓝色的部分，头发是灰色。请你帮我修改它手脚的动作以拓展成一套连续飞行动作的序列帧，一共6张图片。
要求
- 保持角色形象一致性，角色朝向一致性。
- 动作首尾相接不断循环，我给你的图作为动作1，最后的动作6也循环回动作1。
- 只稍微修改手脚的动作，不要增加任何新元素。
- 背景必须是纯白色。
实际生成后，常见的问题如角色不同部位配色错位、生成了多余的肢体、肢体比例不合理等：
只能多次抽卡并不断调整提示词，并且需要人工微调细节。因为我是在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个性能问题，还按照优先级梳理了表格给我：
后面要做的就是逐一优化了。比如第一个，关于图片资源的就有这么多优化项：
然后我就把这些png格式图片都压缩成它建议的Webp格式。然后又花了3天来优化其他P0和P1的问题，最后确实能体验到加载速度快了很多。
九、用户反馈
在抖音宣布上线后，收到了非常非常多反馈，能感受到我通过这个赠品想传递出去的心意，乐迷们全都收到了：
也收到很多意见建议和bug反馈，我梳理了下：
最近太忙了一直没处理，空了一定先把浏览器问题解决。
到这里这篇文章的所有内容就结束了，回顾了下4个主题整体时间周期如下：
注：时间仅为下班后晚间时段
十、一点表白
3年前跟着小麦老师学跳《Hype Boy》这支舞开始，我就对这个组合深深着迷，五位成员更新了KPOP文化以往给我留下的印象，如歌词描述的那样：“So Fresh So Clean”。后来我没有错过她们任何一支舞的教学，反复听了每首歌，仔细看了许多MV，甚至还认真拉过片。她们音乐里那些对异想天开世界的构建，对热烈青春的描绘，带给了我许多共鸣和启发，让我充满创作的欲望。
很难想象如果没有AI，非视觉和技术专业的普通人要如何去实现各种天马行空的想法。未来的工具一定会更好用，剩下的就是对需求的洞察和去创造的动力。
在创造的路上，我们还有很长的路要走。
用海辛&阿文的话来结尾吧：
只要在行动
就是在向前走
Every step, however small,Is a step forward
