Opus 5.5 单文件 HTML 的 UI 变形动效提示词
本提示词由 @twoclipping 在 X 上开源分享，用于指导 Claude Opus 5.5 生成一段单文件 HTML 纯代码制作的 UI 连续变形动画。
一个形状在按钮、加载器、播放器、滑块、标签、图表和命令面板之间连续变形。作者公开了可复用的完整 XML 模板，明确要求单个 1440×1440 HTML 文件，并且每帧样式完全由 seek(t) 确定性计算。
- 原帖链接：https://x.com/twoclipping/status/2103273003555402193
- 开源地址：原帖直接公开 6 节完整 XML 模板
中文翻译提示词
Opus 5.5 做动态设计强得离谱。
整段视频全是代码，零 After Effects。
我开源这套动效设计的提示词模板。
拿去复现吧 ↓
<inputs>
请向我索取：8 到 12 种我希望形状演变而成的 UI 状态（例如按钮、加载器、播放器、滑块、开关、标签页、图表、命令面板、Toast 提示），纯黑白配色或一种点缀强调色，以及一首 120 BPM 左右的免版税音乐（例如 Mixkit，可免费商用）。
</inputs>
<direction>
Dribbble 级别的 UI 动态设计。单一体态，全程不切镜头：每个状态都是同一个元素在改变尺寸、圆角和颜色，同时其内部内容伴随短暂模糊进行切换。光标通过真实的点击和拖动驱动每一次变化。浅暖灰画布，黑白组件，一种干净利落的 UI 字体（Geist）。全处采用弹簧运动，最多允许极微小的过冲。镜头动态缩放，使每个状态都填满画幅。最后一帧与第一帧完全一致，形成无缝循环。
严禁：弹跳缓动（bouncy easing）、粒子爆炸、发光、UI 边框上的渐变、粗细不一的图标描边、静止垃圾时间，以及任何有模板味的处理。
</direction>
<structure>
120 BPM，7 小节，每一拍都有事件发生。
按钮 → 加载器 → 打勾确认 → 灵动岛 → 带有播放/暂停形变图标的音乐播放器 → 拖动进度条 → 变为拉过最大值时会拉伸的音量滑块 → 随节拍翻转的开关 → 开关旋钮变为液态标签指示器 → 标签页展开为自行绘制的图表，悬停时带有提示框 → 折叠为 ⌘K 命令面板 → 输入过滤 → 回车确认 → Toast 提示 → 回到初始按钮。
</structure>
<build>
1. 单个 1440×1440 正方形 HTML 文件。所有样式都在 seek(t) 内纯由时间计算得出：不使用 CSS 过渡、不使用定时器、帧与帧之间不保留任何状态。
2. 弹簧运动采用闭式阶跃响应。若一个数值发生多次目标变动，其值为每次变动对应弹簧的总和，因此它始终是时间的纯函数。
3. 标签指示器的两条边缘分别搭载不同的弹簧，因此前导边缘会拉伸领先于后随边缘。开关旋钮同理。
4. 拖动行为属于直接操作：按住光标时，数值由其位置实时计算；释放时，从当前位置依弹簧弹回。
5. 使用 numpy 分析歌曲以建立节拍网格，并从强拍开始。根据测量到的峰值精准安放每一个 UI 音效。
6. 使用 Playwright 渲染：每帧采集 4 个子帧，通过 ffmpeg tmix 混合合成 60 fps 的运动模糊。
7. 在完整渲染前，先每拍渲染一帧检查画面。修复任何偏离网格、过于拥挤或难以辨认的内容。
</build>
<gotchas>
绝对不要在相机缩放的任何元素上加 will-change，否则文字会渲染模糊。在形变容器内切换的文字必须具备独立的出入场时间控制，否则会发生重叠。必须确保最后一帧与第一帧完全相同（包括光标位置与速度），否则循环播放时会出现卡顿抽搐。
</gotchas>
<start>
先向我索取输入素材，然后在编写任何代码之前，在节拍网格上向我展示状态列表。
</start>原版提示词
opus 5.5 is f*cking cracked at motion design
this entire video is code, 0 after effects
im open sourcing the prompt template for these motion designs
steal it to recreate these ↓
<inputs>
Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use).
</inputs>
<direction>
Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops.
Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.
</direction>
<structure>
120 BPM, 7 bars, something happens on every beat.
Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button.
</structure>
<build>
1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.
2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time.
3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob.
4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was.
5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read.
</build>
<gotchas>
Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters.
</gotchas>
<start>
Ask me for the inputs, then show me the state list on the beat grid before you write any code.
</start>