SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场make-a-video

make-a-video

设计与创作

查看项目

更新于 10-16 10:35

技能介绍

用途

这个技能面向的是从未使用过 HyperFrames 的初学者：他们手里只有一个概念、一份脚本或一个粗略想法，目标是拿到一支做好的 MP4。它提供的是端到端走查，而不是框架参考文档。

适用情形：用户是 HyperFrames 新手且从概念、脚本或大纲起步；想要完整的端到端过程；尚未确定格式。

移交情形：用户粘贴一个网址并想据此网站做视频，改用 /website-to-hyperframes；用户明确想要 9:16 竖屏、带人脸镜头加场景叠加的口播视频，则先在这里走完 Gate 1–4，然后从 Gate 5 起改用 /short-form-edit；用户问的是框架规则而不是做视频，改用 /hyperframes。

主要能力与流程

整体分为两个阶段、八个顺序关卡，每个关卡都产出下一关要用的具体产物，不允许跳关。

第一阶段 INTERVIEW（Gate 1–4）：用一次对话式流程把一切信息收集齐再动代码。

  • Gate 1 意图与格式：逐个提问，尽量用多选题。采集视频用途（宣传、社交广告、发布预热、产品演示、教程、解说、片头片尾卡等）、受众、目标时长、画幅比例（16:9、9:16、1:1）、帧率（默认 30，界面清晰可用 60，电影感 24）、平台与交付限制。
  • Gate 2 脚本与配音：确定脚本来源（粘贴、大纲由技能起草、自己录制、TTS、无旁白）；如用 TTS 则选声音并确定节奏；如有人脸镜头，采集录制路径、全屏或角落放置、是否需要转录；确定字幕方案（关闭、hype、企业风、逐词 karaoke、极简）。
  • Gate 3 风格采集：在提问之前先盘点已有素材，查看工作区根目录的 assets/ 和各项目 assets/ 文件夹，已有的不再询问。再逐步询问风格指南或品牌文档、色板（hex）、字体、logo 文件、参考视频、其他素材（截图、产品图、B-roll、音乐）、MOTION_PHILOSOPHY 美学或其它感觉、节奏（动感 1–2s、均衡 2–3s、舒缓 3–5s）、音乐强度、片尾或行动号召文案。技能明确不把品牌强加给用户，只有在用户明确拒绝提供风格时才回退到默认值。
  • Gate 4 简报综合（构建前的硬关卡）：若工作区根目录存在 MOTION_PHILOSOPHY.md 必须读取，缺失则用 references/style-intake.md 的默认值并在简报中注明；确定项目存放位置（存在 video-projects/ 就用 video-projects/<slug>/，否则询问）；写出 BRIEF.md，包含 slug、意图、受众、尺寸、fps、时长、脚本、配音与字幕与人脸镜头方案、风格配置（色板 hex、字体、logo 路径、参考视频）、节奏、带路径的素材清单、片尾或 CTA 文案；展示简报并等待明确批准。

第二阶段 BUILD（Gate 5–8）：

  • Gate 5 脚手架与分镜：先做移交检查（9:16 竖屏口播加人脸镜头改用 /short-form-edit）；否则创建项目文件夹，若存在格式相近的兄弟项目可复制其 hyperframes.json 与 meta.json 作模板，否则在文件夹内运行 npx hyperframes init，编辑 meta.json，把素材复制进 assets/，并依据 Gate 3 生成 assets/style-profile.md 作为配色、字体、logo 的唯一来源。随后按模板生成 STORYBOARD.md，每个节拍写明时间、视觉元素、运动语言、使用的缓动、退出过渡和音频，文件顶部是包含场景、起点、时长、合成文件的时间表。建议采用三分结构：第一幕钩子约占总时长 20%，第二幕主体约 55%，第三幕收束加片尾（含 4–6 秒停留）约 25%。展示分镜与时间表并迭代至用户批准。
  • Gate 6 编写合成：调用 /hyperframes 获取框架规则，本技能负责脚手架与纪律。每个子合成使用 data-composition-id、data-start、data-duration 的 HTML 结构，样式限定在该合成内，脚本用 IIFE 创建暂停的 GSAP 时间线并在结尾加上时长锚定补间，最后挂到 window.__timelines。构建规则包括：环境背景放在 data-track-index="0" 并覆盖整段时长；动感文字开场逐词错开 0.06–0.10s；字幕作为 index.html 中根合成的同级元素、data-track-index ≥ 20，绝不放进场景时间线；目录块用 npx hyperframes add <name> 安装后立即把其 CSS 限定到对应合成，因为目录块自带的 html、body 规则会溢出到父文档；竖屏加人脸时用 transform 包裹原生 1920×1080 画面；只应用用户提供的内容。确定性方面禁止 Math.random()、Date.now() 和渲染时 fetch()，改用种子化 PRNG 或谐波正弦哈希。

使用方式（命令行与验证流程）

Gate 7 Lint 与 Studio 预览（强制预览关卡 1）：运行 npx hyperframes lint 修复全部错误；后台运行 npx hyperframes preview；等待 Studio 在 http://localhost:3002 就绪；把网址连同各合成单独网址（http://localhost:3002/?comp=<id>）交给用户，若项目含 WebGL shader 块则优先给单独网址；必须等到用户明确说“可以，渲染草稿”再继续，沉默不算批准。热重载开启，编辑实时生效。

Gate 8 草稿渲染、视觉验证、MP4 预览、最终渲染：

  • 草稿渲染：npx hyperframes render --quality draft --output renders/<slug>-draft.mp4
  • 视觉验证（交付前强制）：mkdir -p renders/frames，对每个节拍关键时刻和每次转场用 ffmpeg -y -ss <t> -i renders/<slug>-draft.mp4 -frames:v 1 -q:v 2 renders/frames/t<t>.png 抽帧；对每一张 PNG 调用 Read 工具把图像载入上下文，而不只是列出文件名；逐帧确认无人脸被裁切、每场人脸模式正确、文字可读且在色板上、无溢出、转场落在预期词上、无空白帧；有问题就修、重渲染、再验证。
  • MP4 预览（强制预览关卡 2）：npx serve renders -p 8080 -n，不要用 Python 的 http.server，因为它不支持 HTTP Range 请求，拖动进度会失效；把 http://localhost:8080/<slug>-draft.mp4 交给用户，等待其对播放和音画同步明确签字。
  • 最终渲染：npx hyperframes render --quality standard --output renders/<slug>-final.mp4，报告输出路径即完成。

适用场景与限制

适合新人从想法走到成片，也适合需要被流程和检查点约束住的制作。硬性要求包括：不得跳过两道预览关卡；抽帧并用 Read 工具查看之前不得声称渲染完成；只能在专用项目文件夹内构建，绝不把 index.html 放在工作区根目录；不要在盘点工作区之前就向用户索要素材；不要省略每个子合成时间线末尾的时长锚定补间；渲染逻辑中不要使用 Math.random() 与 Date.now()；不要给 <video> 标签加 class="clip"；不要强加品牌。技能引用的外部文件为工作区级别的 MOTION_PHILOSOPHY.md 美学基线，缺失时以 references/style-intake.md 中的回退方案为准；其余参考文件（访谈问题库、风格采集、目录意图映射、分镜模板、合成脚手架、构建清单）均随技能提供。关于该技能的具体定价、平台支持范围与效果承诺，资料中暂未提供。