部分附加信息、来源说明或示例仍显示原文。
来源：import:liubai_public_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0021/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:
适用说明
适用场景
来源仓库标注作者 @okapi_fukugyo；中文解读或分析以留白条目说明为准，效果未实测。 上游：https://github.com/yihui-dev/awesome-opus5-5-videos/blob/92aee2f586ac0715cb3cbcb6384834f98a33383d/prompts/okapi-fukugyo-166351.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.
公开署名
@okapi_fukugyo；留白素材库整理
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 符号保持位置一致。保持每一行的摄像机、背景和整体色调在其四个帧中保持稳定。干净的现代扁平矢量插图，宽裕的边距，锐利的简单形状。这些是短的概念循环，而非全时长视频。图片与动图示意结果
深蓝色组件从方形变为胶囊形并返回；这是无文字、无配乐的简化示意。 素材来自三主题帧图的第 3 行，仅为短循环示意。
静态图片由 imagegen 按上面的输入生成；动图由生成的四帧画面拼接而成，效果仅供参考。
THE PROMPT
提示词正文
<inputs> 请向我询问以下 3 个问题：形状正在变形的 8〜12 个界面组件（例如：按钮、加载指示器、音乐播放器、音量滑块、开关、标签页、图表、通过 ⌘K 打开的搜索框、瞬间出现的通知）、颜色是纯黑白还是加入 1 种强调色、以及 120BPM（每 1 分钟 120 拍的节奏）左右的无版权音乐（例如：Mixkit，可商用）。 </inputs> <direction> 达到设计师作品网站“Dribbble”水准的精致界面动画。仅使用 1 个形状，绝对不切换场景。所有状态通过同 1 个形状在大小、圆角、颜色上的变化来表现，内容通过短暂的模糊过渡进行切换。通过真实的点击和拖拽操作来触发所有变化。背景为温暖的浅灰色，组件为黑白两色，界面文字使用日语，日语字体为 Noto Sans JP，英数字和符号使用 Geist（1 种字体）。所有动作均为类似“弹簧”的自然运动，且回弹幅度极小。相机通过缩放使每个状态充满屏幕。最后一帧与第一帧保持一致，实现循环。 禁止：弹跳感过强的动作、粒子散开效果、光晕扩散、组件渐变、线条粗细不一的图标、无意义的停顿、以及所有看起来像模板的内容。 </direction> <structure> 120BPM，7 小节（约 14 秒），每拍都有事情发生。 按钮 → 加载指示器 → 勾号 → iPhone 灵动岛风格的显示 → 播放/暂停图标平滑切换的音乐播放器 → 拖拽播放条滑块改变播放进度 → 变形为音量滑块（超过最大值时会像橡胶一样拉伸） → 开关随节奏切换 → 开关滑块像液体一样移动并变为标签页选择显示 → 标签页展开并变为自动绘制线条的图表（悬停时出现气泡提示） → 折叠为 ⌘K 的搜索框 → 输入并筛选候选结果 → Enter → 瞬间出现的通知 → 回到按钮。 </structure> <build> 1. HTML文件1个，正方形1440x1440。所有的外观都在 seek(t)（传入时间 t，即可确定该瞬间画面的函数）中，通过时间进行计算。不使用 CSS 过渡（自动动画功能）或定时器，且帧与帧之间不保留状态。 2. “弹簧”运动应采用可以直接通过公式求得的形式（闭式阶跃响应）。对于目标值会多次变化的数值，将每次变化时计算出的 1 个运动进行累加。这样一来，在任何时刻只需通过时间即可确定数值。 3. 标签的选择显示，通过两个不同的弹簧分别驱动左端和右端，使前进方向的尖端比后方更早伸展。开关的旋钮也采用相同的方法。 4. 拖拽为直接操作：在按住光标期间，数值根据光标位置计算。松开后，从该位置开始通过弹簧回弹。 5. 音乐通过 numpy（计算工具）进行分析以确定节拍位置，并从小节开头的节拍开始。操作音置于测量到的声音峰值位置。 6. 使用 Playwright（自动操作浏览器并将画面写入图像的工具）进行绘制。每 1 帧输出 4 个子帧，通过 ffmpeg 的 tmix 进行叠加并施加运动模糊（运动残像），使其变为 60fps。 7. 在导出全片之前，先每 1 拍导出 1 帧进行确认。修正与节拍脱节、过于拥挤或难以阅读的内容。 </build> <gotchas> 对于通过相机缩放的元素，绝对不要添加 will-change（浏览器渲染设置）。添加后文字会变得模糊。对于在形状变化的方框内切换的文字，要为每个文字设置专门的出入时机（以防止重叠）。最后一帧必须与第一帧完全一致，包括光标的位置和速度。否则，循环会出现卡顿。 </gotchas> <start> 首先向我询问输入内容，在编写代码之前，请向我展示按节拍排列的状态列表。 </start>
提示词仅供参考，请结合实际场景调整，并核实 AI 生成结果。