UI 形态变换动效设计模板
一个全面的提示词模板，用于创建与音乐同步的循环 UI 动效设计，其中元素通过多种状态进行形态变换。
提示词
<inputs>
请向我询问：我希望形状变成的 8 到 12 种 UI 状态（例如按钮、加载器、播放器、滑块、开关、标签页、图表、命令面板、Toast 通知），是纯黑白配色还是包含一种强调色，以及一首约 120 BPM 的免版税歌曲（例如来自 Mixkit，可免费商用）。
</inputs>
<direction>
Dribbble 级别的 UI 动效。单一形状，永不切断：每个状态都是同一元素在改变其大小、圆角半径和颜色，同时内容通过短暂的模糊效果进行切换。光标通过真实的点击和拖拽驱动每一次变化。浅暖灰色画布，黑白组件，一款简洁的 UI 字体 (Geist)。处处使用弹簧动画，最多只有微小的过冲。镜头缩放使每个状态填满画面。最后一帧即第一帧，从而实现无缝循环。
禁止事项：弹跳缓动、粒子爆发、光晕、UI 框架上的渐变、不匹配的图标描边、死时间、任何看起来像模板的效果。
</direction>
<structure>
120 BPM，7 小节，每个节拍都有动作发生。
按钮 → 加载器 → 对勾 → 灵动岛 → 带有播放/暂停形态变换的音乐播放器 → 拖动进度条 → 它变成一个音量滑块，当被拖拽超过最大值时拉伸 → 开关在节拍上翻转 → 旋钮变成液态标签指示器 → 标签页展开为自动绘制的图表，悬停时显示工具提示 → 它折叠成 ⌘K → 输入以过滤 → 回车 → Toast 通知 → 回到按钮。
</structure>
<build>
1. 单个 HTML 文件，正方形 1440x1440。所有样式均在 seek(t) 内部根据时间计算得出：不使用 CSS 过渡，不使用计时器，帧之间不携带状态。
2. 弹簧动画采用闭式阶跃响应。如果一个值的目标多次改变，它是每次改变对应的一个弹簧之和，从而保持其为时间的纯函数。
3. 标签指示器的两个边缘分别跟随不同的弹簧，因此前导边缘会超前于后随边缘拉伸。开关旋钮也使用同样的技巧。
4. 拖拽是直接操作：当光标按住时，值根据其位置计算得出。释放时，它会从当前位置回弹。
5. 使用 numpy 分析歌曲以获取节拍网格，并从强拍开始。根据测量到的峰值放置每个 UI 音效。
6. 使用 Playwright 渲染：每帧 4 个子帧，并使用 ffmpeg tmix 在 60fps 下进行混合以实现运动模糊。
7. 在完整渲染之前，先按节拍渲染单帧。修正任何偏离网格、拥挤或难以阅读的内容。
</build>
<gotchas>
切勿在任何被镜头缩放或导致文本渲染模糊的元素上使用 will-change。在形态变换容器内切换的文本需要独立的进入和退出时序，否则会发生重叠。确保最后一帧与第一帧完全一致，包括光标位置和速度，否则循环会出现卡顿。
</gotchas>
<start>
向我询问输入参数，然后在编写任何代码之前，先在节拍网格上展示状态列表给我看。
</start>
如何使用这条提示词
- 1
复制上方完整的提示词。
- 2
打开支持 Claude Opus 5.5 的平台（例如 YouMind），把提示词粘贴进去。
- 3
按你的想法替换主体、风格或细节，然后生成。
这是 YouMind 提示词库里的一条免费 AI 提示词。这里还有成千上万条 视频 提示词，都能免费复制和改用。
探索更多 视频 提示词
更多提示词功能
