← 返回提示词
GitHub

[awesome-opus5-5-videos · UI动效] 14秒UI编辑器无缝循环

留白公开素材集中的提示词条目。

提示词发布于 2026-11-09更新于 2026-11-09浏览 0

部分附加信息、来源说明或示例仍显示原文。

来源:import:liubai_public_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0017/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:

适用说明

适用场景

来源仓库标注作者 @flxrnc;中文解读或分析以留白条目说明为准,效果未实测。
上游:https://github.com/yihui-dev/awesome-opus5-5-videos/blob/92aee2f586ac0715cb3cbcb6384834f98a33383d/prompts/flxrnc-251921.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.

公开署名

@flxrnc;留白素材库整理

EXAMPLE

使用示例

提示词示例输入

示例目标:以蓝色圆角卡片展示空白、播放、加载和完成四个界面状态。

文字示意结果

以下结果为人工编写的示意,并非模型实测输出。

四帧依次显示蓝色方块、播放图标、加载环和勾选图标,循环时直接切回首帧。它只是离散状态示意,未实现原提示的连续变形、十四秒时间线或 Canvas 程序。

实际生成时的文字输入

Create one EXACT 4-COLUMN BY 3-ROW contact sheet: TWELVE equal square animation keyframes arranged in a perfectly aligned grid with thin pale gutters. Three separate silent GIF concepts, one per row. No text, letters, numerals, numbers, logos, watermarks, brand names, human figures or faces. ROW 1 EDITOR: a fixed dark navy canvas, with a single small blue rounded UI tile centered; in four frames the tile changes into a blue play triangle, a circular loading ring, a check symbol inside the tile, and back into the initial rounded tile. Simplified visual states only, no real editor screenshot. ROW 2 COMPUTING: fixed isometric scene of three simple dark blue server racks on a pale cream background; across four frames a small cyan signal dot appears progressively on a fixed simple line that runs through the front of the racks from left to right. Racks, cabling and perspective do not move; no real system architecture or identifiable hardware. ROW 3 LEARNING SEQUENCE: on a fixed warm ivory background a centered rounded paper card; inside it, one simple navy pictogram appears per frame: first a generic page, then a simple lightbulb, then a small geometric puzzle, then a checkmark. Card shape, size, camera and background remain fixed. Refined contemporary flat vector illustrations, simple strong shapes, consistent scale, generous margins, crisp edges. Do not mix objects between rows. These are conceptual short silent loops, not full videos, real software execution or proven data center diagrams.
查看输入译文

译文仅供参考;实际生成时使用的是上方原文。

创建一张精确的 4 列 x 3 行联系表:十二个等大的正方形动画关键帧,排列在具有细淡色间隙的完美对齐网格中。三个独立的无声 GIF 概念,每行一个。无文本、字母、数字、标志、水印、品牌名称、人物或面部。第 1 行 编辑器:一个固定的深海军蓝画布,中心有一个单一的小型蓝色圆角 UI 图块;在四个帧中,该图块依次变为蓝色播放三角形、圆形加载环、图块内的对勾符号,并回到初始的圆角图块。仅限简化的视觉状态,不要真实的编辑器截图。第 2 行 计算:在淡奶油色背景上,三个简单深蓝色服务器机架的固定等轴测场景;在四个帧中,一个小的青色信号点沿着一条从左到右穿过机架前方的固定简单线条逐渐出现。机架、布线和透视不移动;不要真实的系统架构或可识别的硬件。第 3 行 学习序列:在固定的暖象牙色背景上,一张居中的圆角纸卡;在其中,每一帧出现一个简单的海军蓝象形图:首先是一个通用页面,然后是一个简单的灯泡,然后是一个小的几何拼图,最后是一个对勾。卡片形状、尺寸、摄像机和背景保持固定。精致的当代扁平矢量插图,简单的强有力形状,一致的比例,宽裕的页边距,清晰的边缘。不要在行之间混合对象。这些是概念性的短无声循环,不是完整的视频、真实的软件执行或经过证实的数据中心图表。

图片与动图示意结果

蓝色卡片依次展示播放、加载和完成状态;不是实际编辑器或完整视频。 素材来自三主题帧图的第 1 行,仅为短循环示意。

静态图片由 imagegen 按上面的输入生成;动图由生成的四帧画面拼接而成,效果仅供参考。

蓝色卡片的播放、加载和完成四帧状态示意
生成的四格关键画面

THE PROMPT

提示词正文

<inputs>
请提供:

* 画布颜色
* 形状颜色
* 强调色
* 形状半径
* 字体
* 形状应变换经过的状态

请使用十六进制代码、秒、阻尼比和像素大小,而非形容词。
</inputs>

<direction>
制作一个 14 秒、1440x1440、60fps 的无缝 UI 运动循环。

单一形状,零剪辑。

形状在状态之间进行变换,且永不被替换。

每个状态占据帧的 50%。

摄像机随节拍开始并比形状更慢地趋于稳定。

使用闭式弹簧。

形状阻尼 0.72,稳定时间 0.35s。
摄像机阻尼 1.0,稳定时间 0.6s。

内容切换使用 12px 模糊,并在 0.15s 内淡化过渡。

光标尖端始终锁定在它所拖动的任何物体上。
</direction>

<structure>
使用 0.5s 的节拍网格。

0.0 - 像素吉祥物待机
1.0 - 吉祥物挤压成播放按钮
1.5 - 加载器
2.0 - 勾选绘制
2.5 - 拖动时间轴
4.0 - 关键帧拉伸超过末端并弹回
5.0 - 贝塞尔编辑器
7.0 - 数字滚动 F 000 到 F 840
8.5 - 渲染条填充
10.0 - 命令面板输入 "export mp4"
11.0 - 轻提示显示 "已渲染 840 帧"
12.0 - 轻提示缩小回吉祥物

最后一帧必须是第一帧。
</structure>

<build>
编写一个包含 Canvas 2D 的 HTML 文件。

window.renderAt(t) 必须是时间的纯函数。

禁止使用 Math.random。
禁止使用时钟。
禁止携带状态。

?t= 必须冻结精确时刻。

从 renderAt(frame / 60) 开始渲染每一帧。

使用 4 子帧进行运动模糊处理。

以 60fps 编码为 H.264。
</build>

<gotchas>
修复循环回绕时的光标跳变问题,使用:

t - 14*floor(t/14)

不要将橙色淡入墨色。

在 1.5s 时从中心产生涟漪,在 12.0s 时从点击点产生涟漪。

垂直滚动单词切换。

在模糊入场后开始绘制动画。

将光标对准目标落地时的位置。

保持光标速度在 65 px/frame 以下。
</gotchas>

<start>
首先向我展示分镜脚本。

然后编写代码。

在第一次渲染后,检查每个节拍周围的 5 帧并修复问题,然后再进行最终渲染。
</start>

提示词仅供参考,请结合实际场景调整,并核实 AI 生成结果。