product-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Product video

产品视频

Paths:

${CLAUDE_SKILL_DIR}

means the folder containing this SKILL.md, and

${CLAUDE_PLUGIN_ROOT}

the plugin folder two levels above it.

Read

${CLAUDE_PLUGIN_ROOT}/PRINCIPLES.md

first: the rules every video follows (story first, smooth before varied, nothing leaves the frame, privacy, no presses that write).

Every question to the user goes in the question box: call the AskUserQuestion tool (2-4 options, the recommended one first). Only in an agent without that tool, ask numbered questions in text.

A URL in. A product video out, made only of the site's real UI, real recorded click-throughs of it, its own colours and type, and its own words, scored and mixed for this cut.

S="${CLAUDE_SKILL_DIR}/scripts"

, Run the scripts with

python3

on Mac and Linux,

py

on Windows.

PY="${CLAUDE_PLUGIN_ROOT}/lib/ai_editor/run.py"

;

python3 "$PY"

below runs the editor's venv Python (

py "$PY"

on Windows). Work in

product/<name>/

in the library (PRINCIPLES.md "Where").

URL -> brief (questions) -> crawl.mjs -> site.json + pages/ (features, pricing, docs, changelog, customers...)
    -> pages.md -> use-cases.md (ranked, quoted, sourced) -> the user picks 2-5, ordered as a journey
    -> storyboard.md (the story first: hook, reveal, each use case as cause then effect, payoff, end)
    -> flows.json (chained) -> record.mjs --states (+ --mobile) -> flows/*.states.json (3x stills of every UI state)
    -> story.json beats -> plan (one camera, every frame checked, score + mix) -> animatic -> critic -> user approves
    -> render (60 fps) -> check (framing, fill, names, smoothness meter)

Read

references/story.md

before writing storyboard.md or story.json,

references/style.md

before judging the animatic sheet,

references/sound.md

before changing the sound and

references/brief.md

for music rights and logging in.

路径：

${CLAUDE_SKILL_DIR}

表示包含此 SKILL.md 的文件夹，

${CLAUDE_PLUGIN_ROOT}

表示其上两级的插件文件夹。

先阅读

${CLAUDE_PLUGIN_ROOT}/PRINCIPLES.md

：所有视频都遵循这些规则（故事优先、流畅先于变化、任何内容都不得越出画框、保护隐私，以及不执行会写入数据的按键操作）。

所有向用户提出的问题都必须放在问题框中：调用 AskUserQuestion 工具（2-4 个选项，推荐项放在首位）。只有在没有该工具的 agent 中，才用文本提出编号问题。

输入一个 URL，输出一个产品视频；素材只使用网站的真实 UI、真实录制的点击操作、站点自身的颜色和字体，以及网站自己的文案，并针对本次剪辑完成配乐与混音。

S="${CLAUDE_SKILL_DIR}/scripts"

，在 Mac 和 Linux 上使用

python3

运行脚本，在 Windows 上使用

py

。

PY="${CLAUDE_PLUGIN_ROOT}/lib/ai_editor/run.py"

；下面的

python3 "$PY"

会运行 editor 的 venv Python（Windows 上使用

py "$PY"

）。在素材库（PRINCIPLES.md 中的“Where”）的

product/<name>/

目录中工作。

URL -> brief (questions) -> crawl.mjs -> site.json + pages/ (features, pricing, docs, changelog, customers...)
    -> pages.md -> use-cases.md (ranked, quoted, sourced) -> the user picks 2-5, ordered as a journey
    -> storyboard.md (the story first: hook, reveal, each use case as cause then effect, payoff, end)
    -> flows.json (chained) -> record.mjs --states (+ --mobile) -> flows/*.states.json (3x stills of every UI state)
    -> story.json beats -> plan (one camera, every frame checked, score + mix) -> animatic -> critic -> user approves
    -> render (60 fps) -> check (framing, fill, names, smoothness meter)

编写 storyboard.md 或 story.json 前阅读

references/story.md

，判断 animatic 图板前阅读

references/style.md

，修改声音前阅读

references/sound.md

，并阅读

references/brief.md

以了解音乐权利和登录说明。

0. Setup

0. 设置

No renderer yet (

~/.ai-video-editor/remotion

missing): run the

setup

skill's Remotion step first. It installs the Chrome Headless Shell the crawl and the recordings drive. Read the user's taste:

python3 "${CLAUDE_PLUGIN_ROOT}/skills/taste/scripts/taste.py" show

尚未安装 renderer（

~/.ai-video-editor/remotion

缺失）时，先运行 setup skill 的 Remotion 步骤。它会安装供 crawl 和录制脚本驱动的 Chrome Headless Shell。读取用户的 taste：

python3 "${CLAUDE_PLUGIN_ROOT}/skills/taste/scripts/taste.py" show

。

1. The brief, in the question box, before crawling deeply

1. 先在问题框中确认 brief，再深入抓取

Start the crawl (step 2) in the background (Bash

run_in_background

), then

python3 "$S/product.py" copy product/<name>

: it waits for the home page (about 50 s; the inner pages load while the questions are asked). Its

tagline:

and

nav:

lines and the headings under them are the options, in the site's own words. Never read

site.json

(about 20 KB). Then two AskUserQuestion calls, the recommended option first and marked "(Recommended)", "Other" always open for their own words.

Call 1, what gets built (four questions):

What it does, in one line: the
```
tagline:
```
line of
```
product.py copy
```
/ Other.
The 2-3 things the video must show (multi-select): the jobs in
```
product.py copy
```
's headings and
```
nav:
```
line, each in the site's words.
Who will watch: new users (Recommended) / existing users / investors / developers.
The one action at the end: visit the URL (Recommended) / sign up / try a feature.

Call 2, one question to confirm the defaults. List them in the question, then: Use these (Recommended) / Change some (ask only the ones they name, with the options below).

A page or flow that must be in it: none / a URL.
Style: Linear (tilted plane, slow drift, blur-dissolves, small low-left words) / Apple / Stripe / Arc / Raycast (
```
references/style.md
```
, one line each).
Length and shape: 30 s 16:9 / 30 s 9:16 / both / 15 s. (
```
--fps 60
```
on request: smoother camera moves, twice the render time.)
Logged-in product: public pages only (default to log in now when a must-show item needs a login) / log in now / later.
Music: generated here for this cut (synthesised, nothing to licence) / ElevenLabs Music (only with their key) / their own track (a file) / a link (YouTube, SoundCloud, Bandcamp) / none. A link or a file: ask who holds the rights, then
```
product.py music
```
(
```
references/brief.md
```
"Music").
Sound effects: subtle UI sounds (clicks and key ticks where the UI acts, a swell into the logo) / none.
Voice: none, on-screen words only / their own recording / text to speech (only with an ElevenLabs key).

The first option of each is the default.

Write the answers to

product/<name>/brief.json

(shape:

references/shapes.md

plan

refuses without it. Example brief for nextwork.ai: must_show = the Create button (prompt your own project), search other people's projects, roadmaps, step-by-step guides, the portfolio in Your Library.

Logging in (on "log in now"): follow

references/brief.md

"Logging in": say where the login is kept first, then

node "$S/login.mjs" login <url>

opens a separate Chrome window they log in to by hand. Recording stays read-only (no create, delete, pay, publish or invite without a yes in the question box) and blurs personal data; show the user the

flows/<id>-blurred.png

sheets before rendering.

在后台启动抓取（步骤 2，使用 Bash

run_in_background

），然后运行

python3 "$S/product.py" copy product/<name>

：它会等待首页就绪（约 50 秒；提问期间内页仍在加载）。其

tagline:

和

nav:

行以及下方的标题，就是用网站自己的措辞呈现的选项。不要读取

site.json

（约 20 KB）。然后发起两次 AskUserQuestion 调用，推荐选项置首并标记为“(Recommended)”；“Other”始终开放，以便填写用户自己的措辞。

第一轮提问，要制作什么（四个问题）：

它用一句话做什么：
```
product.py copy
```
中的
```
tagline:
```
行 / Other。
视频必须展示的 2-3 项内容（多选）：
```
product.py copy
```
中的标题和
```
nav:
```
行所列任务，使用网站自己的措辞。
谁会观看：新用户（Recommended）/ 现有用户 / 投资者 / 开发者。
结尾的唯一行动：访问 URL（Recommended）/ 注册 / 试用某项功能。

第二轮提问，用一个问题确认默认值。 在问题中列出以下默认值，然后提供：使用这些（Recommended）/ 修改部分（只询问用户指定的项目，并使用以下选项）。

必须包含的页面或流程：无 / 某个 URL。
风格：Linear（倾斜平面、缓慢漂移、模糊叠化、左下方的小号文字）/ Apple / Stripe / Arc / Raycast（
```
references/style.md
```
，每种一行）。
时长和画幅：30 秒 16:9 / 30 秒 9:16 / 两者 / 15 秒。（如用户要求，使用
```
--fps 60
```
：镜头移动更平滑，但渲染时间翻倍。）
产品登录状态：仅公开页面（如果必须展示的项目需要登录，默认立即登录）/ 现在登录 / 稍后。
音乐：为本次剪辑在此生成（合成，无需授权许可）/ ElevenLabs Music（仅在用户提供其 key 时）/ 用户自己的曲目（文件）/ 链接（YouTube、SoundCloud、Bandcamp）/ 无。若为链接或文件，先询问谁持有权利，然后运行
```
product.py music
```
（
```
references/brief.md
```
中的“Music”）。
音效：轻微 UI 音效（UI 有动作时加入点击和按键声，并在进入 logo 时加入渐强音）/ 无。
配音：无，仅使用屏幕文字 / 用户自己的录音 / 文字转语音（仅在提供 ElevenLabs key 时）。

每个列表的第一项都是默认值。

将答案写入

product/<name>/brief.json

（结构见

references/shapes.md

）。没有该文件时，

plan

会拒绝执行。nextwork.ai 的 brief 示例：must_show = “Create”按钮（“prompt your own project”）、“search other people's projects”、“roadmaps”、“step-by-step guides”，以及“Your Library”中的 portfolio。

references/brief.md

中的“Logging in”，先说明登录信息的保存位置，再运行

node "$S/login.mjs" login <url>

，它会打开一个独立的 Chrome 窗口，供用户手动登录。录制过程保持只读（未经问题框中明确确认，不执行 create、delete、pay、publish 或 invite），并模糊个人数据；渲染前向用户展示

flows/<id>-blurred.png

图板。

2. Crawl the site

2. 抓取网站

bash

node "$S/crawl.mjs" <url> product/<name> [--include <brief urls>] [--pages 20] [--app <url> --cookies cookies.json]

Started in step 1; about a minute,

product.py pages

waits for it (a brief page it missed: rerun with

--include

). The home page (2x tiles, element crops, brand from computed styles, logo, font files, the page's own videos), then, four at a time beside it, up to 20 inner pages from the site's nav and sitemap.xml, ranked features > pricing > customers > templates > docs > changelog > blog, the brief's URLs first. Each page: its headings and lines, its controls (tabs, buttons, inputs), its videos and GIFs, a screenshot. Look at

images/tile-0.jpg

: a blank tile means the site blocked the headless browser; say so and offer another URL.

bash

node "$S/crawl.mjs" <url> product/<name> [--include <brief urls>] [--pages 20] [--app <url> --cookies cookies.json]

已在步骤 1 中启动；约需一分钟，

product.py pages

会等待其完成（如果遗漏了 brief 中指定的页面，使用

--include

重新运行）。首页包括两张 tile、元素裁切图、来自 computed styles 的品牌信息、logo、字体文件及页面自身的视频；随后每次处理四个内页，并与首页一同保存。从网站导航和 sitemap.xml 最多抓取 20 个内页，按 features > pricing > customers > templates > docs > changelog > blog 的优先级排序，brief 中的 URL 优先。每个页面会提取标题和文本行、控件（标签页、按钮、输入框）、视频和 GIF，并保存截图。查看

images/tile-0.jpg

：如果 tile 为空白，说明网站阻止了 headless browser；应告知用户并提供另一个 URL。

3. Use cases

3. 使用场景

bash

python3 "$S/product.py" pages product/<name>

Writes

pages.md

: every page compact (never raw HTML), the brief on top. Read it and write

use-cases.md

: who it is for and 3-4 jobs ranked, each with the site's own words quoted, the source URL, and the flow that would show it. Brief items first, marked [brief]. Ask in the question box which 2-3 to feature (recommended first).

bash

python3 "$S/product.py" pages product/<name>

该命令会生成

pages.md

：以紧凑形式呈现每个页面（绝不包含原始 HTML），并在顶部列出 brief。阅读它并编写

use-cases.md

：说明目标用户，并按优先级列出 3-4 个用户任务；每个任务都要逐字引用网站自己的文案、附上来源 URL，以及能够展示该任务的 flow。brief 中的项目排在最前，并标记为 [brief]。在问题框中询问用户要重点展示哪 2-3 项，推荐项放在首位。

4. Storyboard, then record the states

4. 先制作 storyboard，再录制状态

Write

storyboard.md

first (

references/story.md

"Story first"): the beats in story order, each with its job, its words (the site's, at most ~5), the capture it uses and how it hands off to the next. Order the use cases as the user's journey, so each one leaves the screen where the next begins.

Then

flows.json

, one flow per use case in that order, chained: each flow's

url

is the page the last one ended on. Steps as in

record.mjs

's header (

text=<the site's words>

or a CSS selector).

bash

node "$S/record.mjs" product/<name> flows.json --states            # every UI state as a 3x still
node "$S/record.mjs" product/<name> flows.json --states --mobile   # the phone layout, for 9:16

Each flow writes

flows/<id>.states.json

and

flows/states/*.jpg

: the start, each step's after-state, the focused field and the typed text with the caret measured per character, a tall still for each scroll. It waits for each view to finish loading (pictures, skeletons) before taking it. Look at the states, not every file: a loading page, a click that opened the wrong thing, a modal you did not want. Fix the flow and capture again (

--only <id>

). Without

--states

it records screencasts (

flows/*.mp4

) for the shot film below.

{"write": "..."}

types into whatever has focus (a search a button or shortcut opened); a link that opens a new tab is followed in the same one; with a dialog open, a

text=

target is looked for in the dialog first; a flow may carry

"mobile": {"steps": [...]}

where the phone layout's controls differ. Each take also records the page's headline, so the opening never crops it.

先编写

storyboard.md

（遵循

references/story.md

中的“Story first”）：按故事顺序列出 beats，每个 beat 包含其任务、文案（来自网站，最多约 5 个词）、使用的录屏素材，以及如何衔接下一个 beat。将使用场景按用户旅程排序，让前一个场景结束时所处的页面成为下一个场景的起点。

接着编写

flows.json

，每个使用场景对应一个 flow，并严格按照该顺序排列，且必须串联：每个 flow 的

url

都是前一个 flow 结束所在的页面。步骤格式与

record.mjs

的文件头一致（

text=<the site's words>

或 CSS selector）。

bash

node "$S/record.mjs" product/<name> flows.json --states            # 将每个 UI 状态录成 3x still
node "$S/record.mjs" product/<name> flows.json --states --mobile   # 为 9:16 录制手机布局

每个 flow 会生成

flows/<id>.states.json

和

flows/states/*.jpg

：包含起始状态、每个步骤完成后的状态、当前聚焦的输入框，以及逐字符测量光标位置的输入文本；每次滚动还会生成一张纵向长图。拍摄前会等待每个视图完全加载，包括图片和 skeleton。检查状态总览，而不是逐个查看文件：留意加载中的页面、点开后打开了错误内容的点击，以及不需要的 modal。修正 flow 后重新录制（

--only <id>

）。不使用

--states

时，会录下供后续 shot film 使用的 screencast（

flows/*.mp4

）。

{"write": "..."}

会向当前获得焦点的位置输入内容（无论焦点来自搜索框、按钮还是快捷键）；打开新标签页的链接会在同一标签页中继续跟随；存在 dialog 时，会优先在 dialog 中查找

text=

目标；flow 还可以包含

"mobile": {"steps": [...]}

，用于处理手机布局中不同的控件。每次拍摄还会记录页面标题，确保开场画面不会裁掉标题。

5. Story and plan

5. 故事与 plan

Write

story.json

beats

from the storyboard (shape:

references/shapes.md

; rules:

references/story.md

): hook, action and result per use case, payoff, end. Each beat's

steps

are its flow's step numbers.

bash

python3 "$PY" "$S/product.py" plan product/<name> --story story.json --style linear --aspect 16:9 [--music generated|eleven|none|audio/<track>] [--sfx subtle|none] [--vo audio/vo.wav]

Length: about 8 s a use case (40 s for five), the hook, payoff and logo included, unless the user asked for a length (

--length

, or

"length"

in the story). The plan paces the result, hook, payoff and travel moments down to fit, never below reading time, and keeps the story, the steps and every per-frame check. It stops shortening where the camera would get busier than the reference films (

journey.py

SPEED_BAR, from the planned camera): smooth beats short, so a site with long pages can run a few seconds over.

A story of beats plans the rendered film (

journey.py

): the pages on one canvas left to right, one camera on one easing, a drawn cursor, every change revealed in place, 60 fps. The plan checks every frame from the camera path (the held focus in the safe frame and clear of the words, the cursor whole or hidden, every line of text whole or out of frame, no capture past its own resolution), re-plans the camera when a frame fails, and exits 1 on what is left. A sparse page is framed tighter on its detected content (

references/story.md

"Framing guarantee"). The score follows the beats (a section per beat, the chord changing at each), effects land on the clicks, keys and new pages; -14 LUFS, -1 dBTP. A story of

shots

plans the older shot film (screencasts and the shot library, each shot naming its

job

根据 storyboard 编写

story.json

，以

beats

表示各个段落（结构见

references/shapes.md

；规则见

references/story.md

）：包括开场钩子、每个使用场景的行动与结果、回报和结尾。每个 beat 的

steps

都是其 flow 对应的步骤编号。

bash

python3 "$PY" "$S/product.py" plan product/<name> --story story.json --style linear --aspect 16:9 [--music generated|eleven|none|audio/<track>] [--sfx subtle|none] [--vo audio/vo.wav]

默认每个使用场景约 8 秒（五个场景共 40 秒），并包含开场钩子、回报和 logo；除非用户指定了时长（

--length

，或 story 中的

"length"

）。plan 会调整结果、开场钩子、回报和镜头移动的节奏以适应目标时长，但不会短于阅读所需时间，同时保留故事、步骤以及逐帧检查。它会在继续压缩会让镜头比参考影片更繁忙的位置停止缩短（根据 planned camera 对照

journey.py

的 SPEED_BAR），并让各 beat 保持流畅且简短，因此包含长页面的网站成片可能会多出几秒。

以 beats 构成的故事会规划成片（

journey.py

）：所有页面从左到右位于同一画布上，一个镜头始终使用同一种 easing，以绘制的光标呈现操作，每次变化都在原位揭示，帧率为 60 fps。plan 会根据镜头路径检查每一帧（固定焦点应位于安全画框内且不遮挡文字，光标必须完整显示或隐藏，每行文字必须完整显示或完全移出画框，录屏不得以超过其自身分辨率的尺寸使用）；如果某帧检查失败，会重新规划镜头，如果仍有问题则以状态码 1 退出。内容稀疏的页面会围绕检测到的内容收紧构图（

references/story.md

中的“Framing guarantee”）。配乐按 beats 展开，每个 beat 对应一个段落，并在每个段落切换和弦；音效落在点击、按键和新页面切换处；响度为 -14 LUFS，真峰值上限为 -1 dBTP。以 shots 构成的故事则会规划旧版 shot film（由 screencast 和镜头库组成，每个 shot 都会标明其

job

）。

6. The animatic, the critic, approval

6. Animatic、critic 与审批

bash

python3 "$PY" "$S/product.py" animatic product/<name> --plan plan-linear-16x9.json

Writes

animatic-<tag>/sheet.png

, the animatic sheet: the start, middle and end of every beat, captioned with its job, time and words, in seconds. Run the

storyboard-critic

agent on the sheet; apply its fixes to the story (order, steps, words, a capture) and plan again; two rounds at most. Then show the sheet and ask in the question box: Approve (Recommended) / Change the order / Swap a shot / Redo a capture. Do not render before Approve. On Approve, stamp it:

python3 "$PY" "$S/product.py" approve product/<name> --plan plan-linear-16x9.json

render

refuses a plan with no stamp, or one whose plan or story changed after it (

scripts/gates.py

stills

still makes the denser per-shot sheet for the shot film.

bash

python3 "$PY" "$S/product.py" animatic product/<name> --plan plan-linear-16x9.json

该命令会生成

animatic-<tag>/sheet.png

，即 animatic 图板：包含每个 beat 的开头、中间和结尾，并标注其任务、时间和文案，时间单位为秒。对该图板运行

storyboard-critic

agent；将修改应用到 story（顺序、步骤、文案、录屏素材），然后重新 plan；最多进行两轮。接着展示图板，并在问题框中询问：通过（Approve，Recommended） / 调整顺序（Change the order） / 替换镜头（Swap a shot） / 重新录制（Redo a capture）。未通过前不得渲染。获得通过后，加盖批准标记：

python3 "$PY" "$S/product.py" approve product/<name> --plan plan-linear-16x9.json

。如果 plan 没有批准标记，或者 plan 或 story 在批准后发生过变化，

render

会拒绝执行（

scripts/gates.py

）。

对于 shot film，

stills

仍会生成更密集的逐镜头图板。

7. Render

7. 渲染

Only after step 6's Approve. "Just render it" on a plan with no stamp still goes through step 6 first: make the animatic and ask Approve.

bash

python3 "$PY" "$S/product.py" render product/<name> --plan plan-linear-16x9.json [--draft | --modal | --lambda]

A 30 s video renders in about a minute on a laptop. The same renderer and render paths as style-edit (

edit.py

): laptop by default;

--modal

--lambda

once the setup skill has set those up. Writes

render-<tag>.mp4

仅可在步骤 6 获得通过后执行。即使用户对未加盖批准标记的 plan 说“Just render it”，也必须先完成步骤 6：生成 animatic 并请求批准。

bash

python3 "$PY" "$S/product.py" render product/<name> --plan plan-linear-16x9.json [--draft | --modal | --lambda]

在笔记本电脑上渲染 30 秒视频约需一分钟。使用与 style-edit（

edit.py

）相同的 renderer 和渲染路径；默认使用本机计算，setup skill 配置完成后可使用

--modal

或

--lambda

。输出文件为

render-<tag>.mp4

。

8. Check

8. 检查

bash

python3 "$PY" "$S/product.py" check product/<name> --plan plan-linear-16x9.json

The camera: every zoom changes size in log space (the same scale factor every frame), takes 0.9-1.4 s, eases in and out (sine.inOut; expo.inOut for arc), and zooms about the target.

plan

and

check

print WARN for a zoom faster than 7x a second at its peak, a speed that jumps between frames, or a continued camera that changes speed at the join.

FAIL: a render older than its plan or story, words not on the site or over 7 words, emoji, an AI tell the site's brand does not own (purple-blue, neon on black, a flat saturated ground, heading + subline

rule), clipping audio, a shot where the product fills under 75% of a 9:16 frame (60% of 16:9; type and the end card exempt; plain ground of the site's colour does not count). WARN: over 2.5 s with nothing moving, words under 4.5:1 contrast on the ground, loudness outside -23 to -9 LUFS (the mix is mastered to -14), a centred block (expected on the end card). Fix FAILs, then render again; at most two rounds. For the rendered film
```
check
```
also runs the framing on every frame, the focus found by template match where the plan put it, the product filling the frame by detected content (edges, not colour), OCR for the logged-in name, and the smoothness meter (
```
meter.py
```
: judder, dead stops, jerk, carry across cuts) against the Linear bar in
```
references/style.md
```
. Also make a 2 fps strip and look at it:
```
ffmpeg -i render-<tag>.mp4 -vf "fps=2,scale=300:-1,tile=12x5" -frames:v 1 strip-<tag>.png
```
.

bash

python3 "$PY" "$S/product.py" check product/<name> --plan plan-linear-16x9.json

镜头规则：每次缩放都在 log space 中改变尺寸（每帧使用相同的缩放系数），持续 0.9-1.4 秒，以缓入缓出方式运动（使用

sine.inOut

；arc 使用

expo.inOut

），并围绕目标缩放。对于缩放峰值超过每秒 7 倍、帧间速度跳跃，或连续镜头在衔接处改变速度的情况，

plan

和

check

会输出 WARN。

FAIL：渲染文件早于其 plan 或 story；文案不在网站上或超过 7 个词；包含 emoji；出现该网站品牌不具备的 AI 风格特征（紫蓝配色、黑色背景上的霓虹、扁平高饱和底色、标题加副标题再加分割线）；音频削波；9:16 画面中产品占比低于 75%（16:9 低于 60%；文字和尾卡除外；仅有网站底色不算产品内容）。WARN：超过 2.5 秒没有任何运动；文字与背景的对比度低于 4.5:1；响度不在 -23 至 -9 LUFS 范围内（混音统一母带处理为 -14）；出现居中的文字块（尾卡中出现属于预期）。修复所有 FAIL 后重新渲染，最多进行两轮。对于成片，

check

还会逐帧检查构图，检查 plan 指定的焦点是否可通过 template match 找到，根据检测到的内容边缘而非颜色判断产品在画面中的占比，通过 OCR 检查登录用户名，并使用平滑度计（

meter.py

：抖动、停滞、顿挫、跨切点残留）对照

references/style.md

中的 Linear 基准。还要生成一张 2 fps 胶片条并亲自查看：

ffmpeg -i render-<tag>.mp4 -vf "fps=2,scale=300:-1,tile=12x5" -frames:v 1 strip-<tag>.png

。

9. Share copy, hand over

9. 分享文案与交付

bash

python3 "$S/product.py" share product/<name>

share.txt

: the caption (checked: only the site's sentences and its domain), the URL, and alt text that says what is shown. Hand the render over on the review page (

../style-edit/references/review.md

; folder

product/<name>

alt

for a second tag), give the paths of the sheet and share.txt. Notes about taste go to the taste skill.

A logged-in run: say where the login is kept (

node "$S/login.mjs" where <domain>

prints the folder) and that it stays logged in on this computer until removed. Once the video is approved, ask in the question box "Log out of <domain> on this computer?" (Yes, delete the saved login (Recommended) / Keep it for the next video); on yes,

node "$S/login.mjs" logout <domain>

bash

python3 "$S/product.py" share product/<name>

share.txt

包含 caption（经过检查：仅使用网站自己的句子和域名）、URL，以及说明所展示内容的 alt text。在 review 页面（

../style-edit/references/review.md

；目录为

product/<name>

，第二个标签使用

alt

）交付渲染结果，并提供 animatic 图板和

share.txt

的路径。有关 taste 的备注应交给 taste skill。

对于包含登录的运行：说明登录信息的保存位置（

node "$S/login.mjs" where <domain>

会打印目录），并告知用户在删除登录信息前，它会持续保持此电脑上的登录状态。视频获得批准后，在问题框中询问“是否在这台电脑上退出 <domain>？”（是，删除已保存的登录（Yes, delete the saved login，Recommended）/ 保留供下一个视频使用（Keep it for the next video））。选择“是”时运行

node "$S/login.mjs" logout <domain>

。

If a script stops

如果脚本停止

message	do
`no brief: ask the brief ...` / `brief.json has no ...`	ask those in the question box (step 1), write brief.json
`plan-<tag> is not approved` / `changed after it was approved` / `no animatic-<tag>/sheet.png`	step 6: animatic, show it, ask Approve, `approve`
`story names '...', which is not in site.json elements` / `click target ... not in site.json`	`product.py copy` lists the elements; use one of them
`not the site's words: ...`	replace those words with the site's own ( `pages.md` )
`--rights is required`	ask who holds the rights ( `references/brief.md` "Music")
`LOGIN: the site wants a login` (music)	ask before retrying with `--cookies-from-browser <browser>` , or offer the generated score
`No ElevenLabs key`	offer on-screen words or their own recording
`Modal is not set up on this computer`	the setup skill's Modal step, or render on the laptop
a blank `images/tile-0.jpg` after the crawl	the site blocked the headless browser: say so, ask for another URL

message	do
`no brief: ask the brief ...` / `brief.json has no ...`	在问题框中询问缺失的 brief（步骤 1），然后写入 brief.json
`plan-<tag> is not approved` / `changed after it was approved` / `no animatic-<tag>/sheet.png`	执行步骤 6：生成 animatic、展示并请求通过，然后运行 `approve`
`story names '...', which is not in site.json elements` / `click target ... not in site.json`	`product.py copy` 会列出可用元素，请从中选择
`not the site's words: ...`	使用网站自己的文案替换这些文字（ `pages.md` ）
`--rights is required`	询问谁持有权利（ `references/brief.md` 中的“Music”）
`LOGIN: the site wants a login` (music)	重试 `--cookies-from-browser <browser>` 前先征得用户同意，或提供生成的配乐
`No ElevenLabs key`	提供屏幕文字或用户自己的录音
`Modal is not set up on this computer`	运行 setup skill 的 Modal 步骤，或改在本机渲染
抓取后 `images/tile-0.jpg` 为空白	网站阻止了 headless browser：告知用户并询问另一个 URL

Files

文件

```
scripts/crawl.mjs
```
: the crawl, home page and inner pages. Reuses
```
style-edit/scripts/capture.mjs
```
(Chrome binary, cookie banners).
```
scripts/record.mjs
```
: UI states as 3x stills (
```
--states
```
) or screencasts, desktop and
```
--mobile
```
; logged in via a profile, read-only deny-list, auto-blur (the logged-in account's own name and handle read from the session into
```
flows/whoami.json
```
, avatars, profile names, emails).
```
scripts/journey.py
```
: the rendered film's plan (canvas, camera, cursor per frame), the framing guarantee, the render checks.
```
journey.py demo
```
self-checks.
```
scripts/meter.py
```
: the smoothness meter.
```
meter.py demo
```
self-checks.
```
scripts/login.mjs
```
: login (a visible window on a dedicated profile), check, logout, where.
```
scripts/product.py
```
: pages, record, copy, plan, animatic, stills, approve, render, check, meter, share, tts.
```
product.py demo
```
self-checks.
```
scripts/gates.py
```
: what
```
plan
```
and
```
render
```
refuse without (brief, approval, music rights, story order).
```
gates.py demo
```
self-checks.
```
scripts/sound.py
```
: the score, the effects, the mix and the master.
```
sound.py demo
```
self-checks.
```
audio/LICENSES.md
```
: every sound's licence and evidence (all synthesised; what was evaluated and why not).
```
references/story.md
```
: story.json, the shot library, flows, the words rules, purposes, 9:16.
```
references/style.md
```
: what Apple, Linear, Stripe, Arc and Raycast films do, measured; how the styles borrow it; what to look for.
```
references/sound.md
```
: their sound, measured; what sound.py does with it.
```
references/brief.md
```
: music rights and logging in, for the brief.
```
references/brag.md
```
: what this takes from latent-spaces/brag (MIT) and what it does differently.
```
../../remotion/src/product/
```
:
```
ProductVideo.tsx
```
(the composition, page/lift/media/flow shots),
```
Journey.tsx
```
(the rendered film),
```
Shots.tsx
```
(the shot library),
```
kit.tsx
```
(styles, geometry, words, the logo).
```
../../agents/storyboard-critic.md
```
: reviews the animatic against the checklist.

```
scripts/crawl.mjs
```
：负责抓取首页和内页。复用
```
style-edit/scripts/capture.mjs
```
（Chrome binary、cookie banner 处理）。
```
scripts/record.mjs
```
：将 UI 状态录成 3x still（
```
--states
```
）或 screencast，支持桌面端和
```
--mobile
```
；通过独立 profile 登录，使用只读 deny-list，并自动模糊登录账号自身的姓名和 handle（从 session 读取到
```
flows/whoami.json
```
）、头像、profile 名称及邮箱。
```
scripts/journey.py
```
：规划成片（画布、逐帧镜头和光标）、提供构图保证并执行渲染检查。
```
journey.py demo
```
可执行自检。
```
scripts/meter.py
```
：平滑度计。
```
meter.py demo
```
可执行自检。
```
scripts/login.mjs
```
：负责登录（通过独立 profile 打开可见窗口）、检查、退出及查询保存位置。
```
scripts/product.py
```
：提供 pages、record、copy、plan、animatic、stills、approve、render、check、meter、share、tts。
```
product.py demo
```
可执行自检。
```
scripts/gates.py
```
：定义缺少哪些条件时
```
plan
```
和
```
render
```
会拒绝执行（brief、审批、音乐权利、故事顺序）。
```
gates.py demo
```
可执行自检。
```
scripts/sound.py
```
：负责配乐、音效、混音和母带处理。
```
sound.py demo
```
可执行自检。
```
audio/LICENSES.md
```
：记录每个声音的许可和证据（全部为合成音效；包含评估过的其他方案及未采用的原因）。
```
references/story.md
```
：介绍 story.json、镜头库、flows、文案规则、用途及 9:16。
```
references/style.md
```
：以实测方式说明 Apple、Linear、Stripe、Arc 和 Raycast 影片的特点、各风格借鉴哪些元素，以及需要检查什么。
```
references/sound.md
```
：以实测方式说明这些影片的声音，以及 sound.py 如何处理声音。
```
references/brief.md
```
：介绍 brief 所需的音乐权利和登录说明。
```
references/brag.md
```
：说明本 skill 从 latent-spaces/brag（MIT）借鉴了什么，以及有哪些不同之处。
```
../../remotion/src/product/
```
：
```
ProductVideo.tsx
```
（合成、页面/抬升/媒体/flow 镜头）、
```
Journey.tsx
```
（成片）、
```
Shots.tsx
```
（镜头库）、
```
kit.tsx
```
（风格、几何、文字和 logo）。
```
../../agents/storyboard-critic.md
```
：根据检查清单审阅 animatic。