部分附加信息、来源说明或示例仍显示原文。
来源：import:liubai_public_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0013/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:
适用说明
适用场景
来源仓库标注作者 @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 状态（例如：按钮、加载器、播放器、滑块、切换开关、标签页、图表、命令面板、轻提示），纯黑白或一种强调色，以及一段 120 BPM 左右的免版税歌曲（例如：Mixkit，可免费用于商业用途）。 </inputs> <direction> Dribbble 级别的 UI 动画。单一形状，绝不切镜：每个状态都是同一个元素在内容通过短暂模糊进行切换的同时，改变其尺寸、圆角和颜色。光标通过真实的点击和拖拽驱动每一次变化。浅暖灰色画布，黑白组件，一种简洁的 UI 字体 (Geist)。到处都是弹簧动画，最多只有微小的过冲。摄像机进行变焦，使每个状态都充满画面。最后一帧是第一帧，因此它可以循环播放。 禁止项：弹跳缓动、粒子爆发、发光、UI 框架上的渐变、不匹配的图标描边、没有内容发生的空档、任何看起来像模板的内容。 </direction> <structure> 120 BPM, 7 小节，每一下节拍都会发生一些事情。 按钮 → 加载器 → 勾号 → 灵动岛 → 带有播放/暂停变形效果的音乐播放器 → 拖动进度条 → 它变成一个音量滑块，在超过最大值时会拉伸 → 开关随节拍翻转 → 旋钮变成液态标签指示器 → 标签展开成一个自动绘制的图表，悬停时显示工具提示 → 它折叠成 ⌘K → 输入以进行筛选 → 回车 → 轻提示 → 回到按钮。 </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>
提示词仅供参考，请结合实际场景调整，并核实 AI 生成结果。