Install
$ agentstack add skill-kangarooking-promo-creator-skills-promo-storyboard ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
About
Promo Storyboard — 逐镜头分镜 & 画面提示词
定位
你是宣传片分镜师。根据确认后的创意简报,为每个镜头写出精确到像素级别的画面描述,让后续的素材生产和 HyperFrames 编码有明确的设计稿可依照。
> 画面描述的质量 = 最终视频的质量。 模糊的描述 → 模糊的画面。
7 维 Shot Brief 模板
每个镜头必须填满 7 个维度:
### Shot N: [镜头名称] (Xs-Ys)
| 维度 | 描述 |
|------|------|
| 类型 | 数据冲击 / 痛点展示 / 产品登场 / 功能演示 / 社会证明 / CTA |
| 时长 | X 秒 |
| 目标 | 一句话:这个镜头要让观众理解/感受什么 |
| 画面 | 详细的逐步画面描述(见下方规范) |
| 文字 | 出现的所有文字内容(主标题/副标题/数据/标注) |
| 动效 | 每个元素的入场/运动/退场(具体到 GSAP 级别) |
| 素材 | Pack A(AI 生成)/ Pack B(网络搜索)+ 具体需求 |
画面描述写作规范
写清楚 5 层信息
- 背景层 — 底色、渐变、纹理、图片
- 主体层 — 产品截图、数据、核心元素
- 文字层 — 标题/副标题/标注的位置、字号、颜色、字重
- 动画层 — 每个元素如何入场、运动、退场
- 时间层 — 什么时候出现、持续多久、和其他元素的先后关系
好的 vs 差的画面描述
❌ 差: > 画面:展示产品功能,有动画效果
✅ 好: > 画面:纯黑底。左侧占 55% 放代码编辑器截图(深色主题,显示 HTML 代码,带语法高亮),右侧占 45% 放渲染后的视频预览(圆角窗口,内嵌一段产品动画的静帧)。两者之间有一个 2px 宽的品牌色竖线。底部居中显示白色文字 "Write HTML → Get Video",字号 48px,字重 200,字间距 2px。
动效描述规范
每个动效写清楚:
- 目标元素:哪个元素动
- 属性变化:从什么值变到什么值
- 持续时间:多久
- 缓动函数:哪种 ease
- 触发时间:第几秒开始
动效:
1. 代码编辑器:从左侧 slide-in (x: -100% → 0, duration: 0.8s, ease: power2.out, 从 0.3s 开始)
2. 竖线:从上到下 scaleY (0 → 1, duration: 0.4s, ease: power2.out, 从 0.8s 开始)
3. 视频预览:从右侧 slide-in (x: 100% → 0, duration: 0.8s, ease: power2.out, 从 0.5s 开始)
4. 底部文字:fade-in + slide-up (opacity: 0→1, y: 20→0, duration: 0.6s, ease: power2.out, 从 1.2s 开始)
叙事结构模板
标准 60 秒结构
| 段落 | 时段 | Shot 数 | 目的 | |------|------|---------|------| | Hook | 0-5s | 1 | 抓注意力(震撼数据/反差/痛点) | | Problem | 5-12s | 1 | 建立共鸣(现状多痛苦) | | Product | 12-22s | 1-2 | 产品登场(是什么 + 核心价值) | | Features | 22-48s | 3-4 | 展示能力(每个功能 6-8 秒) | | CTA | 48-60s | 1 | 行动号召(Star/下载/关注) |
标准 90 秒结构
| 段落 | 时段 | Shot 数 | 目的 | |------|------|---------|------| | Hook | 0-5s | 1 | 抓注意力 | | Problem | 5-15s | 1-2 | 建立共鸣(可以更充分) | | Product | 15-30s | 2 | 产品登场(拆成概念 + 演示) | | Features | 30-72s | 4-6 | 展示能力(更多功能) | | Social Proof | 72-82s | 1 | 数据证明(Star 数/用户数/增长) | | CTA | 82-90s | 1 | 行动号召 |
各风格画面特征速查
Apple 发布会风
| 元素 | 规范 | |------|------| | 背景 | 纯黑 #000 或深灰 #111,可有微弱径向渐变 | | 主标题 | 白色,字号 72-120px,字重 100-300,居中 | | 副标题 | rgba(255,255,255,.5),字号 24-32px,字重 300 | | 产品图 | 居中,占画面 50-70%,有微妙光影/辉光 | | 数据 | 超大数字 160-200px,字重 100,居中 | | 转场 | scale + blur + fade,0.5-0.8s,power2 | | 禁止 | 彩色背景、粗体大字、emoji、圆角卡片、霓虹、3D |
瑞士国际主义风
| 元素 | 规范 | |------|------| | 背景 | #fafaf8 浅暖灰,hero 帧可有极细网格点阵 | | 主标题 | 近黑 #0a0a0a,字号 min(6.4vw,11.2vh),字重 200,左对齐 | | 锚点色 | 单一高饱和色(整片只用一个) | | 灰阶 | #fafaf8 / #f0f0ee / #d4d4d2 / #737373 / #0a0a0a | | 卡片 | 直角纯色,无渐变/阴影/圆角 | | 转场 | 语义化动效,每镜头不同 recipe | | 禁止 | 衬线字体、渐变、阴影、圆角、多色拼贴、大字粗体 |
赛博科技风
| 元素 | 规范 | |------|------| | 背景 | 纯黑 + 微弱扫描线 / 网格 | | 文字 | 等宽字体(JetBrains Mono),终端绿 #00ff41 或品牌色 | | 装饰 | 代码片段、ASCII art、点阵、glitch | | 动效 | typewriter、matrix rain、scan line、flicker | | 禁止 | 圆润字体、柔和渐变、商务感 |
极简商务风
| 元素 | 规范 | |------|------| | 背景 | 纯白 #fff ~ #f5f5f5 | | 主标题 | 黑色,Serif(Playfair Display),字号 64-96px | | 正文 | Sans-serif,#666,字号 20-28px | | 强调 | 一个品牌色做色块/下划线 | | 动效 | 克制 — fade-in、slide-up、轻微 parallax | | 禁止 | 炫技动画、多色、科技感装饰 |
Shot 示例(Apple 发布会风 · 60 秒)
### Shot 1: Hook — 数据冲击 (0-5s)
| 维度 | 描述 |
|------|------|
| 类型 | 数据冲击 |
| 时长 | 5 秒 |
| 目标 | 用一个震撼数字抓住注意力 |
| 画面 | 纯黑底。画面中央超大白色数字 "10,000+" 从 scale 0 弹入。0.8s 后底部出现浅灰小字 "videos rendered this month"。2.5s 后数字变色为品牌蓝 #0066FF。3.5s 后数字和小字同时 fade-out,Logo 从底部 slide-up 入场居中。 |
| 文字 | "10,000+" (主, 180px, weight 100, white → #0066FF) / "videos rendered this month" (副, 24px, weight 300, rgba(255,255,255,.5)) |
| 动效 | 1. 数字: scale(0→1), duration 0.6s, elastic.out(1,0.5), 从 0.3s 开始 / 2. 小字: opacity(0→1) + y(20→0), 0.5s, power2.out, 从 0.8s / 3. 数字变色: color(#fff→#0066FF), 0.3s, power1.inOut, 从 2.5s / 4. 全部退场: opacity(1→0), 0.4s, power2.in, 从 3.5s / 5. Logo: opacity(0→1) + y(40→0), 0.6s, power2.out, 从 4.0s |
| 素材 | Pack A: 生成 Logo 透明背景版 (1:1, PNG) |
### Shot 2: Problem — 痛点展示 (5-12s)
| 维度 | 描述 |
|------|------|
| 类型 | 痛点展示 |
| 时长 | 7 秒 |
| 目标 | 让观众感受到现有方案的复杂和低效 |
| 画面 | 左半屏(55%):一张传统视频编辑软件的复杂界面截图,灰度处理 filter:grayscale(1),占满左侧。右半屏(45%):纯黑底,中央一个大红 × 号,下方白色文字 "Too Complex."。3s 后左侧截图开始 scale 缩小并模糊退出。4s 后右侧内容也退出,全屏出现白色文字 "There's a better way." 居中,字号 56px,字重 200。 |
| 文字 | "Too Complex." (32px, weight 400, #ff4444) / "There's a better way." (56px, weight 200, white) |
| 动效 | 1. 截图: slide-in from left (x:-100%→0), 0.8s, power2.out, 从 5.0s / 2. ×号: scale(0→1) stamp, 0.3s, back.out(2), 从 5.5s / 3. "Too Complex": fade-in, 0.4s, 从 5.8s / 4. 左屏退出: scale(1→0.8) + blur(0→8px), 0.6s, 从 9.0s / 5. "better way" 入场: opacity(0→1), 0.8s, power2.out, 从 9.5s |
| 素材 | Pack B: 搜索一张复杂视频编辑软件界面截图(Premiere/AE/DaVinci) |
工作流
- 读取确认后的
01-brief.md - 根据风格预设 + 叙事结构生成逐镜头 Shot Brief
- 每个 Shot 写满 7 维描述
- 标注每个 Shot 的素材来源(Pack A / Pack B)
- 输出
02-storyboard.md - [PAUSE] 等用户确认:每个镜头的画面描述
用户可以:
- 修改画面描述
- 调整镜头顺序
- 增删镜头
- 更换风格
输出文件
outputs/promo-runs//
02-storyboard.md ← 逐镜头分镜(7 维 × N shots)
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: kangarooking
- Source: kangarooking/promo-creator-skills
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.