ClaudinNarsis/claude-video-skills

默认讲解视频

一款沉稳、高级的产品演示视频，类似于资金充足的初创公司在官网首页展示的那种。其核心技巧在于克制：明亮的浅色画布、一次只显示一行简短文字，以及经过干净重构的产品界面，在用户操作时进行特写拍摄。相机负责叙事：它推近至一行文字，跟随打字动作移动，拉远以展示结果，然后滑动到下一个功能。

你将其编写为一个 HTML 页面，根据时间值渲染任意帧，然后将其渲染为带有动态模糊和配乐的 MP4。

步骤 1：获取需求（一次性沟通，然后独立工作）

在一条消息中询问所有内容，然后独立工作。只有产品名称是必需的；对于任何留空的内容，由你自行决定并说明你的选择。

1. 产品：名称，以及用几句话说明其功能。最好提供网站 URL。
2. 观众必须记住的一件事（例如：“输入想法，获得实时应用”）。
3. 品牌：颜色、字体、Logo 文件，或“使用网站的样式”。如果没有，则使用下面的默认调色板。
4. 格式：16:9（1920×1080）或 9:16（1080×1920）。默认为 16:9。
5. 时长：默认时长如下所述。
6. 音乐：用户自己的曲目（文件路径），或由你合成。默认：合成。
7. 指导（可选）：他们希望出现的场景、标语、行动号召，或任何需要避免的内容。

如果他们提供了 URL，请在编写任何内容之前读取它（通过网页获取）以了解产品的实际措辞、功能、颜色和字体名称。UI 标签和标语使用他们的真实用词。

切勿捏造事实。 不得编造客户数量、收入、评分、推荐语或引用。仅当用户或网站明确说明时，才能使用数字；否则使用相对柱状图、进度条和占位骨架线条。UI 中的示例内容（提示、文件名、项目名称、收据上的价格）可以真实可信；但关于产品本身的声明（统计数据、用户数量、评分、如“免费”之类的优惠）则不允许。行动号召仅使用用户或网站提供的 URL 或优惠；如果未提供，则以名称和标语结束。

Logo。 仅当用户提供文件或他们自己的产品并要求时，才使用 Logo。否则，以文字形式使用品牌字体显示名称。第三方 Logo（集成）仅在提供时使用；否则使用带有名称的中性圆角方块。

同时询问（可选）：要展示的 3–5 个功能或工作流步骤，以及产品连接的任何内容（集成）。如果他们提供了 URL，则从网站获取这些信息。

此风格的默认时长：60 秒。范围 45–90。按时长分配预算（首先删除可选部分）：

时长	功能数量	可选部分
45 秒	2–3，每个约 9 秒	证明或集成，二选一
60 秒	3–4，每个约 10 秒	证明或集成，选一
90 秒	4–5，每个约 12 秒	两者都包含

步骤 2：编写脚本，然后构建

结构

首先编写脚本和时间表：每一行屏幕文字、跟随其后的 UI 时刻及其时间；将时间加起来，对照上述预算。屏幕文字是唯一的“旁白”，因此它必须独立讲述故事。

场景和相机如何配合： 每个场景（一行标题、一个 UI 时刻）都是具有自己相机的独立层。在一个场景内，相机执行推近、跟随和拉远动作；场景之间，结束的层通过短暂的模糊（0.3–0.4 秒）溶解到下一个已经开始移动的层中。

1. 开头（0–5 秒）。 纯色浅色画布。一个小的词在中心淡入：Introducing。它溶解到品牌时刻：柔和的品牌渐变扫入（丝质般的对角光线带缓慢漂移），Logo 或名称居中显示、字体较小。
2. 问题或诉求（约 5 秒）。 一行观众能识别的短文字（仍然手动构建潜在客户列表？），或直接跳到产品的输入框：一个大的圆角输入框，为空并带有占位文本，下方有建议标签。
3. 功能章节（3–5 个，每个约 8–15 秒）。 每个章节包含：
   • 标题行：一个短句，字体较小（1080p 下约 28 像素），在纯色画布上居中显示。逐词输入或淡入。然后相机推近该行，直到其跨度约占帧宽的 75%，并且一个关键词或短语被高亮显示：一个柔和的品牌色框从左到右扫过其后方（直接致电决策者。立即。）。
   • UI 时刻：产品的真实界面，以干净的矢量 UI（非截图）重建，仅裁剪出重要部分并放大显示。相机足够近，使得元素填满大部分帧，并跟随动作移动：文字输入到输入框（相机跟随光标；使用 measureText 测量文字位置）、代理步骤逐一勾选（旋转图标 → 对勾，找到 247 个匹配）、结果卡片堆叠且远处的卡片模糊（景深）、表格逐行填充、光标点击单元格按钮并显示值、添加新列且每个单元格“思考”时显示微光效果然后值出现、弹出窗口打开显示推理和来源。
   • 拉远：操作结束后，相机缓缓拉出，短暂展示整个屏幕，让观众理解所在位置，然后继续滑动。
4. 证明（可选，仅限真实数字）。 一行包含一个递增加数字的句子，数字高亮显示（基于 3 亿+ 个档案的数据库），背景为微妙的点状地球或网格。
5. 集成（可选）。 为您现有的工作流而建。 居中显示，同时 8–12 个应用图标（圆角方块，仅在有提供时才使用真实 Logo；如果集成数量较少则重复）从边缘以不同深度飘入：近的较大且略微模糊，远的较小且清晰，所有图标以视差效果漂移。此处文字自行放大而非相机推近，以便图标保持在帧内。
6. 结尾部分。 在品牌渐变背景上：一行文字，其中一个关键词在用例之间循环高亮（在 Product 中完成所有 [潜在客户开发 / 研究 / 外联] 工作。），然后，仅当产品确实存在时，另一种使用方式（例如，对于带有 Claude 连接器的产品，显示 或者直接问问 Claude），接着是标语，其关键词高亮显示。
7. 结束卡片（3 秒）。 Logo 或名称位于品牌渐变背景上，URL 或行动号召以小字体显示在下方。

使其感觉高级的规则

• 一次只做一件事。 屏幕上永远不要同时显示超过一行文字和一个 UI 元素。文字和 UI 几乎从不共享同一帧：文字场景之后是 UI 场景。
• 相机即是剪辑师。 没有硬切。每次场景变换都是一次相机运动（推近、拉远、滑动）或在纯色画布上的柔和模糊溶解。相机运动为平滑缓动（ease，0.6–1.2 秒）或强阻尼弹簧（z ≥ 0.95）；不要有弹跳效果。
• 真实 UI，保持干净。 根据你对它的了解（或其网站）重建产品界面：真实的布局、标签、颜色、字体和圆角半径，简化到场景所需。其中的内容为符合产品的可信示例数据。使用柔和阴影、1 像素边框和充足留白。
• 光标： 标准的 macOS 风格箭头，沿柔和曲线移动，在点击前稍作停留，并带有轻微的按下凹陷和点击控件上的柔和波纹效果。悬停状态会改变。
• 字体： 如果已知则使用品牌字体；否则使用 Inter 或 Geist。标题行使用小号常规字重（通过相机而非字体大小来放大）。大字间距的文字使用紧凑的字距。
• 默认调色板： 画布 #F7F7F8，文字 #111114，次要文字 #8A8A94，UI 表面为白色带 #E7E7EC 边框，品牌强调色 #2E6BFF，高亮框 = 强调色 15–20% 不透明度。品牌渐变：白色 → 浅强调色 → 强调色，以缓慢的对角线丝带状绘制（在 canvas 上绘制，而非使用 CSS blur）。品牌颜色将替换强调色。
• 节奏： 每个标题行在显示后停留约 2 秒；UI 时刻以真实速度运行（打字约每秒 25 个字符），每个结果后暂停 0.5 秒以便观众阅读。
• 禁止项： UI 后使用繁忙背景、使用超过一种强调色、弹跳缓动、表情符号、大号投影、到处使用玻璃拟态、编造的指标或推荐语。

音效

一首令人振奋、柔和的背景音乐，速度为 100–110 BPM（柔和的钢琴或拨弦和弦，开场后加入轻打击乐，结尾时提升），安静而温暖。小型的音效：打字时的按键声、轻柔的点击声、每个完成步骤的轻“滴答”声、大型相机运动时的柔和嗖嗖声、结束卡片上的柔和铃声。音乐应像优秀产品视频中的背景音乐一样，而非主导。

页面的构建方式

一个自包含的 HTML 文件（内联 CSS 和 JS；仅当用户提供时才包含图片）。使用 DOM + CSS 变换、SVG 或一个全屏画布（canvas）进行绘制，选择合适的方式即可。

页面契约

• window.VIDEO = {w, h, duration} 和 window.seek(t)，这是一个纯时间函数：它为时间 t（秒）设置每个元素。没有 CSS 过渡或动画、没有 setTimeout、没有从前一帧继承的状态。任何帧都必须能够独立、按任意顺序正确渲染。在 seek 内测量布局（例如 offsetLeft、measureText）是可以的；这是确定性的。
• 随机性（颗粒、粒子、音频中的噪声）来自种子生成器，绝不使用 Math.random。
• 任何需要历史记录的内容（例如，滞后于移动物体的相机、模拟）都在加载时一次烘焙完成：以 1/240 秒的步长从 0 迭代到 duration，存储这些值，然后让 seek 通过插值读取它们。对于循环，从循环开始的初始状态启动模拟（请参阅样式的接缝规则）。
• 循环： seek(t) 使用 t % duration；跨越接缝的效果（例如，着陆压缩、声音尾部）在两端绘制或混合。
• 带有 ?render 参数时：不显示控件、无预览缩放；舞台精确为 w × h 并位于左上角。无此参数时：舞台通过 CSS 缩放以适应窗口，并显示预览控件。
• 字体：嵌入它们。 下载 woff2 文件（Google Fonts 或品牌的字体）并将其内联为 base64 格式的 @font-face，以确保渲染永不静默地回退。对于字重渐变，使用可变字体并指定范围（[email protected]）。
• 图层： 为场景层提供透明背景，并在其后设置一个舞台背景提供基础颜色，这样后面的层就不会意外地遮盖前面的层。绝对定位的文本设置 white-space: nowrap。
• 速度： 大型 CSS filter: blur() 和大的模糊渐变在截图时非常慢。在加载时将渐变和发光绘制到 canvas 上（或作为图片）并移动它们。

辅助函数：粘贴这些并基于它们构建所有内容

// 阻尼弹簧阶跃响应 0 -> 1。w = 速度（8 慢，14 正常，22 快），z = 阻尼（1 = 无过冲）
function spring(t, w = 14, z = 0.82) {
  if (t <= 0) return 0;
  if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
  const wd = w * Math.sqrt(1 - z * z);
  return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// 一个值多次改变目标，每次都以弹簧方式到达：track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// 精确缓动的关键帧（最适合相机运动）：kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);   // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a));      // t 在 [a, b] 区间的 0..1 进度
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);

• 打字效果：可见字符串为 full.slice(0, n(t))，并带有从 t 开始闪烁的光标。数字递增：格式化 lerp(a, b, ease(seg(t, …)))。
• 相机是一个包装元素，其 transform: translate() scale() rotate() 由 kf 或 track 驱动。

音效

• window.buildAudio(ctx) 从时间 0 开始在给定的 AudioContext 或 OfflineAudioContext 上调度整个配乐（音乐 + 音效），使用与视觉元素相同的时间线数字。使用振荡器、滤波噪声（来自种子缓冲区）和包络进行合成。如果用户提供了音乐文件，则使用 fetch + decodeAudioData 加载它，将其节拍网格设置为其速度（测量它），然后仅在其上添加音效。
• 预览播放： 首次播放时，将配乐一次性渲染到缓冲区，然后从任何拖动的位置开始播放。时钟驱动 seek：

let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
  ac ??= new AudioContext();
  if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
  src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
  src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })();   // 滑块设置偏移量（暂停、设置、播放）

• 将节拍表作为注释放在脚本顶部：每行一个时刻，包含其时间、内容和使用的音效。

步骤 3：检查、渲染、交付

在工作文件夹中设置一次

…

[为翻译截断]