GitHub
[awesome-opus5-5-videos · UI动效] 中文解读｜PRM-0013｜UI组件一镜到底变形循环（优化版 v002）
留白公开素材集中的提示词条目。；优化版 v002，效果未实测。
来源：import:liubai_versions_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0024/optimized-v002.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:
适用说明
适用场景
优化版 v002；使用者确认拥有本站公开转载权或授权。 本站原文：http://promptlab.zhichow.com/prompts/p-63094990c0284936ab3340d5051fe463 来源仓库标注作者 @twoclipping；中文解读或分析以留白条目说明为准，效果未实测。 上游：https://github.com/yihui-dev/awesome-opus5-5-videos/blob/92aee2f586ac0715cb3cbcb6384834f98a33383d/prompts/twoclipping-402193.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.
公开署名
@twoclipping；留白素材库整理；留白优化版
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 符号保持位置一致。保持每一行的摄像机、背景和整体色调在其四个帧中保持稳定。干净的现代扁平矢量插图，宽裕的边距，锐利的简单形状。这些是短的概念循环，而非全时长视频。图片与动图示意结果
浅蓝色圆角按钮逐步展开为卡片，循环时直接回到初始状态。 素材来自三主题帧图的第 1 行，仅为短循环示意。
静态图片由 imagegen 按上面的输入生成；动图由生成的四帧画面拼接而成，效果仅供参考。
THE PROMPT
提示词正文
<inputs> 向我询问：我希望这个形状变成的 8 到 12 个 UI 状态（例如按钮、加载器、播放器、滑块、开关、标签页、图表、命令面板、短暂通知 toast）；采用纯黑白还是一种强调色；以及一首约 120 BPM 的免版税歌曲（例如 Mixkit，可免费商用）。 </inputs> <direction> 达到 Dribbble 水准的 UI 动效。只有一个形状，绝不切镜：每个状态都是同一个元素改变尺寸、圆角半径和颜色，同时其内部内容伴随短暂模糊而替换。光标通过真实的点击和拖动驱动每一次变化。采用浅暖灰色画布、黑白组件，以及一种简洁的 UI 字体（Geist）。处处使用弹簧运动，最多只允许极轻微的过冲。镜头通过缩放让每个状态占满画面。最后一帧就是第一帧，从而形成循环。 禁止：弹跳式缓动、粒子爆发、辉光、UI 控件外观上的渐变、粗细不一致的图标描边、无事发生的空档，以及任何看起来像模板的东西。 </direction> <structure> 120 BPM，7 个小节，每一拍都有事情发生。 按钮 → 加载器 → 对勾 → 灵动岛 → 带播放/暂停形变的音乐播放器 → 拖动进度条调整播放位置 → 它变成音量滑块，拖过最大值时会拉伸 → 开关跟随节拍切换 → 开关滑块变成液态的标签页指示条 → 标签页展开成自行绘制的图表，悬停时显示提示气泡 → 它收拢成 ⌘K 命令入口 → 输入文字进行筛选 → 按下 Enter → 短暂通知 toast → 回到按钮。 </structure> <build> 1. 只用一个 HTML 文件，画面为 1440x1440 的正方形。每一种样式都在 seek(t) 内根据时间计算：不用 CSS transitions，不用定时器，不在帧之间保留状态。 2. 弹簧采用闭式阶跃响应。对于多次改变目标值的数值，每次变化对应一个弹簧，把这些弹簧相加，因此它始终是时间的纯函数。 3. 标签页指示条的两条边缘分别由不同弹簧驱动，使前缘先于后缘向前拉伸。开关滑块使用相同技巧。 4. 拖动采用直接操纵：光标处于按住状态时，根据它的位置计算数值；释放后，从当时所在的位置弹回。 5. 用 numpy 分析歌曲，得到节拍网格，并从小节的第一拍开始。按测得的峰值位置安排每一个 UI 音效。 6. 用 Playwright 渲染：每帧取 4 个子帧，用 ffmpeg tmix 混合，得到带运动模糊的 60fps 输出。 7. 完整渲染之前，先在每一拍渲染一帧。修正任何不对齐节拍网格、拥挤或难以阅读的地方。 </build> <gotchas> 绝不要给任何会被镜头缩放的元素设置 will-change，否则文字会渲染模糊。形变容器内替换的文字需要各自独立的进入与退出时序，否则会重叠。让最后一帧与第一帧完全相同，包括光标的位置和速度，否则循环会卡顿。 </gotchas> <start> 先向我询问输入信息，然后在编写任何代码之前，把按节拍网格排列的状态列表展示给我。 </start>
提示词仅供参考，请结合实际场景调整，并核实 AI 生成结果。