关于 remotion-resemble-ai
remotion-resemble-ai 是用于规划和制作 Remotion 动画视频的技能,面向教程、产品演示和社交推广等创作。它涵盖从调研、脚本、分镜到 Resemble.ai 配音及动画制作的流程。
主要功能
- 01视频制作分步流程
- 02受众与格式规划
- 03脚本和场景设计
- 04Resemble.ai 配音
- 05音频同步动画
- 06多种视频类型指导
适用场景
- 01制作教育解说视频
- 02演示 SaaS 产品操作
- 03制作产品发布短片
- 04制作社交媒体推广视频
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ resemble-ai/ remotion-resemble-skill --skill remotion-resemble-ai安装后在 Claude Code 中输入/remotion-resemble-ai确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
rules/resemble-captions.mdresemble-remotion-integration.mdresemble-setup.mdresemble-streaming-tts.mdresemble-sync-tts.mdresemble-voices.mdvisual-animations.md详细介绍
适用场景
在用户想要创建以下内容时使用此技能:
-
教育教程视频 - 研究某个主题并制作动画讲解视频
- 示例:“为三年级学生制作一个关于蝴蝶生命周期的教程”
-
SaaS 演示视频 - 通过动画 UI 展示软件功能
- 示例:“制作一个演示视频,展示如何使用 Notion 的数据库功能”
-
产品发布公告 - 使用动态图形制作营销视频
- 示例:“制作一段发布视频,宣布我们的全新 AI 驱动搜索功能”
-
教程 / 操作演示视频 - 使用光标动画制作分步指南
- 示例:“制作一个教程,展示如何在我们的应用中创建项目”
-
社交媒体宣传视频 - 用于广告的简短、有冲击力的动态文字视频
- 示例:“为我们的健身应用制作一则 15 秒的 Instagram 广告”
-
应用 / 产品展示视频 - 将动态文字与悬浮 UI 模型相结合
- 示例:“制作一段宣传视频,展示我们的加密货币交易平台界面”
-
落地页揭晓视频 - 采用设计工具美学并配以网页动画
- 示例:“制作一段视频,展示我们全新的 SaaS 落地页设计”
视频制作工作流
所有类型的视频都遵循此流程:
1. UNDERSTAND → 2. RESEARCH → 3. SCRIPT → 4. SCENES → 5. AUDIO → 6. ANIMATE
第 1 步:了解需求
明确以下内容:
- 视频类型: 教育教程、SaaS 演示、产品发布、教程 / 操作演示、社交媒体宣传、应用展示、落地页揭晓,还是 AI 讲解视频?
- 目标受众: 年龄、专业水平、背景
- 基调: 教育性、专业、活力十足、轻松、戏剧化、简约
- 时长: 超短(5-15 秒)、短(30-60 秒)、中等(1-3 分钟)或长(3-5 分钟)
- 格式: 宽屏 16:9(1920x1080)、正方形 1:1(1080x1080)或竖屏 9:16(1080x1920)
- 视觉风格: 暗色戏剧化、柔和渐变、简洁极简或设计工具美学
第 2 步:研究(适用于教程和演示视频)
对于教育内容:
- 搜索准确且最新的信息
- 使用可靠来源(官方文档、教育网站)
- 收集需要讲解的关键事实、统计数据或步骤
对于 SaaS 演示视频:
- 探索产品,了解其功能
- 截取屏幕截图或记录 UI 模式
- 确定要演示的关键工作流
第 3 步:撰写脚本
在生成音频之前,先写出完整的配音稿。脚本结构会因视频类型而异(见下文)。
第 4 步:规划场景
将脚本拆分为视觉片段:
- 每个场景对应一个关键概念或步骤
- 记录每行内容对应的画面
- 规划场景之间的过渡
第 5 步:生成音频
使用 Resemble.ai 生成配音(见下方设置说明)。
第 6 步:制作动画
构建 Remotion 合成,并制作与音频同步的动画。
视频类型:教育教程
目标: 针对特定受众水平,清晰地解释一个概念。
脚本结构
HOOK (5-10s)
"Have you ever wondered how a caterpillar becomes a butterfly?"
INTRODUCTION (10-15s)
Set context and preview what they'll learn.
BODY (main content, broken into 3-5 key points)
- Point 1: Explain with visual metaphor
- Point 2: Build on previous point
- Point 3: Add detail or example
- ...
RECAP (10-15s)
Summarize the key takeaways.
OUTRO (5s)
Call to action or closing thought.
适配受众
| 受众 | 语言风格 | 视觉内容 |
|---|---|---|
| 幼儿园至二年级 | 非常简单、轻松,每句 5 个词 | 鲜艳的色彩、可爱的角色、大型图形 |
| 三至五年级 | 简单但信息丰富,使用类比 | 清晰的图表、分步讲解、适中的节奏 |
| 六至八年级 | 使用更多词汇,讲解因果关系 | 图表、带标签的示意图、更快的节奏 |
| 高中及以上 | 可使用专业术语,兼顾细节 | 数据可视化、详细的图形 |
| 成人 | 专业、简洁 | 简洁设计、信息图表 |
教程动画模式
- 逐步呈现: 随着旁白提及内容,淡入相应元素
- 变形: 通过形状变换展示变化(毛毛虫 → 蝴蝶)
- 示意图: 为标签添加动画,并用箭头指向各部分
- 时间线: 进度条、步骤指示器
- 对比: 并排展示并突出重点
场景规划示例
Script: "First, the butterfly lays tiny eggs on a leaf."
Scene 1:
- Visual: Leaf appears (slide in from bottom, spring animation)
- Visual: Small eggs fade in on leaf
- Timing: Sync "eggs" word with eggs appearing
- Duration: 4 seconds
视频类型:SaaS 操作演示
目标: 向用户展示如何在软件中完成一项任务。
脚本结构
HOOK (5-10s)
"Let me show you how to [accomplish goal] in [Product]."
CONTEXT (10s)
Why this feature matters, what problem it solves.
WALKTHROUGH (main content)
- Step 1: Navigate to X
- Step 2: Click on Y
- Step 3: Configure Z
- ...
RESULT (10s)
Show the outcome, the finished state.
OUTRO (5-10s)
Recap benefit, suggest next steps.
视觉元素
- UI 模型图: 界面的风格化呈现
- 光标动画: 动画指针移动到点击目标
- 高亮: 为正在讨论的按钮/字段添加发光边框
- 缩放效果: 聚焦于 UI 的特定区域
- 标注: 指向 UI 元素的文本标签
演示动画模式
- 光标移动: 平滑的贝塞尔曲线,点击前稍作停顿
- 点击效果: 点击时出现涟漪或脉冲效果
- 字段聚焦: 高亮边框,略微放大
- 打字动画: 字符逐个显示在输入字段中
- 转场: 在屏幕之间滑动或淡入淡出
- 标注箭头: 动画显示,指向元素,然后淡出
场景规划示例
Script: "Click the blue 'New Database' button in the sidebar."
Scene:
- Visual: UI mockup of sidebar
- Animation: Cursor moves to button (0.8s ease-out)
- Animation: Button highlights with glow
- Animation: Click ripple effect
- Animation: New panel slides in from right
- Duration: 3 seconds
视频类型:产品发布公告
目标: 为新产品或功能营造期待感。
脚本结构
HOOK (5-10s)
Bold statement or question that grabs attention.
PROBLEM (10-15s)
What pain point does this solve?
SOLUTION REVEAL (10-15s)
Introduce the product/feature dramatically.
KEY FEATURES (20-40s)
3-5 punchy feature highlights with visuals.
SOCIAL PROOF (optional, 10s)
Stats, testimonials, or credibility markers.
CALL TO ACTION (5-10s)
What should viewers do next?
视觉风格
- 醒目的排版: 大号文字、动态文字动画
- 品牌色彩: 始终使用产品的配色方案
- 图标和图形: 抽象形状、功能图标
- 高能量: 更快的剪辑、动态运动
- Logo 揭晓: 结尾处以动画展示 Logo
发布视频动画模式
- 文字猛击: 文字带冲击感地砸入画面
- 动态排版: 移动、缩放、旋转的文字
- 数字递增动画: 数字逐步递增(用户数、收入等)
- 图标序列: 功能图标以弹跳/弹簧效果依次出现
- 渐变背景: 缓慢变化的颜色渐变
- 粒子效果: 微妙的闪光、漂浮形状
- Logo 揭晓: 放大、淡入或由多个部分组合而成
场景规划示例
Script: "Introducing Smart Search — find anything in milliseconds."
Scene:
- Visual: Dark background with gradient
- Animation: "Introducing" fades in (0.5s)
- Animation: "Smart Search" slams in large, bold (0.3s, with shake)
- Animation: Tagline types out below (typewriter, 1.5s)
- Animation: Search icon pulses
- Duration: 4 seconds
视频类型:教程/操作演示
目标: 通过清晰的逐步视觉引导,教用户完成一项任务。
脚本结构
INTRO (3-5s)
"Here's how to [accomplish goal] in [Product]."
STEP 1 (10-20s)
First action with clear visual demonstration.
STEP 2 (10-20s)
Second action, building on previous step.
STEP 3+ (10-20s each)
Continue through workflow...
SUCCESS STATE (5-10s)
Show completion, celebrate the outcome.
RECAP (optional, 5s)
Quick summary of what was accomplished.
视觉风格
- 明亮、简洁的背景: 米白色(#fafafa)、奶油色或浅灰色
- 完整的 UI 上下文: 展示完整界面,而不仅是局部片段
- 进度指示器: 步骤导航、编号阶段(1 → 2 → 3)
- 用光标引导: 光标平滑移动,引导观众视线
- 成功庆祝效果: 绿色对勾、彩纸,或品牌风格的成功界面
- 减少干扰: 聚焦于任务,避免装饰性元素
教程动画模式
- 光标编排: 平滑的贝塞尔路径,点击前稍作停顿
- 点击反馈: 点击时出现微妙的涟漪或高亮效果
- 表单字段聚焦: 字段激活时边框发光
- 打字模拟: 文本逐字显示在输入框中
- 步骤转场: 在屏幕之间轻柔地交叉淡化或滑动
- 进度更新: 面包屑导航/步骤指示器向前推进
- 成功爆发效果: 对勾以弹跳效果放大显示,可选配彩纸效果
- 面板显示: 侧边栏或下拉菜单平滑滑入
视觉元素
- 面包屑导航: “← 1. 意图 → 2. 种子构想 → 3. 草图板”
- 表单输入框: 占位文字、标签、验证状态
- 按钮: 展示清晰的 CTA 按钮及悬停/激活状态
- 侧边栏/面板: AI 建议、设置或工具面板
- 成功界面: 全彩背景搭配图标和消息
场景规划示例
Script: "First, enter what your lesson is about."
Scene 1 - Setup (2s):
- Visual: Full app interface, light background
- Visual: Breadcrumb shows "2. Seed Idea" active
- Animation: Screen fades in
Scene 2 - Interaction (4s):
- Visual: Form with "Enter a concept or theme:" label
- Animation: Cursor moves to input field (0.6s ease-out)
- Animation: Field border highlights blue
- Animation: "The Secret Lives of Mushrooms" types in (2s)
- Animation: Cursor moves to "Continue" button
Scene 3 - Transition (2s):
- Animation: Button highlights on hover
- Animation: Click ripple effect
- Animation: Screen slides left, new panel slides in
Scene 4 - Result (3s):
- Visual: Sketchpad view with AI suggestions panel
- Animation: Suggestion cards stagger in (0.15s delay each)
- Animation: "Lesson Flow" section populates
Scene 5 - Success (3s):
- Visual: Green full-screen background
- Animation: White circle scales in (spring)
- Animation: Checkmark draws inside circle
- Animation: "Your lesson is live!" fades in below
- Animation: Subtitle "Ready to inspire wonder and discovery" fades in
教程节奏指南
| 步骤复杂度 | 时长 | 备注 |
|---|---|---|
| 简单点击 | 2-3s | 点击并立即显示结果 |
| 表单输入 | 4-6s | 输入并提交 |
| 多字段表单 | 8-12s | 输入多个字段 |
| 复杂工作流 | 15-20s | 包含多个子步骤 |
| 成功状态 | 3-5s | 留出时间,让画面自然呈现 |
打造高效教程的技巧
- 每个场景只展示一个操作 — 不要把多个点击操作挤在一起
- 在展示结果时停顿 — 让观众看清结果后再继续
- 突出变化之处 — 对新元素使用柔和的辉光或缩放效果
- 旁白与操作同步 — 旁白说“点击”时,光标正好点击
- 展示完整 UI — 上下文有助于用户了解自己所处的位置
- 以庆祝画面收尾 — 成功状态能强化完成感
视频类型:社交媒体宣传片
目标: 用醒目的动态文字迅速吸引注意力,适用于广告和社交内容。
脚本结构
HOOK (1-3s)
Single powerful word or phrase that stops the scroll.
VALUE PROP (3-5s)
What's in it for them? One punchy sentence.
FEATURE FLASH (5-10s)
2-3 key benefits, rapid fire.
CTA (2-3s)
Clear action: "Download now", "Try free", URL
视觉风格
- 极简背景: 纯色或简单的渐变
- 高对比度: 深色背景 + 白色文字,或彩色背景 + 白色文字
- 逐词呈现: 每个词都有专属的展示时刻
- 颜色过渡: 背景颜色在场景之间变化
- 方形格式: Instagram/社交动态使用 1080x1080
社交宣传片的动画模式
- 文字猛击: 单个词以强烈效果出现(缩放 1.2→1 + 轻微抖动)
- 背景闪变: 在词语/短语之间即时切换颜色
- 文字缩放: 词语先放大,再缩小,为下一个词留出空间
- 极简动态: 让醒目的字体承担表达效果
- 快速剪辑: 每个词语/短语最多 0.5-1s
场景计划示例
Script: "We are ready."
Scene sequence (4 seconds total):
- Frame 1: Black bg, "WE" slams in white (0.8s)
- Frame 2: White bg, "A" appears black, centered (0.8s)
- Frame 3: Red bg, "R" types out, becomes "READY" (1.6s)
- Frame 4: Hold final frame (0.8s)
时长指南
| 平台 | 理想时长 | 最长时长 |
|---|---|---|
| Instagram Reels | 15-30s | 90s |
| TikTok | 15-60s | 3min |
| Twitter/X | 15-45s | 2min 20s |
| 30s-1min | 10min | |
| YouTube Shorts | 15-60s | 60s |
视频类型:应用/产品展示
目标: 结合文字与 UI,以电影感的方式展示产品界面。
脚本结构
HOOK (3-5s)
Problem statement or intriguing question.
INTRODUCE PRODUCT (5-10s)
Show the product name/logo, establish brand.
FEATURE TOUR (20-40s)
Walk through 3-5 key features with UI demonstrations.
BENEFIT SUMMARY (5-10s)
Recap what makes it special.
CTA (5s)
URL, app store badge, or next step.
视觉风格
- 深色渐变背景: 面向科技产品,采用黑色到紫色/蓝色的渐变
- 柔和渐变背景: 面向友好型应用,采用粉色、薰衣草色、薄荷绿等柔和色彩
- 悬浮式 UI 模型: 应用界面以微倾斜的角度呈现,并带有阴影
- 与 UI 并列的动态文字: 文字出现在界面旁边或上方
- 光标交互: 展示 UI 内的点击、滚动和输入操作
应用展示的动画模式
- 输入 URL 栏: 在浏览器地址栏中呈现打字机效果
- UI 滑入: 应用模型带有弹簧效果,从底部或侧边滑入
- 透视倾斜: UI 轻微进行 3D 旋转(5-10 度)
- 辉光效果: 在 UI 元素周围添加柔和的辉光/光晕
- 光标编排: 使用平滑的贝塞尔曲线移动,并添加点击涟漪
- 列表逐项呈现: 列表中的项目依次出现(每项延迟 0.1s)
- 代币/图标网格: 将应用图标或加密代币排列成网格
场景计划示例
Script: "Earn the best yields on your crypto."
Scene 1 (3s):
- Visual: Soft purple gradient background
- Animation: Text "Earn the best" fades in, "yields" appears in accent color
- Timing: Words sync with voiceover
Scene 2 (4s):
- Visual: Browser URL bar appears (rounded rectangle)
- Animation: "jumper.exchange/" types out character by character
- Animation: Cursor blinks at end
Scene 3 (5s):
- Visual: App UI mockup slides up from bottom
- Animation: Token list (USDC, ETH, LINK) reveals with stagger
- Animation: Cursor moves to highlight token row
视频类型:落地页展示
目标: 以富有戏剧性的设计工具美学展示网站设计。
脚本结构
INTRO (3-5s)
Establish the problem or context.
DESIGN REVEAL (10-20s)
Dramatic entrance of the landing page.
FEATURE CALLOUTS (15-30s)
Highlight specific sections of the page.
CTA (5-10s)
"Book a demo", "Get started", with URL.
视觉风格
- 设计工具美学: 显示网格线、参考线和标尺
- 中性色背景: 浅灰色(#f5f5f5)或深炭灰色(#1a1a1a)
- 完整网页模型: 在浏览器框架中展示完整的落地页
- 光束/镜头光晕: 采用富有戏剧性的揭示灯光
- 便当盒网格布局: 将 UI 组件排列成网格
落地页展示的动画模式
- 网格显现: 首先淡入点状参考线
- 元素构建: 先用蓝色矩形表示元素,再让它们“变成”真实 UI
- 光线扫过: 对角光束划过设计
- 缩放和平移: 镜头在页面上移动
- 组件高亮: 讨论到某个区块时,让其发光或抬起
- 浏览器框架: 使用 Chrome/Safari 浏览器界面作为上下文
场景计划示例
Script: "Achieve team harmony with TeamFusion."
Scene 1 (2s):
- Visual: Dark background, grid lines appear (dashed, gray)
- Animation: Blue rectangle placeholder at center
- Animation: Cursor enters frame
Scene 2 (3s):
- Visual: Light beam sweeps diagonally
- Animation: Blue rectangle transforms/morphs into webpage mockup
- Animation: Glow effect around the design
Scene 3 (5s):
- Visual: Full landing page visible with bento-style feature cards
- Animation: Cards lift slightly with shadow on hover simulation
- Animation: Text callout points to CTA button
视频类型:AI/科技产品解说
目标: 通过文字和界面演示,解释复杂的 AI 或科技产品。
脚本结构
MEET THE PRODUCT (5-10s)
"Meet [Product] — the [category] that [key benefit]."
PROBLEM (10-15s)
What frustration does this solve?
HOW IT WORKS (20-40s)
Show the interface, demonstrate the magic.
INTEGRATIONS (10-15s)
What does it connect with?
CTA (5-10s)
Try it, sign up, learn more.
视觉风格
- 深色模式 UI: 深色背景搭配鲜艳的强调色
- 霓虹强调色: 紫色、青色、洋红色光晕
- 语音/AI 指示元素: 波形、录音按钮、聊天气泡
- 应用图标网格: 展示带有辨识度徽标的集成应用
- 并排布局: 一侧放文字,另一侧放 UI
AI 解说动画模式
- 语音波形: 动态圆点或条形,表示“正在聆听”
- 录音指示器: 脉动的红点搭配“停止”按钮
- 聊天消息输入: 先显示输入指示器,再出现消息
- 模型选择器: 显示 AI 模型选项的下拉菜单
- 集成图标: 应用徽标从边缘依次滑入
- 光晕脉冲: 讨论到某个元素时,该元素发光
场景规划示例
Script: "Meet the AI assistant that lets you talk to all your apps."
Scene 1 (3s):
- Visual: Dark purple gradient background
- Animation: "Meet" fades in gray, holds
Scene 2 (5s):
- Visual: App mockup slides in from right
- Visual: Voice recording UI with waveform animation
- Animation: Red recording dot pulses
- Animation: Text "that lets you talk to all your apps" appears left
Scene 3 (4s):
- Visual: Dropdown opens showing model options (GPT-4, Claude, etc.)
- Animation: List items stagger in (0.1s delay)
- Animation: Cursor hovers, selection highlights
视觉风格参考
根据产品类型和基调选择视觉风格:
深色戏剧风(科技、AI、金融科技、加密货币)
- 背景: 黑色到紫色/蓝色的渐变,或纯深色(#0a0a0a)
- 文字: 白色或浅灰色,搭配彩色强调元素
- 强调色: 霓虹紫(#8b5cf6)、青色(#06b6d4)、洋红色(#ec4899)
- 效果: 光晕、光束、细微粒子
柔和渐变风(消费级应用、生活方式)
- 背景: 柔和的渐变色(薰衣草紫→粉色、薄荷绿→蓝色)
- 文字: 深紫色或海军蓝,以形成对比
- 强调色: 互补的柔和色彩
- 效果: 柔和阴影、圆角、轻快动效
简洁极简风(SaaS、效率工具、B2B)
- 背景: 白色(#ffffff)或浅灰色(#f8fafc)
- 文字: 深灰色(#1f2937)或黑色
- 强调色: 用于按钮/高亮的品牌色
- 效果: 细微阴影、简洁过渡
设计工具风(落地页、设计展示)
- 背景: 带有可见网格的中性灰
- 元素: 构图指示元素(蓝色矩形、参考线)
- 效果: 光线扫过、元素显现
- 画框: 用浏览器外框提供场景背景
动画术语
描述动画时使用以下术语:
基础动画
| 术语 | 效果 | 最适合 |
|---|---|---|
| 淡入/淡出(Fade) | 不透明度从 0→1 或 1→0 | 微妙的进入效果、过渡 |
| 滑动(Slide) | 从屏幕外移入 | UI 元素、列表项 |
| 缩放(Scale) | 放大或缩小 | 强调、进入效果 |
| 弹簧(Spring) | 弹跳并略微过冲 | 轻快、有活力的感觉 |
| 缓出(Ease-out) | 开始快,结束时放慢 | 自然移动 |
| 缓入缓出(Ease-in-out) | 开始和结束时较慢 | 流畅、精致 |
| 打字机(Typewriter) | 逐个字符出现 | 文字显现、URL、代码 |
| 交错(Stagger) | 各项依次延迟 | 列表、多个元素 |
| 变形(Morph) | 形状变为另一种形状 | 形变、过渡 |
| 脉冲(Pulse) | 有节奏地放大/缩小 | 吸引注意 |
| 抖动(Shake) | 快速水平振动 | 冲击、强调 |
| 擦除(Wipe) | 通过移动的边缘揭示内容 | 场景过渡 |
高级动画(来自示例)
| 术语 | 效果 | 最适合 |
|---|---|---|
| 文字猛击(Word slam) | 文字出现时放大过冲并抖动 | 醒目陈述、社交视频 |
| 背景闪变(Background flash) | 背景颜色瞬间变化 | 场景过渡、增强活力 |
| 光线扫过(Light sweep) | 对角光束扫过画面 | 戏剧性揭示 |
| 辉光/泛光(Glow/bloom) | 元素周围的柔和光晕 | 突出焦点、高级质感 |
| 透视倾斜(Perspective tilt) | UI 进行 3D 旋转(5-10°) | 应用模型图、营造景深 |
| 光标轨迹(Cursor trail) | 指针沿平滑的贝塞尔曲线路径移动 | UI 演示 |
| 点击涟漪(Click ripple) | 点击时出现圆形脉冲 | 按钮交互 |
| 倒计时(Countdown) | 数字逐个递减 | 紧迫感、计时器 |
| 网格显现(Grid reveal) | 内容出现前先显示参考线 | 设计工具美学 |
| 徽标组装(Logo assemble) | 徽标部件组合到一起 | 品牌揭示 |
时间指南
- 超快: 0.1-0.2s — 单词砸入、色彩闪现
- 快: 0.2-0.3s — 干脆利落、充满活力
- 中: 0.4-0.6s — 平衡、专业
- 慢: 0.8-1.2s — 戏剧化、优雅
- 交错延迟: 项目之间间隔 0.1-0.2s
- 停留时间: 0.5-1s — 给重要文字留出呼吸空间
场景规划模板
对于每个场景,请记录:
SCENE [number]: [title]
Script: "[exact voiceover text]"
Duration: [X seconds]
Visuals:
- [element]: [description]
- [element]: [description]
Animations:
- [timing]: [element] [animation type] ([duration], [easing])
- [timing]: [element] [animation type] ([duration], [easing])
Transition to next: [type]
必需设置 - Resemble.ai
生成配音前,请确认用户已配置凭据。
检查现有配置
检查 .env 文件是否存在,并包含:
RESEMBLE_API_KEY- Resemble.ai API 令牌RESEMBLE_VOICE_UUID- 语音 ID(可选,默认为7213a9ea)
提示用户提供缺失的凭据
如果缺少 RESEMBLE_API_KEY: 询问:“我需要你的 Resemble.ai API 密钥来生成配音。你可以从 https://app.resemble.ai/account/api 获取密钥——请粘贴你的 API 密钥:”
如果缺少 RESEMBLE_VOICE_UUID:
使用默认语音 UUID 7213a9ea。只有在用户想要更换语音时才询问。
保存凭据
- 使用提供的值创建或更新
.env - 确保
.env位于.gitignore中 - 在继续之前确认设置已完成
凭据安全
- 绝不将 API 密钥提交到版本控制中
- 绝不向用户显示完整的 API 密钥
- 始终确保
.env位于.gitignore中 - 仅将凭据存储在
.env中,绝不硬编码
字幕行为
字幕默认处于禁用状态。 只有在用户明确提出要求时,才生成单词级时间戳和字幕组件。
默认情况(无字幕):
- 仅生成音频文件
- 保存基本元数据(时长、fps、durationInFrames)
- 不要将时间戳处理为单词
用户请求字幕时:
- 用户必须明确提出“captions”“subtitles”或“word highlighting”
- 将
audio_timestamps处理为单词级数据 - 在合成中加入字幕组件
规则文件
请阅读以下文件,了解详细实现:
- rules/resemble-setup.md - API 凭据与配置
- rules/resemble-sync-tts.md - 同步 TTS 生成
- rules/resemble-streaming-tts.md - 较长脚本的流式处理
- rules/resemble-voices.md - 语音选择与管理
- rules/resemble-remotion-integration.md - 与 Remotion 的音频集成
- rules/resemble-captions.md - 同步字幕
- rules/visual-animations.md - 动画模式与 Remotion 基元
快速参考
教育教程:
- 深入研究主题
- 根据受众水平调整语言
- 使用与旁白同步的揭示动画
- 加入视觉隐喻和图表
SaaS 演示:
- 了解功能工作流
- 创建 UI 模型或截取屏幕截图
- 使用光标动画和高亮效果
- 清晰展示结果/成效
产品发布:
- 聚焦“问题 → 解决方案”的叙事
- 使用醒目的排版和品牌色彩
- 节奏明快——句子简短、快速剪辑
- 以明确的行动号召结尾
教程 / 操作演示:
- 界面风格轻盈、简洁
- 每个场景只展示一个操作——不要操之过急
- 用光标引导观众注意力
- 展示步骤进度(面包屑、数字)
- 在继续之前暂停展示结果
- 以成功状态庆祝画面结尾
社交媒体宣传:
- 用一个有力的词语/短语开场
- 逐词揭示,营造冲击力
- 背景色彩过渡增添活力
- 为获得最佳互动效果,总时长控制在 30s 以内
- 信息流使用方形(1080x1080)格式
应用/产品展示:
- 选择渐变风格(深色戏剧感或柔和粉彩)
- 以轻微透视/倾斜效果展示 UI 模型
- 将动感文字与界面演示结合
- 网页产品使用 URL 栏输入效果
- 通过光标编排演示点击操作
对于落地页展示:
- 以设计工具的美学风格开场(网格、参考线)
- 使用扫光效果,打造戏剧性的揭示
- 在浏览器框架中展示完整网页
- 使用标注突出特定版块
- 以清晰的行动号召和 URL 收尾
对于 AI/科技解说:
- 采用带霓虹点缀的深色模式美学风格
- 展示语音/聊天 UI 交互
- 使用应用图标网格演示集成
- 采用并排布局:文本 + 界面
- 使用波形和输入指示器营造 AI 氛围