UI 动效设计动画提示词
为 Claude Opus 5.5 设计的详细提示词，用于使用 HTML/Canvas 创建精致的、可循环的 UI 动效设计视频，包含弹簧物理效果和节拍同步过渡。
提示词
<inputs>
请向我询问以下 3 点：8-12 个相互变形的 UI 组件（例如按钮、加载器、音乐播放器、音量滑块、切换开关、标签页、图表、命令面板、通知），配色方案（严格黑白或单一强调色），以及一首约 120 BPM 的免版税音轨（例如来自 Mixkit）。
</inputs>
<direction>
创作出值得在 Dribbble 上展示的精致屏幕动效。仅使用一种形状；绝不剪辑场景。通过同一形状改变大小、圆角半径和颜色来表示所有状态，并通过短暂模糊来交换内容。光标通过真实的点击和拖拽驱动所有变化。背景为暖浅灰色，组件为黑白两色。文本使用日语（Noto Sans JP）和英语/符号（Geist）。所有运动均使用带有最小过冲的自然弹簧物理效果。相机缩放以填满每个状态的屏幕。完美循环（最后一帧与第一帧匹配）。禁止事项：弹跳式运动、粒子爆炸、发光效果、组件上的渐变、不一致的图标粗细、静默间隙、模板化美学。
</direction>
<structure>
120 BPM，7 小节（约 14 秒），每个节拍都有动作发生。
按钮 -> 加载器 -> 对勾 -> 灵动岛风格 -> 音乐播放器播放/暂停变形 -> 进度条拖拽 -> 音量滑块拉伸 -> 切换开关同步 -> 液态标签选择 -> 标签展开为自绘制图表 -> 折叠为命令面板 -> 输入/搜索 -> 回车 -> 通知 -> 回到按钮。
</structure>
<build>
1. 单个 HTML 文件，1440x1440 正方形。所有视觉效果均在 seek(t) 内计算。不使用 CSS 过渡/计时器。帧之间无状态。
2. 弹簧作为闭式阶跃响应。叠加计算以处理目标变化。
3. 标签选择：左右边缘使用独立的弹簧，前导边缘延伸得更快。
4. 拖拽：按住时直接操作，释放时弹簧回弹。
5. 使用 numpy 分析音频以获取节拍网格。将声音同步到测量到的峰值。
6. 使用 Playwright 渲染。导出每帧 4 个子帧，并使用 ffmpeg tmix 混合以实现 60fps 的运动模糊。
7. 在完整渲染之前，预览每个节拍的一帧以修复时序/可读性问题。
</build>
<gotchas>
切勿在相机缩放的元素上使用 will-change（会导致文本模糊）。为进入/退出的文本赋予独特的时间参数以防止重叠。确保最后一帧与第一帧完全匹配（包括光标位置/速度）以实现平滑循环。
</gotchas>
<start>
首先询问输入信息，然后在编写代码之前向我展示逐节拍的状态列表。
</start>
如何使用这条提示词
- 1
复制上方完整的提示词。
- 2
打开支持 Claude Opus 5.5 的平台（例如 YouMind），把提示词粘贴进去。
- 3
按你的想法替换主体、风格或细节，然后生成。
这是 YouMind 提示词库里的一条免费 AI 提示词。这里还有成千上万条 视频 提示词，都能免费复制和改用。
探索更多 视频 提示词
更多提示词功能
