video-to-superprompt

Video To Superprompt

何时使用此技能

• 用户提供、提及、上传、链接或指出某个视频，并要求分析其设计、UI、动画、转场、滚动交互、排版、颜色或素材。
• 用户希望获取一段提示词或文章，用于重现参考视频中展示的页面、应用、交互或动态效果系统（精确重现或借鉴改编）。
• 任务需要进行技术性视频检查（ffprobe/ffmpeg 提取帧），并对叙事、布局、动态效果、视觉设计、技术重建以及无障碍性和性能进行分层分析。
• 用户需要根据视频整理素材清单，并为图像底图、视频片段、WebGL/Canvas 元素、海报、精灵图或纹理叠加层分别生成 AI 生成提示词。
• 用户需要根据视频参考，获得可直接粘贴使用的超级提示词、附带证据的文章、实施说明或素材生成包。
• 不适用于：没有视频参考的静态设计/UI 评审；或用户希望直接构建页面，而非获取重现提示词的情况——请改用设计评审或实施技能。

目标

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

工作流

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. 编写超级提示词。

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

6. 定稿前验证。

   • 确认提示词中的所有素材路径/URL 都存在，或已明确标记为占位内容。
   • 如果已创建截图/帧，确认文件非空且具有代表性。
   • 如果要撰写文章或仓库文件，遵循本地工作区说明，仅暂存工作区中变更的相关内容，并在需要时提交。

输出模式

• **仅提示词：**提供可直接粘贴的提示词，并在有帮助时在上方附上简短的素材映射表。
• **文章：**创建 content.md，以及本地帧/视频证据、清单和提示词。遵循当前仓库的文章规范。
• **实施简报：**在提示词后添加构建计划和 QA 检查清单。
• **素材生成包：**分别整理背景图、视频片段、精灵图/WebGL、海报和最终页面提示词。

质量标准

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

参考资料

• 从头编写最终提示词，或用户要求提供“完整详细的提示词”时，请阅读 references/superprompt-template.md。
• 上游来源：MengTo/Skills — video-to-superprompt
• agents/openai.yaml — 此技能的 Codex/OpenAI Agent 接口元数据。