UI 动效设计工作流指南
详细解析使用 Claude Opus 5.5 制作 UI 动效视频的工作流程，作为一套全面的提示词/指令集。
提示词
关键不在于提示词，而在于一条规则：每一帧都是时间的纯函数。
歌曲 -> numpy 节拍网格 -> Opus 5.5 生成一个 HTML 文件 -> Playwright 渲染 -> ffmpeg 混合
步骤 1 -> 选择一首约 120 BPM 的免版税曲目
步骤 2 -> 向 Opus 5.5 提供 8 到 12 种 UI 状态：按钮、加载器、开关、图表、命令面板
步骤 3 -> 单个 HTML 文件，尺寸 1440x1440，所有样式在 seek(t) 内计算。不使用 CSS 过渡，不使用定时器
步骤 4 -> 弹簧效果采用闭式数学公式，确保任意帧可按任意顺序渲染
步骤 5 -> numpy 识别节拍，使每个 UI 音效都落在测量到的峰值上
步骤 6 -> Playwright 每帧拍摄 4 个子帧，ffmpeg tmix 将其混合为 60fps 的运动模糊
步骤 7 -> 先按节拍渲染单帧，修正偏离网格的部分，再进行完整渲染
数学计算：
120 BPM x 7 小节 = 28 拍 = 14 秒
14 秒 x 60 fps x 4 子帧 = 3,360 次浏览器渲染
如何使用这条提示词
- 1
复制上方完整的提示词。
- 2
打开支持 Claude Opus 5.5 的平台（例如 YouMind），把提示词粘贴进去。
- 3
按你的想法替换主体、风格或细节，然后生成。
这是 YouMind 提示词库里的一条免费 AI 提示词。这里还有成千上万条 视频 提示词，都能免费复制和改用。
探索更多 视频 提示词
更多提示词功能
