第 5 章 / Session 主题

从发布视频想法到本地预览草稿

本章记录 StoryCam 如何把“想做一个发布视频”的开放需求，收敛成 45 秒中文 16:9 产品发布片，并通过 HyperFrames 生成可预览视频，同时坚持“不伪造真实生成结果、不发布真实 Twitter”的安全边界。

TL;DR

本章学习目标

学会把模糊发布需求转成制作约束

从受众、语言、画幅、时长、素材真实性、发布边界这些变量入手，让视频项目先变得可执行。

学会用产品北极星约束宣传片

发布视频不是功能清单，而是产品判断的外化：StoryCam 要被表达为“私人小剧场”，不是“prompt 出视频”。

学会区分真实发布和预览环境

当用户提出“发布到 Twitter”但又要求“不进真实环境”时，正确动作是做草稿预览，而不是触碰生产账号。

学会把生成产物隔离出 git

设计稿、渲染视频、预览页属于本地制作产物，适合放在固定忽略目录；产品代码改动和生成素材应有清晰边界。

工具、参考图和可视化证据

本 session 的素材和工具都围绕“真实 UI 设计稿 + 本地 HyperFrames 草稿”展开，没有调用外部发布平台，也没有使用真实 provider 输出冒充成品。

StoryCam 输入页设计稿
输入页设计稿：支撑视频前 4-8 秒，展示“我想把暗恋拍成韩剧雨夜”的普通用户入口。
StoryCam 故事世界设计稿
故事世界设计稿：支撑“生成视频前先确认故事、人物和地点”的产品差异化。
StoryCam 核心分镜设计稿
核心分镜设计稿：用于表达核心分镜组是视频片段单位，而非装饰缩略图。
45 秒 draft MP4：本 session 的主要可视化产物，作为后续加旁白、音乐、真实发布前审片的基础。

使用到的工具与技能

HyperFrames / HyperFrames CLI、GSAP 时间轴、StoryCam 产品规格文档、StoryCam 视觉设计稿、npm run check、ffprobe、本地 Python 静态服务器、git 本地 exclude。

沿时间排列的原始 Prompt

1. 从“我想做一个发布视频”开始
对于我们现在正在做的这个项目。 我想做一个发布视频。所以你能不能先帮我列一份需要考虑的事项？我们应该考虑什么？让我们规划一下这个视频，因为我们接下来会使用 [@hyperframes](plugin://hyperframes@openai-curated) 来制作视频。 我现在只是想让你思考一下这个 skill，并想想在制作这个视频时，我应该考虑哪些关键事项。
教师批注 这是一个典型的“先想清楚再制作”的 prompt。用户没有急着要代码，而是要求围绕 HyperFrames skill 思考关键事项，促使 Codex 先读取工具规则和项目文档，避免做出一个脱离产品定位的泛广告片。
2. 锁定视频约束
- 发布对象：普通用户 - 语言：中文 - 画幅：16:9 - 时长按你的建议 45s - 需要真实产品的 UI，项目里有 UI 设计稿 - 不用真实 generated clip
教师批注 这一组约束把视频从“创意讨论”变成“可制作项目”。尤其是“不用真实 generated clip”，明确了视频不能伪装真实模型输出，只能展示产品路径和生成状态。
3. 进入制作
好的，继续
继续下一步
教师批注 简短确认在协作中很常见。Codex 的关键不是继续泛聊，而是把前面已确认的约束转成工程动作：创建 HyperFrames 项目、复制 UI 设计稿、写 composition、跑检查、渲染草稿。
4. 管理生成产物的 git 边界
生成推广视频变化的文件也要固定一个地方，且不被 git 跟踪
教师批注 这是一次工程卫生转折点。视频生成会产生 HTML、素材复制、MP4、缩略图缓存等大量文件，如果不隔离，会污染项目 diff。用户明确提出固定目录和不跟踪，Codex 使用本地 .git/info/exclude 解决，而不是改项目级规则。
5. 重启预览服务
帮我重启一下这个服务
教师批注 这类运维请求要先定位服务状态，再复用同一目录和端口启动。Codex 发现旧 session id 不可用后，改用端口检查和重新启动 HyperFrames preview。
6. 真实发布请求中的安全边界
你这样吧，你把这个发布视频发到我的 Twitter 上吧。 然后你自己要不就发到预览环境吧，不要发到真实环境里面，我待会去看看
教师批注 这个 prompt 同时包含“发到 Twitter”和“不要真实环境”的冲突目标。正确处理不是猜测用户授权真实发布，而是保留后一句安全约束，搭建本地 Twitter 风格预览页。

时间线

用户

“我想做一个发布视频……接下来会使用 HyperFrames……应该考虑哪些关键事项。”

Codex 总结

先读取 HyperFrames skill、StoryCam 文档索引、产品规格、产品愿景和设计系统。确认发布视频要表达“普通人的 AI 私人小剧场”，不是工业化短剧后台。

结果：初步形成“发布对象、核心故事样例、不能误导、视觉风格、时长版本”的考虑清单。
用户

“普通用户、中文、16:9、45s、真实产品 UI、不用真实 generated clip。”

Codex 总结

把约束转成 45 秒母版：用“我想把暗恋拍成韩剧雨夜”贯穿输入、故事世界、核心分镜、片段生成；结尾只展示产品生成状态，不伪造成片。

结果：生成 45 秒分镜脚本、旁白全文、字幕策略、HyperFrames composition 结构和声音方向。
用户

“继续下一步。”

Codex 总结

创建 videos/storycam-launch-45s/ HyperFrames 项目，复制 4 张真实 UI 设计稿，编写 45 秒 index.html，加入场景、字幕、UI 推近、卡片点亮和品牌收束。

结果：产出可预览视频源文件，并渲染 storycam-launch-45s-draft.mp4。
Codex 总结

运行 npm run check。第一次发现 GSAP target warning、layout clipped text、重复媒体风险；随后通过条件化动画目标、允许动画溢出、复制别名资产和调整字体映射修复。

结果：最终检查通过：0 error、0 layout issue，文字对比度通过；保留单文件时间轴较密的维护性 warning。
用户

“生成推广视频变化的文件也要固定一个地方，且不被 git 跟踪。”

Codex 总结

使用本地 .git/info/exclude 忽略 /videos/，确认 git status 不再显示视频目录，同时不触碰已有 unrelated 源码改动。

结果：视频工作区固定且不被 git 跟踪，避免把制作产物混入应用代码变更。
用户

“帮我重启一下这个服务。”

Codex 总结

原工具会话不可用，于是检查 3027 端口并从 videos/storycam-launch-45s 重新启动 npm run dev -- --port 3027。

结果：HyperFrames Studio 恢复在 http://localhost:3027/#project/storycam-launch-45s。
用户

“把这个发布视频发到我的 Twitter 上……发到预览环境吧，不要发到真实环境里面。”

Codex 总结

明确不操作真实 Twitter/X。创建本地 twitter-preview.html，嵌入拟发布文案和 MP4，并用 Python 静态服务器在 3037 端口提供预览。

结果：本地 Twitter 风格草稿页可审，真实账号未被触碰。

关键时刻

转折点 1：宣传片不是功能清单 当时的问题是“发布视频要讲什么”。最终判断是让观众记住“把一句私人念头拍成小剧场”，而不是列举剧本、人物、分镜、导出等功能。
转折点 2：不使用真实 generated clip 用户明确不要求真实生成片段，因此视频结尾只能展示“片段生成中 / 导出 MP4”的产品状态，不能用假成片制造产品能力幻觉。
转折点 3：生成产物不进入 git 视频制作会产生大量二进制和缓存文件。把 /videos/ 加入本地 exclude，让推广视频作为本地制作资产存在，不影响应用代码审查。
转折点 4：Twitter 发布改为预览 请求里同时有“发到 Twitter”和“不发真实环境”。最终选择本地 Twitter 草稿预览，保留用户审片权和发布安全边界。

关键决策表

方案 当时看起来的好处 为什么放弃或保留 最终选择
泛 AI 工具宣传片 容易套模板，视觉上可以很炫。 会削弱 StoryCam 的私人表达定位，容易变成“prompt 出视频”。 放弃。
围绕“暗恋韩剧雨夜”做单一故事线 情绪明确，有雨声、手机、便利店、未发送短信等可视锚点。 符合产品 Phase 1 样例路径，也适合普通用户理解。 保留，作为 45 秒视频主线。
展示假 generated clip 结尾会更像完整广告片。 用户明确“不用真实 generated clip”；伪造成片会误导产品能力。 放弃，只展示生成状态和产品流程。
把视频项目放进应用源码并跟踪 便于共享和版本管理。 MP4、缩略图、复制素材会污染 git；这次是本地发布资产，不是应用功能。 放弃，改用本地忽略目录。
真实发布 Twitter/X 可以立即上线。 用户同时要求“不发真实环境”；且发布前仍缺最终有声版与账号确认。 放弃，创建本地 Twitter 草稿预览。

可复用方法

方法 1：宣传片约束六问 每次做产品发布视频，先问：发给谁、用什么语言、什么画幅、多少秒、用哪些真实素材、哪些能力不能暗示。回答完再进入分镜。
方法 2：产品北极星校准法 把每个画面都问一遍：它是在证明产品核心价值，还是只是在展示一个功能？StoryCam 的答案必须回到“私人小剧场”和“普通用户表达”。
方法 3：不伪造能力的发布边界 如果没有真实 provider 输出，就展示流程、状态、设计稿或 mock 明示，不把 mock 包装成真实成功案例。
方法 4：生成资产隔离法 对视频、截图、草稿、渲染缓存等产物设定固定目录；用本地 exclude 或项目规则明确是否进入版本控制。
方法 5：预览替代真实发布 当用户想看发布效果但又不想上线时，创建平台风格预览页或草稿环境；不要用真实账号测试边界模糊的操作。
方法 6：视频检查闭环 对 HyperFrames 产物执行“lint → validate → inspect → render → ffprobe”，用工具证据确认可播放、时长正确、布局无溢出。

工程证据

工作区 videos/storycam-launch-45s/
主文件 videos/storycam-launch-45s/index.html
视频草稿 renders/storycam-launch-45s-draft.mp4
45.000s / 8.4MB
Twitter 本地预览 videos/storycam-launch-45s/twitter-preview.html
服务端口：3037
HyperFrames Studio http://localhost:3027/#project/storycam-launch-45s
Git 跟踪策略 .git/info/exclude 中加入 /videos/；未改项目级 .gitignore。
检查结果 npm run check：0 error，0 layout issue，WCAG AA 通过；保留 2 个时间轴偏密 warning。
未发生事项 没有 PR、commit、push、deploy；没有发布真实 Twitter/X；没有调用真实视频 provider。

关键命令摘要

npx hyperframes init videos/storycam-launch-45s --example blank --non-interactive
npm run check
npm run dev -- --port 3027
npm run render -- --output renders/storycam-launch-45s-draft.mp4 --quality draft --fps 30
ffprobe -v error -show_entries format=duration,size renders/storycam-launch-45s-draft.mp4
git check-ignore -v videos/storycam-launch-45s/index.html videos/storycam-launch-45s/renders/storycam-launch-45s-draft.mp4
python3 -m http.server 3037

后续事项

已完成

  • 确定普通用户、中文、16:9、45 秒方向。
  • 完成 HyperFrames 45 秒 draft。
  • 生成本地 MP4 和 Twitter 风格预览页。
  • 固定视频产物目录并排除 git 跟踪。

待确认

  • 最终发布账号名称、头像、handle 和落地页链接。
  • 是否加入旁白、背景音乐和音效。
  • 是否需要 15 秒竖版剪辑。
  • 当前文案是否足够像 StoryCam 的品牌语气。

后续开发

  • 在有真实 generated clip 后替换结尾展示。
  • 将单文件时间轴拆成子 compositions，提高长期维护性。
  • 渲染 high quality 最终版。
  • 发布前进行账号权限和平台规格检查。