video-to-superprompt

Video To Superprompt

目标

将任何可用的参考视频转换为可直接用于构建的提示词，准确描述视频展示的内容、动态效果、重建方式，以及所需素材或生成媒体。默认输出一条可直接粘贴使用的提示词，除非用户要求文章、素材包或实现方案。

工作流

1. 定位源视频。

   • 接受本地路径、上传文件、URL、浏览器中可见的视频、文章素材或仓库媒体。
   • 如果视频虽有提及但无法访问，请先询问准确的文件或 URL，不要凭空编造细节。
   • 如果用户要求精确复刻，请先检查与视频关联的源 HTML/CSS/JS 或本地页面，再编写提示词。

2. 从技术层面检查视频。

   • 对本地文件，运行 ffprobe，检查时长、尺寸、帧率、编解码器和文件大小。
   • 使用 ffmpeg 提取有代表性的帧，优先选取时间线上的关键节点，而非均匀抽取缩略图。
   • 建议的快速检查流程：

     ffprobe -v error -show_entries format=duration,size:stream=width,height,r_frame_rate -of json "$VIDEO"
     mkdir -p /tmp/video-frames
     ffmpeg -y -i "$VIDEO" -vf fps=1 /tmp/video-frames/frame-%03d.jpg
     

   • 对于较长或以滚动为主的视频，还要提取开头、中段、结尾以及可见的转场时刻。

3. 分层分析。

   • 故事：页面/应用的用途、情绪变化、各部分顺序、关键节点之间的转场。
   • 屏幕/布局：视口取景、网格、粘性区域、卡片、媒体、叠加层、边距、导航、页脚。
   • 动态效果：显示时机、缓动、视差、遮罩、固定区段、滚动联动、悬停/点击状态、循环环境动画、镜头移动。
   • 视觉设计：字体、配色、表面效果、边框、阴影、纹理、图标、图像/视频处理方式。
   • 技术重建：CSS/原生 API、IntersectionObserver、Web Animations API、GSAP ScrollTrigger、Lenis、Framer Motion/Motion One、Three.js/WebGL、canvas、视频 currentTime 联动、轮播或其他领域库。
   • 无障碍/性能：减少动态效果设置、移动端行为、触控/键盘状态、延迟加载、视频预加载、像素比上限、静态回退方案。

4. 规划素材。

   • 生成素材映射表。包含提供的准确 URL、使用的本地文件名，或仍需生成的占位符名称。
   • 如果需要 AI 素材，请分别为图像底图、视频片段、WebGL/canvas 元素、海报、精灵图、遮罩和纹理叠加层编写提示词。
   • 如果用户指定了具体模型或 API，请在提示词中原样保留，并将图像提示词与视频提示词分开。

5. 编写超级提示词。

   • 除非用户要求其他格式，否则用单个 fenced text 代码块输出可直接粘贴使用的提示词。
   • 开头说明最终要构建的内容以及参考边界：精确复刻还是受启发的改编。
   • 包含：素材映射表、品牌/内容、全局设计语言、布局规则、逐段结构、动态系统、滚动系统、视频行为、WebGL/Three.js 行为、响应式要求、无障碍/性能要求，以及反模式。
   • 针对每个主要部分，说明其用途、布局、视觉细节、动画、交互、滚动行为、库/API 选择和减少动态效果时的回退方案。
   • 避免使用“做得漂亮”“动画相似”或“转场自然”等含糊措辞。将审美要求转化为具体的构建说明。

6. 完成前进行验证。

   • 检查提示词中的所有素材路径/URL 是否存在，或是否已明确标记为占位符。
   • 如果创建了截图/帧，确认文件非空且具有代表性。
   • 如果要编写文章或仓库文件，请遵循本地工作区说明，谨慎控制脏工作树中的暂存范围，并在有要求时提交更改。

输出模式

• 仅提示词： 给出可直接粘贴的提示词；如有帮助，可在上方附上简短的资源映射。
• 文章： 创建 content.md，以及本地帧/视频证据、清单和提示词。遵循当前仓库的文章规范。
• 实现概要： 在提示词后添加构建计划和 QA 检查清单。
• 资源生成包： 将提示词拆分为背景图片、视频片段、精灵/WebGL、海报和最终页面提示词。

质量标准

• 提示词应足够详细，即使不看原视频，也能重建其中的交互。
• 应保留视频的顺序、节奏和显著特点。
• 应明确指出具体的运动机制：固定区段、随滚动进度变化的时间轴、video.currentTime、视差图层、透明度显现、变换、蒙版、着色器、粒子场、悬停状态或轮播物理效果。
• 每次都应说明移动端行为和减少动态效果时的行为。
• 应指出需要避免的内容，尤其是通用着陆页区块、装饰性圆斑、不匹配的库存素材、需要滚动控制时仅靠自动播放的视频，以及文本重叠。

参考资料

• 从头编写最终提示词，或用户要求“完整详细提示词”时，请阅读 references/superprompt-template.md。