FreePublished on GitHub

promo-editor

使用 HyperFrames 将所有素材按分镜时间码串联，添加文字层、动画、转场，渲染成完整宣传片 MP4。这是整个流程的核心渲染引擎。当素材确认后自动进入。

The English summary is being prepared. Showing the original description.

kangarooking/promo-creator-skills

See how to install

Files included (1)

SKILL.md10.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Promo Editor — HyperFrames 视频合成

定位

你是宣传片剪辑师和动效师。把所有素材 + 文字 + 动画写入一个 HyperFrames master HTML，渲染成完整的 1-2 分钟宣传片 MP4。

HyperFrames 核心规范

基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;600&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #000; overflow: hidden; font-family: 'Inter', sans-serif; }
    .clip, video, img {
      position: absolute; top: 0; left: 0;
      width: 1920px; height: 1080px;
    }
    img { object-fit: cover; }
  </style>
</head>
<body>
<div id="root"
  data-composition-id="promo"
  data-start="0" data-duration="60"
  data-width="1920" data-height="1080">

  <!-- Shots go here -->

</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
  window.__timelines = window.__timelines || {};
  const tl = gsap.timeline({ paused: true });

  // Animations go here

  window.__timelines["promo"] = tl;
</script>
</body>
</html>

关键规则

每个可见元素必须有唯一 id + class="clip" + data-start + data-duration + data-track-index
track-index：0 = 主画面层，1 = 文字层，2 = 装饰层，5 = 转场层
动画用 GSAP timeline，必须 paused: true
分辨率：1920×1080，不能变
不能用 repeat: -1（改为有限次数）
字体用 Google Fonts（Inter / Playfair Display / JetBrains Mono / Noto Sans SC）

编辑决策表（EDL）

写 HTML 之前先输出时间线：

## 编辑决策表

| 序号 | Shot | 入点 | 出点 | 时长 | 转场 | 主要动效 |
|------|------|------|------|------|------|---------|
| 1 | Hook: 数据冲击 | 0:00 | 0:05 | 5s | — | 数字 elastic 弹入 |
| T1 | 转场 | 0:04.5 | 0:05.5 | 1s | Black Dip | — |
| 2 | Problem: 痛点 | 0:05 | 0:12 | 7s | — | 截图 slide-in + 金句 fade |
| T2 | 转场 | 0:11.5 | 0:12.5 | 1s | Scale Blur | — |
| 3 | Product: 登场 | 0:12 | 0:22 | 10s | — | 代码 typewriter + reveal |
| ... | | | | | | |

[PAUSE] 输出 EDL → 等用户确认

Shot 编写模式

模式 1: 纯文字 Shot（Hook / CTA）

<div id="shot1" class="clip" data-start="0" data-duration="5" data-track-index="0"
     style="position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column">
  <div id="s1-number" style="font-size:180px;font-weight:100;color:#fff;letter-spacing:-4px">
    10,000+
  </div>
  <div id="s1-sub" style="font-size:24px;font-weight:300;color:rgba(255,255,255,.5);margin-top:24px;letter-spacing:2px">
    videos rendered this month
  </div>
</div>

模式 2: 图片 + 文字 Shot（Product / Feature）

<!-- 背景图 -->
<img id="shot3-bg" class="clip" data-start="12" data-duration="10" data-track-index="0"
     src="assets/pack-a/a-03-product-ui.png"
     style="object-fit:contain;background:#000"/>

<!-- 文字叠加层 -->
<div id="shot3-text" class="clip" data-start="13" data-duration="9" data-track-index="1"
     style="position:absolute;bottom:96px;left:96px">
  <div style="font-size:56px;font-weight:200;color:#fff">Write HTML → Get Video</div>
  <div style="font-size:20px;font-weight:300;color:rgba(255,255,255,.5);margin-top:12px">
    No timeline. No plugins. Just code.
  </div>
</div>

模式 3: 分屏对比 Shot（Before / After）

<!-- 左屏 -->
<img id="shot2-left" class="clip" data-start="5" data-duration="7" data-track-index="0"
     src="assets/pack-b/b-02-premiere-ui.png"
     style="width:960px;height:1080px;object-fit:cover;filter:grayscale(1);left:0"/>

<!-- 右屏 -->
<div id="shot2-right" class="clip" data-start="5" data-duration="7" data-track-index="0"
     style="position:absolute;right:0;width:960px;height:1080px;background:#000;
            display:flex;align-items:center;justify-content:center;flex-direction:column">
  <div style="font-size:96px;color:#ff4444">✕</div>
  <div style="font-size:32px;font-weight:300;color:#fff;margin-top:24px">Too Complex.</div>
</div>

动画 Cookbook

文字动效

// 大数字弹入（Hook）
tl.from("#s1-number", { scale: 0, duration: .6, ease: "elastic.out(1,0.5)" }, 0.3);

// 副标题浮入
tl.from("#s1-sub", { opacity: 0, y: 20, duration: .5, ease: "power2.out" }, 0.8);

// 金句渐显（"There's a better way."）
tl.from("#quote", { opacity: 0, duration: .8, ease: "power2.out" }, 9.5);

// Typewriter 打字效果（需要逐字 span 包裹）
tl.from(".char", { opacity: 0, duration: .02, stagger: .04, ease: "none" }, 13);

// 文字颜色变化
tl.to("#s1-number", { color: "#0066FF", duration: .3, ease: "power1.inOut" }, 2.5);

图片动效

// Ken Burns 慢推
tl.from("#hero-img", { scale: 1.08, duration: 10, ease: "none" }, 12);

// 从左侧 slide-in
tl.from("#left-img", { x: "-100%", duration: .8, ease: "power2.out" }, 5);

// Clip-path 揭开
tl.from("#product", { clipPath: "inset(0 100% 0 0)", duration: 1.2, ease: "power2.inOut" }, 12);

// 中心展开
tl.from("#feature", { clipPath: "circle(0% at 50% 50%)", duration: .8, ease: "power2.out" }, 22);

// 灰度 → 彩色
tl.to("#screenshot", { filter: "grayscale(0)", duration: .5, ease: "power1.inOut" }, 15);

退场动效

// 淡出
tl.to("#shot1", { opacity: 0, duration: .4, ease: "power2.in" }, 4.5);

// 缩放 + 模糊退出
tl.to("#shot2", { scale: 1.1, filter: "blur(8px)", opacity: 0, duration: .6, ease: "power2.in" }, 11);

// 下移退出
tl.to("#text", { y: -30, opacity: 0, duration: .4, ease: "power2.in" }, 8);

转场

// 1. Black Dip（章节切换）
tl.fromTo("#t-black", { opacity: 0 }, { opacity: 1, duration: .3, ease: "power2.in" }, cutPoint - 0.3);
tl.to("#t-black", { opacity: 0, duration: .3, ease: "power2.out" }, cutPoint + 0.2);

// 2. Crossfade（通用）
tl.to("#shotA", { opacity: 0, duration: .5, ease: "power1.inOut" }, cutPoint);
tl.from("#shotB", { opacity: 0, duration: .5, ease: "power1.inOut" }, cutPoint);

// 3. Scale Blur（电影感）
tl.to("#shotA", { scale: 1.1, filter: "blur(8px)", opacity: 0, duration: .6, ease: "power2.in" }, cutPoint);
tl.from("#shotB", { scale: 1.05, filter: "blur(4px)", opacity: 0, duration: .6, ease: "power2.out" }, cutPoint + 0.3);

// 4. Wipe（对比）
tl.from("#shotB", { clipPath: "inset(0 100% 0 0)", duration: .8, ease: "power2.inOut" }, cutPoint);

// 5. Center Expand（重点强调）
tl.from("#shotB", { clipPath: "circle(0% at 50% 50%)", duration: .8, ease: "power2.out" }, cutPoint);

转场选择策略

上下文	推荐
Hook → Problem	Black Dip
Problem → Product	Scale Blur（最有电影感）
Feature → Feature	Crossfade
最后 → CTA	Black Dip
Before → After	Wipe
连续 3 个以上	交替使用，不重复

各风格的 HTML/CSS 基础

Apple 发布会风

body { background: #000; }
.title { color: #fff; font-weight: 100; letter-spacing: -2px; }
.subtitle { color: rgba(255,255,255,.5); font-weight: 300; letter-spacing: 2px; }
.accent { color: #0066FF; } /* 或品牌色 */

瑞士国际主义风

body { background: #fafaf8; }
.title { color: #0a0a0a; font-weight: 200; }
.accent { color: #002FA7; } /* 单一锚点色 */
.card { background: #f0f0ee; border: none; border-radius: 0; }
.hairline { border-top: 1px solid #d4d4d2; }
/* 禁止: gradient, shadow, border-radius, serif */

赛博科技风

body { background: #000; }
.title { color: #00ff41; font-family: 'JetBrains Mono', monospace; }
.scanline { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,65,.03) 2px, rgba(0,255,65,.03) 4px); }

极简商务风

body { background: #fff; }
.title { color: #111; font-family: 'Playfair Display', serif; font-weight: 700; }
.body-text { color: #666; font-family: 'Inter', sans-serif; }
.accent-bar { background: var(--brand-color); height: 4px; }

静态图片动态化

网络搜索的截图（Pack B）不是视频，必须添加动画：

// Ken Burns（默认）
tl.from("#static", { scale: 1.08, duration: 5, ease: "none" }, start);

// 平移视差
tl.from("#static", { x: 30, duration: 5, ease: "none" }, start);

// 渐入 + 微缩放
tl.from("#static", { opacity: 0, scale: .95, duration: .6, ease: "power2.out" }, start);

规则：静态图片展示 3-8 秒，必须有至少一个微动画。

渲染

# 快速预览
npx hyperframes render --quality draft --output promo-draft.mp4

# 最终高质量
npx hyperframes render --quality high --gpu --output final/promo.mp4

# ProRes（导入专业软件）
npx hyperframes render --format mov --output final/promo.mov

质量检查

渲染前逐项确认：

P0（致命）

P1（重要）

无连续 2 个相同转场
静态图片都有微动画
每个 Shot 动效与 storyboard 一致
风格统一（无混搭）

P2（优化）

动画节奏感好（不过快不过慢）
缓动函数自然（无 linear）
留白充足

工作流

读取 02-storyboard.md + 03-asset-plan.md
检查 assets/pack-a/ 和 assets/pack-b/ 素材完整性
生成编辑决策表 04-edl.md
[PAUSE] 等用户确认时间线
写 master-edit.html（HyperFrames 主合成文件）
逐 Shot 编写 HTML + GSAP 动画
npx hyperframes preview 预览
npx hyperframes render 渲染
[PAUSE] 用户预览确认成片

输出文件

outputs/promo-runs/<product>/
  04-edl.md                   ← 编辑决策表
  master-edit.html            ← HyperFrames 主合成文件
  final/
    promo.mp4                 ← 完整成片
    promo.mov                 ← ProRes（可选）

环境依赖

node --version    # ≥ 22
which ffmpeg      # brew install ffmpeg
npx hyperframes doctor

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

promo-asset-producer

Free

宣传片两包素材生产。Pack A 使用当前可用图片生成能力生成产品图、概念图、UI 模拟图或风格补充图；Pack B 使用官网、应用截图、浏览器搜索、GitHub 或开源素材收集真实产品信号。当 storyboard 确认后进入。

The English summary is being prepared. Showing the original description.

kangarooking/promo-creator-skills110Updated May 13, 2026

promo-brief

Free

产品宣传片创意简报。输入产品说明或 GitHub 链接，自动抓取产品信息，提炼核心卖点，推荐视觉风格和叙事结构。当用户提到"宣传片""promo""产品视频""做个视频介绍""项目宣传"时触发。

The English summary is being prepared. Showing the original description.

kangarooking/promo-creator-skills110Updated May 13, 2026

promo-creator-skills

Free

产品宣传片制作总控 skill pack。用于从产品说明、官网、应用截图或 GitHub 仓库制作 60-90 秒宣传视频，按阶段完成 brief、storyboard、素材、HyperFrames 剪辑、BGM 设计和交付。当用户要做宣传片、产品视频、项目介绍视频、launch video、开源项目 promo、BGM 卡点或真实软件界面宣传片时使用。

The English summary is being prepared. Showing the original description.

kangarooking/promo-creator-skills110Updated May 13, 2026

promo-music-maker

Free

为产品宣传片生成高度贴合画面节奏的 BGM 方案与音乐生成 Prompt。读取 brief、storyboard、EDL、DESIGN 或成片，输出音乐风格、BPM、情绪曲线、卡点表、Mureka/Skywork Music Maker 英文 prompt、负面 prompt 和剪辑建议。当用户要“配乐”“BGM”“背景音乐”“音乐 prompt”“卡点”“按转场做音乐”时触发。

The English summary is being prepared. Showing the original description.

kangarooking/promo-creator-skills110Updated May 13, 2026

promo-storyboard

Free

宣传片逐镜头分镜脚本。根据创意简报生成每个 Shot 的 7 维画面描述和详细 HyperFrames 提示词，是整条视频质量的关键。当用户确认 brief 后自动进入。

The English summary is being prepared. Showing the original description.

kangarooking/promo-creator-skills110Updated May 13, 2026

promo-workflow

Free

产品宣传片制作总控流程。串联 6 个 Skills，按阶段执行并暂停确认。从产品 URL 到带 BGM 成片 MP4 的全自动流水线。当用户提到"做个宣传片""promo""产品视频""项目介绍视频"时触发。

The English summary is being prepared. Showing the original description.

kangarooking/promo-creator-skills110Updated May 13, 2026

See all skills by kangarooking

Report a problem with this skill

Install

Install with a command

npx skills add https://github.com/kangarooking/promo-creator-skills --skill promo-editor

Paste it into your terminal and run it (requires Node.js). You can choose which agents to install it for, such as Claude Code or Codex.

Ask your agent

Please install the following Agent Skill.
https://github.com/kangarooking/promo-creator-skills/tree/main/promo-editor

First review SKILL.md and the bundled files and confirm there is nothing suspicious (such as sending data externally or reading credentials). Then place it in ~/.claude/skills/promo-editor/ for Claude Code, or ~/.agents/skills/promo-editor/ for Codex.

Send this text to Claude Code or Codex as is. It checks the contents before installing.

View source on GitHub

Repository: kangarooking/promo-creator-skills
Stars: 110
Forks: 15
Category: Other
License: MIT
Original language: Chinese
Last updated: May 13, 2026

A skill is a set of instructions and scripts for an agent. cccskills does not guarantee that skills are safe. Review the contents before you install.