motion-graphics

动态图形

完全用代码制作一支看起来像动态设计师作品集、听起来像专为它创作配乐的视频： 销售宣传片、发布视频、讲解视频、片头、Logo 音效、作品集。画面是一个 HTML 页面，每一帧都是时间的纯函数，并在无头 Chrome 中使用真实的子帧运动模糊进行捕获。配乐为这支视频专门编曲和合成，与画面使用同一节拍网格，因此每次剪辑、重击和呼啸声都落在节拍上。不用素材视频或音乐库，不用 AI 视频，不用 npm 包——欢迎使用本人提供的片段和照片。

无论视频用途如何，每支视频都要达到动态设计师作品集的水准：把每份需求都当作能为自己的作品集打头阵的作品——每一帧都经过设计，从第一帧起就有动感，没有填充内容。这是制作投入，而非固定风格：方向（第 3 步）仍决定风格、节奏和能量；平静的需求也会以同样的用心制作成平静的影片。本技能中的所有数字、预设和示例都是真实视频中的实际案例，并非硬性要求——只有规则（帧契约、本人提供的事实、响度目标、客户保护措施）是固定的。

下文的 <skill> 指包含此 SKILL.md 的目录。使用 node 运行脚本；脚本会检查自身要求，并说明缺少什么。在没有 shell、Chrome 或 ffmpeg 的环境中（仅聊天应用），仍将步骤 1–6 作为文件完成，并将项目打包为归档，附上可在用户机器上渲染的命令（node audio/score.mjs、node tools/render.mjs）；明确说明项目尚未渲染或检查。

交付内容

• out/<slug>.mp4 — 母版（1920×1080 或所选格式，60 fps，H.264 + AAC，-14 LUFS，真峰值 ≤ -1 dBTP）
• out/<slug>-web.mp4（轻量版，便于通过即时通讯工具发送）和 out/covers/*.png（缩略图）
• 项目文件夹，可通过一条命令重新渲染；其中的 README 包含方向卡、故事表和声音需求说明，brief.md 记录事实及其来源，REVIEW.md 记录各轮评审
• 按需提供：其他语言版本、9:16 版本、15 秒精简版

工作流程

将此检查清单复制到笔记中，并逐项勾选：

• 1. 需求 → 事实（通过 site-kit 从网站获取 brand/，编写 brief.md）
• 2. 参考资料 → 借鉴内容
• 3. 方向 → 概念 → 基于节拍网格的故事 + 声音需求说明
• 4. 搭建项目框架，构建品牌套件，编码计划 — plan-check 通过
• 5. 先制作四张关键静帧，再逐个制作场景 — 每个场景后都生成拼图和静帧；执行 verify
• 6. 配乐 — 专为这支视频创作，并通过数据和目测检查
• 7. 持续评审，直到每项评分都达到 8 分以上，然后渲染并进行 QA
• 8. 交付并报告

自主完成工作。典型需求可能只有几个链接、截图、业务文案和一句“把它做得惊艳”：自行决定所有事项，写下自己的假设；只有在有问题会阻碍视频制作时才提问（例如，完全无法判断应该引导观众前往何处）。

1. 简报 → 事实

阅读用户提供的所有内容：文本、截图（它们展示的是品牌和产品，不是分镜脚本）、社交媒体页面、机器人。这个视频的所有素材都放在一个文件夹 <brand>-video/ 中：品牌素材包、参考资料和 brief.md 先放进去，第 4 步会围绕它们构建项目，且不会改动这些内容。如果有网站或 Telegram 链接——即使只有这些——也要先据此制作品牌素材包：

# 1–3 minutes: allow a 5-minute timeout
node <skill>/scripts/site-kit.mjs <url | domain | @telegram> --out <brand>-video/brand

它会在无头浏览器中打开网站，并写入 brand/site.md——先阅读该文件：颜色及其用途（页面、文本、按钮、网站自有的颜色令牌）、字体（下载为 TTF 的 Google Fonts 字体，以及它们支持的字形）、备选 Logo（颜色已嵌入的内联 SVG、4× 截图）、行动号召、联系方式和渠道、所有包含价格或数字的内容、3 个页面的标题和正文。然后查看 brand/shots/（桌面端首屏 2×、手机端首屏 3×，以及完整页面）和 brand/sections/（网站每个大型区块的 2× 截图：客户的真实 UI，可直接用于动画）。t.me 页面只能提供头像和简介——其余内容都属于 Telegram。如果网站返回机器人检测页面，应如实报告，不要绕过：请用户提供截图。

场景中要制作动画的界面——卡片、按钮、图表或整个面板——应一次取自产品本身的一个元素，并置于透明背景上（根据页面内容安排状态：打开标签页、输入字段、为免费或付费状态更改标签；不提交任何内容）：

node <skill>/scripts/ui-shot.mjs <url> --out <brand>-video/assets/ui --shot "card=.pricing-card" --click "#tab-2" --shot "panel=.tab-panel"

绝不要凭空重绘产品屏幕；如果网站上没有某个状态，就将其临时制作出来，并在报告中说明。

将用户附带的图片复制到 brand/（有些应用会显示临时副本的路径）。如果只能在对话中看到图片，就在 brief.md 中描述，并使用网站素材包中的截图作为文件。

视频片段（旅行、活动、手机上的产品、屏幕录制）或照片文件夹是影片素材：立即搭建项目（使用第 4 步的命令——节奏之后可以在 js/timeline.mjs 中调整），并在做其他事情之前先查看素材（references/footage.md）：

node tools/footage.mjs scan <their clips or folder>   # shots, motion, which way the camera goes, light; a sheet per clip

从其他项目复用的简报可能会提到两个产品（模板遗留的名称和本项目链接并列出现）。根据链接、截图和具体细节判断应该制作哪个产品，视频中不要出现另一个产品的名称和域名，并在首次回复中说明。

编写 <brand>-video/brief.md：

• 用一句话说明产品承诺；受众；语气
• 3–6 个证明要点，每个都注明来源（引文、URL、“screenshot 2”）
• 仅使用已公开的价格和优惠；注明主要行动号召，以及销售发生的地点（如果业务通过 Telegram 机器人销售，视频就引导用户前往该机器人）
• 联系方式严格照原样填写；品牌颜色（从 Logo 和截图中取样）及字体

绝不编造数字、价格、评价、奖项或客户 Logo。缺少某项事实时，就省略它。

2. 参考 → 借鉴内容

node <skill>/scripts/ref-sheet.mjs <files and links…> --out <brand>-video/refs/analysis

• X / Twitter 和 Telegram 帖子的链接，以及直接的视频 URL 会被抓取到 refs/（仅限公开帖子；帖子的文字会保存在对应片段旁边）；只有在已安装 yt-dlp 的情况下，才会抓取 YouTube、Instagram、TikTok 和 Vimeo。
• 对于每段视频，都会输出节奏信息：硬切次数，以及——因为动态设计很少使用切镜——画面中有运动的帧占比、每分钟的视觉冲击次数，以及其中有多少次落在节拍上（与随机概率对比）；还会输出每秒的能量火花线图、配乐的速度和响度。它会生成两张图表：每次视觉冲击（或每个镜头）之后的一张关键帧，以及每隔 0.5 s 的一张画面缩略图。打开图表并查看。
• 如果链接标为 NOT FETCHED（帖子为私密，或平台不支持 yt-dlp）：请说明这一点；如果内容很重要，就索取文件，或者根据用户的描述开展工作。绝不要声称看过无法打开的视频。
• 写下 5–8 种可借鉴的技巧（每拍一次的动态排版、3D UI、玻璃卡片、翻页式显示板、2×2 网格、照片墙……）、用数字表示的节奏（每分钟的视觉冲击次数、落在节拍上的占比）、能量，以及一项比参考内容做得更好的地方。之后，对自己的 out/<slug>-draft.mp4 --bpm <your BPM> 运行 ref-sheet 并进行比较（给定的速度会将网格对齐到时间线上；检测器可能会将较快的速度减半）。
• 用代码重现技巧。绝不要复制参考内容中的镜头、画面、音乐或可识别的设计，也不要复制其中的文字、名称、UI 标签或角落字幕；客户自己的素材可以使用。
• 如果用户要求重制某个参考内容（“像这个视频”），请根据关键帧图表、剪辑时间和视觉冲击，写出逐镜头的拍摄指导，然后用客户的品牌、文字和素材重新制作：保留结构和节奏，但绝不使用参考内容中的镜头、标志、文字和音乐。

3. 方向 → 概念 → 基于节拍网格的故事 + 声音简介

在此确定视频方案。完整阅读 references/direction.md、references/wow-library.md §1，并从 references/look-cards.md 中选一张卡片。然后按以下顺序操作：

• 读取每一条信号（direction.md §1–§4）：先看当事人的原话，不论使用哪种语言，并引用原文；他们提供的材料（网站、仓库、应用、截图、录音、照片，或仅有一个名称）决定主角是什么；视频的播放场景决定开场、格式，以及画面是否必须在静音时也能发挥作用；品牌自己的文案、颜色和界面动效决定视觉风格与氛围；主题放在最后考虑。
• 能量、氛围、声音的作用（direction.md §5）。当事人的原话决定能量（“dynamic” → 从第一小节就进入律动；“calm” → 低至中）。如果没有这类描述：参考作品中的音乐走向；如果没有参考作品，则采用这种类型的宣传片、发布片、短视频或广告的默认处理方式——从第一小节就进入律动并保持，通过叠加元素制造对比。平静的处理需要在卡片中说明理由（品牌本身就很平静、用于背景播放，或主题敏感）。氛围（明亮或暗沉、活泼或严肃）是单独的选择；声音的作用可以是音乐主导，也可以在产品界面是主角且每次点击都应被听见时采用界面主导。
• 三个概念，一部影片（direction.md §6）：从第一帧到最后一帧贯穿三个不同的创意手法，每个手法都要有一个标志性瞬间；为它们评分，选出最佳方案，并记录另外两个。只用一种手法，不做蒙太奇。
• 时长：以当事人给出的时长为准——“15 seconds”就做 15 秒；如果容不下所有信息，就保留最有力的内容，说明删去了什么，并提供更长版本。如果没有指定时长，则根据内容选择：Logo 短音效片段为 4–8 秒，片头、单条信息或短视频为 10–20 秒，包含 3–5 个佐证点的销售宣传片为 30–45 秒；除非对方要求更长，否则最长 60 秒（长片：references/pipeline.md §12）。
• 销售视频的节奏弧线：第一秒内抓住注意力（用 3–6 个词动态呈现承诺或痛点）→ 品牌随音乐重拍登场 → 说明运作方式 → 提供佐证 → 优惠（仅在确有优惠时）→ 定格品牌标识，并展示 CTA 和联系方式，至少停留 2.5 秒。不以销售为目的的视频（片头、短音效片段、个人短视频）保留制作水准，去掉推销内容：吸引注意 → 层层推进 → 在重拍处呈现亮点 → 片尾卡。每 2–4 秒要有新内容。
• 品牌的视觉 DNA：从 Logo 和产品中提取一种形状、角度或物件，将其用作转场语言；先规划概念中的标志性瞬间，再逐步铺垫至此。
• 结合声音选择律动类型、风格和速度（references/sound-design.md §3）：一小节 = 240 / BPM 秒；场景时长取整小节；每次重击和揭示都落在节拍上。能量是强度，不是风格：品牌仍要选择风格；每拍都有底鼓的处理方式（house、nu-disco、corporate 4/4）——每当要求高能量时，各种模型都会默认如此处理——只适用于偏好俱乐部风格的品牌。半拍感觉上的速度是 BPM 的一半（141 → ~70）：高能量方案应选择全拍律动，或用密集的踩镲和滚奏推动半拍律动。可用以下命令获取起始建议： node <skill>/assets/template/tools/sound-print.mjs --suggest "<brand>" --world <cars | tech | apps | food | beauty | kids | b2b | health | nightlife | regional | dev | lifestyle> --energy <low | mid | high> --in <the folder the project will live in> 会列出该类别中对应能量等级的风格卡片，并提供速度、调性和音色特征——结果会根据品牌名称轮换，并避开该文件夹中已有视频所用的风格（--list <folder> 可查看它们听起来如何）。除非当事人的原话、参考作品或剪辑节奏另有指向，否则采用第一个建议。
• 撰写方向卡（direction.md §7）——第 4 步搭建好项目后，立即写入项目的 README（模板中已有相应字段），且必须在制作任何场景之前完成：用一句话概述影片；记录你读到的信息；概念；视觉风格；每个场景的 Energy: 及其来源（“high from bar 1 — asked for ‘dynamic, punchy’”）；声音的作用；节拍图——逐镜头注明节拍区间、屏幕内容、如何进入（已经在运动中）以及如何离开（加速运动、模糊渐变、匹配剪辑）；以色彩角色和十六进制色值表示的调色板；字体；落在相应节拍上的硬切；禁用清单（反泛化清单——场景计数器和 HUD 始终列入其中——以及品牌排除的内容）；包含提示列表的声音说明。
• 素材片段：当素材是当事人提供的视频片段或照片时，它们就是主角（references/footage.md §1–§3）：用最生动的瞬间开场，剪辑落在强拍上，音乐重拍处呈现最佳镜头，转场承接每个镜头自身的运动，文字绝不遮挡主体。当有人说话时，以声音为主导——在语句间的静默处剪辑，音乐在语音下方压低音量，字幕取自其字幕文本（footage.md §12–§13）。
• 如果用户粘贴了自己撰写的详细方向（镜头、画面、颜色、禁用清单），就必须落实到每一帧；技能默认值只补充其未指定的部分。 阅读 references/story-and-motion.md，了解节拍表、动效技法、转场和反通用化清单；其中第 2 节最后给出了一个虚构品牌的完整指导示例——这是你需要达到的细节程度，而不是要照搬的风格。

4. 搭建项目框架，制作品牌套件

node <skill>/scripts/new-project.mjs <brand>-video --name "<Brand>" --format 16:9 --bpm <bpm> --lang <en|es|…>

它会基于文件夹中已有的内容复制一份可用模板（一段配有专属配乐的短演示片）；已有文件绝不会被覆盖，因此 brand/、refs/ 和你的 brief.md 都会保留；它还会检查 Node、ffmpeg 和浏览器，并打印后续步骤。然后：

• Logo：SVG（用户提供的，或来自 site-kit 的 brand/logo/*.svg）本身即可制作动画；栅格图则通过 node <skill>/scripts/trace-logo.mjs logo.png --out assets/logo 进行矢量描摹，生成矢量图形（每个字母一个，可制作动画），并报告匹配度（IoU ≥ 0.97 即为良好）。
• 颜色：在 css/style.css 中设为设计令牌，取自品牌，而非猜测：brand/site.md 列出了网站使用的颜色（页面、按钮、文字——其优先级高于可能未使用的颜色令牌）；node <skill>/scripts/ palette.mjs logo.png 会打印 Logo 的准确十六进制颜色值及其占比和用途。明暗模式遵循品牌自身的表面色（白色网站 → 使用 style.css 中的浅色预设）；模板采用深色，仅仅是因为它的演示品牌使用深色。
• 字体：放在 assets/fonts 和 css/fonts.css 中：使用品牌的 Google Fonts（来自 brand/fonts/，复制 TTF 文件和 brand/fonts/fonts.css 中的规则；其中的字形覆盖检查行会检查网站文本中的字母和符号）；网站自行提供的字体可能仅授权给该网站使用——请选用最接近的开源字体。已内置 Montserrat 和 JetBrains Mono（OFL；支持拉丁字母和西里尔字母）；如果捕获日志中出现 [fonts] … has no glyph，其中会指出需要修复的字符。
• 文案和联系方式：放在 js/copy.mjs；客户照片和 brand/sections/ 裁剪图放在 assets/img 中，并预先调整好尺寸。
• 在 js/timeline.mjs 中编排故事：BPM、DURATION、场景时间段 S、命名提示点 CUE、ENERGY、WHIPS（快速移动）、COVERS、LOOP（循环播放的视频结尾须回到自身的首帧）。画面和声音都会导入此文件。

填写 README 中的指导卡片和故事表格，然后在制作任何场景之前检查计划：node tools/plan-check.mjs 会对削弱了客户所要求能量感的场景报错，并对开头一秒空白、连续四秒没有新内容、结尾卡过短、场景之间有空档、文案中出现计数器等情况发出警告。修改计划，而不是渲染结果。

5. 先做关键静帧，再逐个制作场景

先制作承载影片核心内容的四个画面——钩子、揭示、标志性时刻、收尾定版——先把它们当作静帧查看，再做其他工作：静帧上发现的问题只需一分钟就能修好，渲染后则要花十分钟。然后用你的场景替换演示场景（js/scenes/*.js，在 js/reel.js 的 SCENES 中列出）。每个场景导出 build(ctx)，并返回 (t, frame) => void。要确保渲染正确，需遵守以下约定：

• 每一帧只取决于 t：不使用 CSS 动画或过渡、Date、Math.random 或计时器，也不使用 <video>；会变化的文本（滚动数字、解码、打字）根据该帧自己的时间 frame / FPS 计算；
• 每一帧都写入所有动画属性——set() 会重写整个变换，并在缺少 o 时回退到 CSS 透明度；
• 场景在时间窗口外隐藏，且不能过早用不透明背景遮住前一个场景；每个转场期间的时间窗口都要重叠——旧场景持续显示，直到新场景填满画面；新场景的不透明背景恰好在这段重叠时间内淡入；
• 评分所需的内容（词表、时间表、曲线）都放在不含 DOM 的 .mjs 文件中，以便 Node 导入。

每完成一个场景，就查看一次：

node tools/capture.mjs sheet <t0> <t1> 24 --query only=<scene>     # 24 frames from t0 to t1 → out/sheet.png
node tools/capture.mjs still <t> <t> …                             # full-size frames at a list of times → out/stills/

检查溢出、重叠、空白帧、手机尺寸下的可读性，以及每个转场前后 ±0.1 s 的画面；node tools/capture.mjs verify 会正向、反向和乱序渲染相同的帧，并确保任何不只由 t 决定的内容都会导致失败。运动应使用弹簧，而非固定曲线（引擎中的 SPRING、track()、camera()；story-and-motion.md §4）。模式示例——动态文字、连续不断的形状、智能摄影机演示、证明数字、循环片尾卡、玻璃、照片墙、地图、徽标、擦除、粒子：references/scene-cookbook.md。人物的影像和照片会绘制在 WebGL 屏幕上——使用 tools/footage.mjs cut 剪辑，通过 remap() 调整速度，进行调色、甩镜和快速推进：references/footage.md §4–§12。

6. 为这支视频创作配乐

声音占成片效果的一半，不能听起来像上一支视频，也不能像演示配乐。你无法听到声音，因此要根据结构来设计，并用数字和图像检查：

1. 完成声音简报（references/sound-design.md §2）：流派及原因、速度和调性、鼓组、贝斯、和声、钩子（徽标揭示时播放的 2–4 个音符组成的声音标志）、2–4 种品牌世界音效（引擎、咖啡研磨机、纸张、收银机……）、每个场景的能量（ENERGY，步骤 3）、声音的作用（以音乐为主或以 UI 为主）、每个可见事件对应的音效映射，以及响度目标。如果用户描述了声音，就把它转化为这些选择；如果用户提供了参考曲目，就匹配其能量，绝不要模仿其旋律。
2. 从流派卡片开始（references/genre-cards.md），使用合成器从头编写 audio/score.mjs（references/synth-api.md）：用一张 harmony() 表驱动所有声部；用 steps() 网格制作鼓点；根据与画面相同的 CUE 和时间表安排音效；在最大的一次重击前留出 gap()；最后一次重击后加入尾音。根据各场景的 ENERGY 进行创作：'high' 场景要保留鼓和贝斯；第二次高潮要增加一个层次，而不是移除第一次高潮中的层次。
3. 渲染并检查（每次耗时数秒，重复直到效果完善）：

node audio/score.mjs --report        # the WAV + per-bus level per scene
node tools/audio-check.mjs           # loudness, true peak, balance, energy arc, uniqueness + out/qa/music-audio.png

打开 out/qa/music-audio.png：每次重击都必须与提示线对齐，高潮部分必须比序曲更密集、更明亮，徽标出现前的空缺必须呈现为暗色竖栏，尾音必须逐渐淡出。unique 行会将曲目的指纹（速度、调性、底鼓／军鼓／踩镲模式、音色、和弦）与演示配乐及同一上级文件夹中的其他视频项目进行比较：如果与演示配乐相似就会 FAIL；与之前视频的相似度达到 ≥ 0.75 就会 WARN，并指出相似之处——修改这些内容（sound-design.md §12）。同一品牌的系列视频可以有意共用声音标志；请在报告中说明。

7. 反复评审，直到每项评分都达到 8 分以上，然后渲染并进行 QA

完整渲染前，请像严苛的动作导演一样审视自己的画面，而不是像自豪的创作者一样：

node tools/capture.mjs review        # out/review/: a frame per beat, the phone view (360 px wide), strips through fast moves
node tools/render.mjs --draft        # half size, no motion blur, with sound: the timing, the sync by ear if the user listens

按 1–10 分评分：前 2 秒的吸引力 · 手机尺寸下的可读性 · 动态效果（弹簧和缓动，没有静止画面） · 多样性 （每 2–4 秒都有新内容） · 构图（一个主角，画面充实） · 品牌和数据准确性 · 音画同步。在 REVIEW.md 中写下一句结论、各项评分，以及三个最严重问题出现的时间和证据（画面、条带或层级），修复后再次运行——直到每项评分都达到 8 分或以上；条带应涵盖每个快速动作和每次场景切换，因为影片最容易在这些地方出问题。每次工作时段结束时，在 README 的 Sessions 部分添加一行：记录完成了什么、做了什么决定、还留下什么，让下一次工作从本次停止处继续。然后：

node tools/render.mjs                # full quality → out/<slug>.mp4, -web.mp4, covers, QA
node tools/render.mjs --range 12-18  # after a fix: re-render only the chunks that changed

QA 会自动运行。不能有任何 FAIL；逐一检查所有 WARN（flash 表示场景之间存在空白帧，pop 表示某一帧与前后两帧都不同，edges 表示文字被画面边缘裁切，hook 表示开场静止：查看此处的静帧；language 表示视频语言与单词所用文字体系不同，demo 表示模板自带的文字——请从别处复制内容）； 打开 out/qa/<slug>-sheet.png。在 3–4 个工作线程上，每秒 1080p60 视频的完整渲染需要 20 秒到 2 分钟，具体取决于场景的复杂程度——先通过静帧修复能修复的问题。在共享机器上，请调低 --jobs。

8. 交付并汇报

简要告知用户：视频讲述了什么（故事表）、你如何解读他们提供的内容（方向卡片的首几行和 ENERGY 行）、创意概念和视觉风格、声音概念（流派、速度、调性、吸引点、品牌世界音效）、文件及其大小、验证结果（时长、fps、LUFS、真峰值、QA 结果、上次评审评分）、你做出的假设、仍会改动的内容（来自 REVIEW.md——他们的一半备注已写在那里），以及如何修改内容（js/copy.mjs 中的文字和联系信息、js/timeline.mjs 中的时间安排、audio/score.mjs 中的声音）。提供其他语言版本（?lang=xx）、9:16 版本或 15 秒剪辑版（tools/cutdown.mjs）。发布建议：静音信息流中的第一帧会作为缩略图（应以文字说明视频承诺）；X、YouTube 和网站使用横版，Reels、TikTok 和 Shorts 使用竖版；链接放在帖子或首条回复中，不要只放在视频里。 详情：references/pipeline.md。

质量标准

视频完成时，须满足以下所有条件：

• 从三个概念中选定一个，并从第一帧贯穿到最后一帧；真实产品或素材是主角； 方向卡片已放入 README，且 plan-check 检查通过
• 最近一次评审的每一项评分均达到 8 分以上（REVIEW.md）
• 从第一帧开始就有动态；钩子在不到一秒内就能读懂
• 每次剪切、重击和揭示都踩在节拍上；音乐高潮落在品牌揭示时
• 节奏经得起数据检验（ref-sheet.mjs out/<slug>-draft.mp4 --bpm <BPM>）：至少 75% 的画面帧中都有动态元素；节奏鲜明的视频每分钟呈现 55–90 个视觉亮点，且大多数都落在节拍上——用于测量本技能的动态参考视频中，67–100% 的帧都有动态元素，每分钟有 45–91 个亮点（wow-library.md §1）
• 镜头始终保持运动（缓慢推进、视差、在重拍处晃动）；每个快速运动都有动态模糊和音效
• 入场使用缓出，退场使用缓入；擦除时长 ≥ 0.3 s；各组元素依次出现；每帧只有一个主角
• 1080p 下文字 ≥ 26 px，停留时间足够阅读；任何语言的文字都不得被截断
• 每句文案都要像该语言的母语写作者会写出的内容——仔细校对；不得生造词或逐字翻译（词典中的第一个释义往往并不合适）
• 设计体现品牌的色彩和形状；每条陈述中的关键词都用一种强调色标出
• 片尾卡停留 ≥ 2.5 s，Logo、CTA 和联系方式均清晰醒目
• 音乐的能量感要符合当事人的要求：根据对方的措辞撰写 ENERGY（再参考参考资料，最后才考虑该流派的默认风格——宣传片要有推动感，只有理由充分时才采用平静风格）；audio-check 应确认混音符合此计划——对方要求动感时，从最初几个小节起就要动感；要求平静时则保持平静
• 配乐要有自己的流派和钩子，至少包含一种品牌世界中的声音；最大重拍前要有静音，结尾要有余音，并通过 audio-check（≈ 目标 LUFS，真峰值 ≤ -1 dBTP，unique 低于 0.75，不得出现 FAIL）
• 不得包含反通用清单中的内容（references/story-and-motion.md §9）：不得使用幻灯片式淡入淡出、HUD 叠加层、素材库视频风格或通用背景音乐
• 任何位置都不得出现场景计数或章节标签（如“01 / 06”“SCENE 03”、进度圆点）：视频不得为自身编号

保护客户的规则

• 事实只能来自需求说明、网站或用户。不得编造价格、统计数据、评价、奖项或合作伙伴 Logo。
• 截图中不得包含个人数据（私人电话号码、地址、姓名、账户余额、未经同意者的面部）。商务联系方式必须与提供的内容完全一致。
• 只有用户要求时才能编造联系方式；此时使用预留的虚构范围（+1 (555) 01xx 号码、*.example 域名，以及明确属于占位符的账号名）。
• 除非需求说明将第三方商标列为客户的合作伙伴或素材，否则不得将其用作视觉元素。可在中性图标旁用文字提及产品支持的服务（Slack、Telegram、银行），但不得重绘其 Logo。
• 遵守客户所在市场的广告法律和平台规则（例如酒类、烟草、药品、金融和 VPN 相关规定）。
• 未经用户同意，不得安装软件包——本技能不需要安装任何软件包。

陷阱（每一个都曾让真实项目耗费时间）

• 场景中任何不由 t 决定的内容——CSS 过渡、Date.now()、计时器、Math.random()、<video>——在每个 worker 和每个子帧中的渲染结果都不同：分块无法拼接，运动模糊也会拖影。改用 js/engine.js 中的 hash(i, seed)、noise1 和 ease。
• **默认音效：速度为 120–128 BPM 的浩室音乐，每拍都有底鼓，A 小调，使用音色包默认音色。**如果不加干预，每个模型都会为每份需求创作这样的音乐；用这种方式配乐的宣传片听起来都一样，测量结果也如此（律动相同、音色相同）。“有动感”意味着律动从开头几小节就开始推动，而不是浩室音乐。audio-check 中的 unique 检查和 QA 会发现这个问题；解决办法是换一种曲风卡、律动和音色包——而不是换一个种子或和弦。
• **“做得有动感”之后，前半段却很平静。**对比结构——安静的前奏、较轻的主歌、揭晓时才加入律动——只是多种方案之一，不是默认方案：一支要求充满能量的新品发布宣传片，直到 36 秒中的 20 秒才进入完整律动，而且用了让人感觉只有 70 BPM 的半拍律动。用户的文字决定 ENERGY，而 audio-check 会确保混音符合这个要求。
• **每个模型都会采用的默认做法。**不给任何提示时，每个模型都会制作出相同的视频：黑暗画面带绿色光晕、带编号标签的米白画布、渐变背景上渐显的居中文字、虚构的徽标，以及不存在的屏幕。两份要求相同的需求，产出的视频看起来也会如出一辙。解决办法是方向卡、视觉卡和三个概念（direction.md §9）。
• **被运动模糊混合的数字。**根据采样时间计算的计数器，会在模糊帧中同时显示两个值（“£1,039”叠在“£939”上；过程中从未出现过这个值）。应根据帧自身的时间计算文本。
• **盲信自动检测的节拍网格来确定音乐段落切入点。**节拍跟踪器可能把小节位置错开两拍；低音电平不会：ref-sheet 会打印低音进入的位置。
• **在手动输入的秒数位置添加音效。**时间调整一次，音效就会错过对应的画面。应使用与画面相同的 CUE 和时间表来放置所有音效。
• **用完整渲染来判断修复效果。**渲染一段 30 秒的视频要花 10–60 分钟；生成一张静帧只需一秒。用静帧和表格检查，只重新渲染有改动的范围（--range）。
• 字体缺少所需字形（其他文字系统、新版货币符号、箭头），导致系统字体回退并改变文本宽度。main.js 会在捕获日志中指出缺少的具体字符（[fonts] Mono has no glyph for "₹"）：换字体或字符。
• **把峰值问题交给编码器处理。**FFmpeg 的 AAC 编码器在一份 192k 副本中，让原本干净的配乐峰值增加了 5 dB。render.mjs 和 cutdown.mjs 会通过 tools/aac.mjs 编码，该工具会测量每个文件；其他编码文件可用 node tools/aac.mjs out/*.mp4 检查。
• **声称看过自己无法打开的参考内容。**ref-sheet 会抓取公开的 X 和 Telegram 帖子；如果它将链接列为 NOT FETCHED（例如私人帖子，或没有 yt-dlp 时的 Instagram 或 TikTok），就应如实说明，并依据用户的描述或文件开展工作。
• 角落里的场景计数器（“01 / 06”、“02 / 06”……）——每个模型都会添加这个细节来营造设计感；而这项技能服务的用户要求所有视频都不要出现它。屏幕上的数字应是品牌信息，绝不能是场景编号。main.js 会在捕获日志中指出此类数字，QA 也会因此判定失败。
• **凭记忆猜测品牌颜色和字体。**只需运行一条命令，就能获取网站的真实十六进制颜色值、按钮颜色和字体（site-kit.mjs）；视频用了错误的绿色，看起来就像属于别的品牌。
• 按名称终止浏览器进程会在共享机器上中断其他人的工作。工具会自行启动和停止进程；出现卡顿时，只停止它们打印出的 PID。

参考文件

在指定步骤读取参考文件，不要提前全部读取。

文件	读取	跳过
references/direction.md	步骤 3，全文：聆听每个信号、能量和声音的作用，三个概念，以及卡片	—
references/wow-library.md	步骤 3：§1（用数字衡量标准）以及与你的方向最接近的两个模式	其他模式
references/look-cards.md	步骤 3：你选择的卡片，以及“How to pick”	其他卡片
references/story-and-motion.md	步骤 3，全文：节拍表、动态设计、转场、反套路清单	—
references/scene-cookbook.md	步骤 5：你要构建的模式（搜索其标题）	其余内容
references/footage.md	如果对方提供了视频片段或照片，则在步骤 1、3 和 5 读取	否则
references/sound-design.md	步骤 3（简报用 §2–§3）以及步骤 6，全文	—
references/genre-cards.md	步骤 6：只读你的流派卡片，以及与你融合的那张卡片	其他卡片
references/synth-api.md	步骤 6，在编写 audio/score.mjs 之前	“Writing a new voice”，除非没有任何构建器能为你的品牌打造声音

命令

命令	用途
node <skill>/scripts/site-kit.mjs <url | @telegram> [--out brand] [--pages 3]	根据链接生成品牌套件：截图、版块、Logo、颜色、字体、文本、价格
node <skill>/scripts/ui-shot.mjs <url> --shot "name=<css>" [--click …] [--type …] [--eval …]	逐个元素呈现产品的真实 UI，背景透明
node <skill>/scripts/new-project.mjs <dir> --name … --format … --bpm … --lang …	创建项目框架并检查环境
node <skill>/scripts/ref-sheet.mjs <files or links…> [--bpm n]	研究参考内容（获取 X / Telegram 链接）或你的草稿：节奏、重拍、速度、段落起伏、表格
node tools/plan-check.mjs	在创建任何场景前检查计划：要求的能量与规划是否匹配、第一秒、节奏、结尾、计数器、其他脚本中的文案
node <skill>/scripts/trace-logo.mjs <image> --out assets/logo	将栅格 Logo 转为可制作动画的矢量图形
node <skill>/scripts/palette.mjs <image> [--k 6]	从 Logo 或截图中提取准确的品牌颜色
node tools/capture.mjs sheet / still / review / verify / eval / doctor	预览、评审集、确定性检查
node audio/score.mjs [--report] [--lang xx]	生成配乐 → out/music.wav
node <skill>/assets/template/tools/sound-print.mjs --suggest "<brand>" --world … --energy … --in <folder>	为此品牌和能量选出起始流派卡片、速度、调性和配器，避免与之前的视频雷同
node tools/audio-check.mjs [--zoom a-b] [--against …]	检查配乐：数值、频谱图，以及是否有新意
node tools/render.mjs [--draft] [--range a-b] [--query lang=xx] [--jobs n]	渲染、编码、生成封面、执行 QA
node tools/qa.mjs [file], node tools/cutdown.mjs --ranges …	交付检查、短剪辑（也会执行 QA）
node tools/aac.mjs <file>…	检查任意编码文件的响度和真峰值
node tools/kit.mjs <audio files…>	将对方提供的录音转换为 48 kHz WAV，并标出每段声音的最大音量位置
node tools/footage.mjs scan <clips…> / cut <clip> <a>-<b> --name n	检查对方的视频素材：包含什么内容；以视频尺寸提取一段片段中的画面
node tools/pops.mjs <video>	检查单帧突变（QA 也会运行此检查）
node tools/export-timeline.mjs	将时间线导出为 JSON（秒和帧），供 Remotion 或 HyperFrames 使用
node audio/synth/selftest.mjs [--wav out/tour.wav]	合成器自检（全部 80 种音色）