video-to-superprompt

name	video-to-superprompt
description	把一段参考视频变成超详细的复刻或灵感提示词。当用户提供、提及、上传、链接或指向一段视频，并要求分析其设计、UI、动画、过渡、滚动交互、排版、配色、资产、WebGL/Three.js、叙事、逐段行为，或要求创建一段能复刻该页面、应用、交互或运动系统的提示词/文章时使用。

视频转超级提示词

目标

把任何可用的参考视频转换成一份可直接构建的提示词，捕捉视频展示了什么、如何运动、应当如何重建，以及需要哪些资产或生成的媒体。默认输出是一份可直接粘贴的提示词，除非用户要求文章、资产包或实现。

工作流程

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. 分层分析。

   • 故事：页面/应用目的、情感弧线、分区顺序、节拍之间的过渡。
   • 屏幕/布局：视口取景、栅格、粘性区、卡片、媒体、覆盖层、边距、导航、页脚。
   • 运动：显现时机、缓动、视差、遮罩、pinned 分区、滚动 scrubbing、hover/tap 状态、循环的环境运动、镜头移动。
   • 视觉设计：排版、配色、面板、边框、阴影、纹理、图标、图片/视频处理。
   • 技术重建：CSS/原生 API、IntersectionObserver、Web Animations API、GSAP ScrollTrigger、Lenis、Framer Motion/Motion One、Three.js/WebGL、canvas、video currentTime scrubbing、轮播，或其他领域库。
   • 无障碍/性能：减弱动效、移动端行为、触摸/键盘状态、懒加载、视频预加载、像素比上限、静态后备。

4. 规划资产。

   • 产出一份资产映射。在提供时包含确切 URL，在使用时包含本地文件名，在资产仍需生成时用占位名。
   • 如果需要 AI 资产，为图像图层、视频片段、WebGL/canvas 元素、海报、精灵图、遮罩和纹理覆盖层分别创建提示词。
   • 如果用户点名了特定模型或 API，在提示词中原样保留它们，并把图像提示词与视频提示词分开。

5. 写超级提示词。

   • 用单个 fenced text 块承载可直接粘贴的提示词，除非用户要求另一种格式。
   • 以要构建的最终成品和参考边界开头：精确复刻 vs 受启发的改编。
   • 包含：资产映射、品牌/内容、全局设计语言、布局规则、逐段解剖、运动系统、滚动系统、视频行为、WebGL/Three.js 行为、响应式要求、无障碍/性能，以及反模式。
   • 对每个主要分区，指定目的、布局、视觉细节、动画、交互、滚动行为、库/API 选择和减弱动效后备。
   • 避免像"做得漂亮些""类似的动画""不错的过渡"这样含糊的措辞。把审美转化为具体的构建指令。

6. 定稿前验证。

   • 检查提示词中所有资产路径/URL 都存在或明确标记为占位符。
   • 如果创建了截图/帧，确认文件非空且有代表性。
   • 如果写文章或仓库产物，遵守本地工作区指令，把脏工作树的暂存保持在窄范围，并在需要时提交。

输出模式

• 仅提示词： 给出可直接粘贴的提示词，并在有帮助时在其上方附一份简短的资产映射。
• 文章： 创建 content.md 加上本地帧/视频证据、manifest 和提示词。遵循当前仓库的文章约定。
• 实现简报： 在提示词之后添加构建计划和 QA 检查清单。
• 资产生成包： 把提示词拆分为背景图像、视频片段、精灵图/WebGL、海报和最终页面提示词。

质量标准

• 提示词应足够长，能在不看原视频的情况下重建交互。
• 它应保留视频的顺序、节奏和显著的怪癖。
• 它应点名确切的运动机制：pinned 分区、scrubbed 时间线、video.currentTime、视差层、透明度显现、变换、遮罩、着色器、粒子场、hover 状态或轮播物理。
• 它每次都应包含移动端行为和减弱动效行为。
• 它应指出要避免什么，尤其是通用的落地页分区、装饰性色块、不匹配的图库素材、在需要滚动 scrubbing 时只用 autoplay 的视频，以及文字重叠。

参考

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