来源：import:liubai_public_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0031/original.md · 授权：MIT License Copyright (c) 2026 yihui-dev Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
适用说明
适用场景
来源仓库标注作者 @diamai_；中文解读或分析以留白条目说明为准，效果未实测。 上游：https://github.com/yihui-dev/awesome-opus5-5-videos/blob/92aee2f586ac0715cb3cbcb6384834f98a33383d/prompts/diamai-157697.md MIT 许可（续）： The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
公开署名
@diamai_；留白素材库整理
EXAMPLE
使用示例
同主题的原文、中文解读与对应优化版共用这份示例。
提示词示例输入
示例目标：光标靠近按钮时，按钮发生轻微放大和颜色变化，然后回到初始状态。
文字示意结果
以下结果为人工编写的示意，并非模型实测输出。
依次展示光标远离、靠近、按钮变色和状态恢复；四帧只说明状态关系，不是原提示所要求的完整时长视频或实际交互程序。
实际生成时的文字输入
Create one 4-COLUMN BY 3-ROW contact sheet containing exactly TWELVE equal rectangular animation keyframes in a perfectly aligned grid with thin neutral gutters. Three separate UI animation ideas, one per row. No words, letters, numerals, logos, watermarks or people. ROW 1: on an identical dark indigo interface background, a pale-blue rounded button gradually widens into a compact rounded card across four frames, preserving the same central alignment and soft corner radius. ROW 2: on an identical cream interface background, an arrow-shaped mouse pointer moves toward a blue rounded button; the button gently grows and changes to teal, then returns to its original state across the four frames. ROW 3: on an identical light neutral interface background, a small indigo rounded square transforms into a wider indigo pill and back; two small pale circles remain consistently positioned as purely decorative abstract UI symbols. Keep each row's camera, background and overall palette stable across its four frames. Clean contemporary flat vector illustration, generous margins, sharp simple shapes. These are short conceptual loops, not full-duration videos.
查看输入译文
译文仅供参考；实际生成时使用的是上方原文。
创建一张 4 列 x 3 行的联系表，包含正好十二个等大的矩形动画关键帧，以带有细中性间隙的完美对齐网格排列。三个独立的 UI 动画创意，每行一个。无文字、字母、数字、徽标、水印或人物。第 1 行：在相同的深靛蓝色界面背景上，一个淡蓝色圆角按钮在四个帧中逐渐变宽成一个紧凑的圆角卡片，保持相同的中心对齐和柔和的圆角半径。第 2 行：在相同的奶油色界面背景上，一个箭头形状的鼠标指针移向一个蓝色圆角按钮；该按钮在四个帧中轻微变大并变为青色，然后恢复到其原始状态。第 3 行：在相同的浅中性界面背景上，一个小型的靛蓝色圆角正方形变换为一个较宽的靛蓝色胶囊形状并返回；两个小的淡色圆圈作为纯装饰性的抽象 UI 符号保持位置一致。保持每一行的摄像机、背景和整体色调在其四个帧中保持稳定。干净的现代扁平矢量插图，宽裕的边距，锐利的简单形状。这些是短的概念循环，而非全时长视频。图片与动图示意结果
光标接近按钮后，按钮变为青绿色，再回到蓝色。 素材来自三主题帧图的第 2 行，仅为短循环示意。
静态图片由 imagegen 按上面的输入生成；动图由生成的四帧画面拼接而成，效果仅供参考。
THE PROMPT
提示词正文
> 本文是关联 PRM-0020 的中文解读，包含忠实译文与单独的制作分析；不是英文/日文原文的替代版本。 > [查看保留的原文](https://github.com/Shanvision-star/liubai-prompt-library/blob/main/bundled-library/entries/PRM-0020/original.md) · [查看 GitHub 固定来源](https://github.com/yihui-dev/awesome-opus5-5-videos/blob/92aee2f586ac0715cb3cbcb6384834f98a33383d/prompts/diamai-157697.md) > 原文 SHA-256：75724c09816a05619782aa6992b52846d98c579ce6ca8de2801400dfff6c10b9 > 本次仅翻译与讲解；未安装或执行提示词所列工具，未生成视频，未实测效果。 # 30秒光标驱动状态形变｜中文翻译与制作思路 关联原记录：PRM-0020。独立来源组：awesome-opus5-5-videos · UI动效。 原作者（仓库标注）：@diamai_。英文原文保留在原记录中。下方翻译与制作思路分别呈现；仅完成文本整理，未执行提示词、未制作动画、未实测。 ## 中文翻译 用代码为我制作一段 30 秒的动态设计视频，尺寸为 1080x1080，帧率为 60 fps。音乐是 [path to your track]（你的音轨路径）。 先用 numpy 测量音轨。找出 BPM、各个节拍的时间和音乐的爆发段（drop），然后从它的第一个小节强拍（downbeat）开始截取 30 秒。如果从该位置往后，歌曲过早结束，就选择另一段。使用带有轻微过冲的弹簧缓动，而不是 ease-in-out。加入一个光标，在每次变化之前点击或拖动。每帧使用 4 个子帧，混合形成运动模糊。确保同一个元素连续变形，经过 8-12 个状态，中间没有切镜。将最终结果渲染为 MP4。 ## 制作思路（本次分析，非原文要求） ### 目标效果 这条提示词用“音乐节拍、光标动作、一个持续变形的元素”把多个界面状态串起来。观众应先看到点击或拖动，再看到状态变化，从而理解每次形变的触发原因。它给出了视频规格与动作原则，没有给出具体产品、状态清单或界面布局。 ### 画面与状态顺序 原文明示的顺序是：分析音乐 → 选取从强拍开始的 30 秒片段 → 安排一个元素经历 8-12 个连续状态 → 每次变化前出现光标点击或拖动 → 导出成片。它没有指定这些状态分别是什么，也没有要求首尾相同或循环播放。 可选分镜建议：围绕一个真实产品任务选择状态，例如“开始按钮 → 处理进度 → 结果卡片 → 详情面板 → 数据图表 → 筛选控件 → 确认状态 → 完成提示”。这只是便于讨论的 8 状态例子，不能当作原文自带内容。状态数量最终仍应落在原文的 8-12 个范围内。 ### 动画方法 同一个主元素需要保持可追踪的连续性，可通过改变位置、宽高、圆角和内部内容连接不同状态。原文明示使用弹簧缓动并允许小幅过冲，反对以 ease-in-out 作为这套运动方式；没有规定阻尼、弹簧公式或闭式实现。 光标动作要发生在状态变化之前，拖动时应能看出被操作的对象。每个输出帧合并 4 个子帧以形成运动模糊；这与把成片降到低帧率、依靠视觉拖影不是同一个要求。子帧具体如何取样、如何合成，原文没有说明，需在实际实现时决定并记录。 ### 工具与素材 原文明示 numpy 用于音轨测量，输出是 1080x1080、60 fps、30 秒的 MP4。音乐输入仍是占位符 [path to your track]，必须在真正制作前替换为具体可读取音轨。原文还要求定位 BPM、节拍时间和 drop；不能仅凭估计 BPM 就声称已完成这三项测量。 原文没有指定 HTML、Canvas、GSAP、Playwright、ffmpeg、字体或品牌颜色。可选实现建议：沿用现有网页或绘图项目的技术栈，准备支持逐帧输出与子帧合成的渲染流程，再选择能够导出 MP4 的编码工具。工具选择属于后续实施决策，本次未安装或运行任何工具。 ### 落地步骤与验收点 1. 准备实际音轨，测量 BPM、节拍位置和 drop，确认所选强拍之后有足够的 30 秒素材；不足时按原文改选片段。 2. 与产品内容一起确定 8-12 个状态，并把每次变化和前置光标动作放到同一时间表。按节拍安排变化是本次落地建议；原文没有要求每一拍都必须变化。 3. 先做主元素的连续形变，再加入内容切换与光标。逐段检查是否出现突然换成另一个元素、硬切或光标动作晚于结果的问题。 4. 加入每帧 4 个子帧的混合，输出 30 秒、1080x1080、60 fps 的 MP4。 验收对照：规格、格式、状态数量、无切镜、轻微过冲、变化前的光标操作、音乐片段长度及子帧合成都需分别核查。可补充检查运动模糊是否让小字难以辨认，以及过冲是否使控件越界。上述是未来制作时的检查清单，不代表本次已经渲染或验证过效果。 ### 如何替换内容复用 保留 30 秒规格和光标先行的动作关系，将状态换成自己产品的真实任务流程；音乐路径换成项目使用的音轨，重新测量节拍与片段长度。品牌色、文案、图表和图标可随状态更换，但应让主元素形变的连接关系仍然清楚。换成长文案或更复杂数据后，应调整各状态停留安排，并再次检查阅读时间；不要在无依据时新增“一拍一个状态”或“首尾无缝循环”的限制。
提示词仅供参考，请结合实际场景调整，并核实 AI 生成结果。