HoRain云小助手个人主页 个人专栏: 《Linux 系列教程》《c语言教程》⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。专栏介绍专栏名称专栏介绍《C语言》本专栏主要撰写C干货内容和编程技巧让大家从底层了解C把更多的知识由抽象到简单通俗易懂。《网络协议》本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘一起解密网络协议在运行中协议的基本运行机制《docker容器精解篇》全面深入解析 docker 容器从基础到进阶涵盖原理、操作、实践案例助您精通 docker。《linux系列》本专栏主要撰写Linux干货内容从基础到进阶知识由抽象到简单通俗易懂帮你从新手小白到扫地僧。《python 系列》本专栏着重撰写Python相关的干货内容与编程技巧助力大家从底层去认识Python将更多复杂的知识由抽象转化为简单易懂的内容。《试题库》本专栏主要是发布一些考试和练习题库涵盖软考、HCIE、HRCE、CCNA等目录⛳️ 推荐专栏介绍前置准备安装 Claude Code安装 remotion-best-practices Skill什么是 Skill安装方式创建 Remotion 项目启动 Claude Code 并传入 PromptClaude Code 会做什么更多实例理解生成的项目结构核心文件解读Root.tsx 结构示意安装依赖并预览用 Claude Code 迭代调整常见调整场景渲染输出最终视频渲染命令Remotion 最佳实践让 AI 帮你做得更好常见问题Claude Code 没有读取 skill强制读取 skillRemotion Studio 启动报错升级 Node.jsspring() 动画只显示第一帧修复负帧问题本章节介绍如何在本地通过 Claude Code 配合 remotion-best-practices skill从零开始搭建并生成一个 Remotion 宣传视频项目。前置准备在开始之前确保你的本地环境满足以下要求。依赖项版本要求用途Node.js 18.0运行 Remotion 与 npm 脚本npm / pnpm最新稳定版依赖包管理Claude Code最新版AI 辅助代码生成与项目搭建remotion-best-practices已安装为 skill提供 Remotion 项目规范与模板安装 Claude Code官方提供了一键安装脚本根据你的系统选择对应的命令执行。macOS、Linux、WSLcurl -fsSL https://claude.ai/install.sh | bashWindows PowerShellirm https://claude.ai/install.ps1 | iexWindows CMDcurl -fsSL https://claude.ai/install.cmd -o install.cmd install.cmd del install.cmd安装完成后验证是否成功$ claude --version 2.1.142 (Claude Code)首次运行需要登录 Anthropic 账号并授权如果没有官方账号可以查看 Claude Code API 配置安装 remotion-best-practices SkillSkill 是 Claude Code 的扩展能力包remotion-best-practices 封装了 Remotion 项目的最佳实践与代码模板。什么是 SkillSkill 本质上是一个结构化的提示词文档SKILL.mdClaude Code 读取后会获得对应领域的专业知识与规范约束。remotion-best-practices skill 包含以下内容内容模块说明项目目录规范定义 compositions、components、assets 的标准分层结构动画 API 用法interpolate、spring、useCurrentFrame 的标准写法性能最佳实践避免重复渲染、静态资源预加载等规范渲染配置模板codec、fps、分辨率等推荐参数组合安装方式在终端进入你的项目目录执行安装命令npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices安装成功后可以验证 skill 已被识别claude skills list可以看类似以下的栏目Installed skills: - remotion-best-practices (active)remotion-best-practices 源码地址https://github.com/remotion-dev/skills创建 Remotion 项目所有准备工作完成后在空目录中启动 Claude Code用一段 Prompt 让它自动搭建项目。启动 Claude Code 并传入 Prompt我们可以创建目录 video-marker然后进入mkdir video-marker cd video-marker在项目目录中运行claude进入交互界面后粘贴以下 Prompt先读取 remotion-best-practices skill然后创建一个 Remotion 项目。 目标6 秒钟的「Hello Runoob」好莱坞风格片头视频1920x108030fps。 效果要求 - 纯黑背景 - HELLO RUNOOB 文字以冲击力方式砸入画面伴随冲击波扭曲效果 - 撞击瞬间爆发金色粒子 - 强烈的色差闪光chromatic aberration - 文字落定后绿色#67c23a轮廓光晕脉冲 - 顶部和底部黑色宽幅遮幅条像电影一样滑入 只需一个 Composition不用拆分场景。整体质感对标好莱坞大片片头字幕。接下来等待生成就好了完成后会告诉你怎么生成 mp4 文件浏览器预览cd hello-runoob npm run dev预览效果生成 mp4cd hello-runoob npx remotion render HelloRunoob out/hello-runoob.mp4导出信息视频在 out 目录下Prompt 中明确要求 Claude Code 先读取 skill这样生成的代码会严格遵循 remotion-best-practices 的规范而不是依赖模型本身的默认习惯。Claude Code 会做什么Claude Code 读取 skill 后会自动完成以下步骤步骤操作生成内容1初始化项目package.json、tsconfig.json、remotion.config.ts2创建目录结构src/compositions、src/components、src/assets3生成 Scene 组件Intro.tsx、FeaturesScene.tsx、StatsScene.tsx、Outro.tsx4生成通用组件TechCard.tsx、AnimatedCounter.tsx、CodeSnippet.tsx5注册 CompositionRoot.tsx 中完成所有场景拼接更多实例示例一数字增长动画帮我用 Remotion 创建一个 8 秒的视频。背景是深色画面中央显示一个数字从 0 逐渐增长到 1,000,000数字有弹跳动画效果最后定格时出现突破百万的字样。字体要大颜色用金黄色。 Claude Code 接到这个指令后会我们可以在 Claud 中直接让 AI 帮我们导出视频生成的视频示例二产品发布倒计时用 Remotion 做一个 15 秒的产品发布倒计时视频。从 10 倒数到 0每个数字出现时有缩放透明度的过渡动画背景用黑色数字用白色大字体右上角有NEW红色徽章。倒计时结束时全屏出现产品名称CLAUDE PRO字体要震撼。生成的视频关键点Prompt 越具体越好。描述清楚时间、颜色、效果、文字内容Claude Code 就能一次做到位不需要你反复调整。理解生成的项目结构项目搭建完成后目录结构如下hello-runoob/ ├── package.json ├── tsconfig.json ├── remotion.config.ts └── src/ ├── index.ts ← 入口注册所有 Composition ├── Root.tsx ← 主 Composition拼接所有场景 ├── compositions/ │ ├── Intro.tsx ← 开场 Logo 动画 │ ├── ProblemScene.tsx ← 问题引入场景 │ ├── FeaturesScene.tsx ← 技术卡片展示 │ ├── StatsScene.tsx ← 数据统计场景 │ └── Outro.tsx ← 结尾 CTA ├── components/ │ ├── TechCard.tsx ← 单个技术卡片 │ ├── AnimatedCounter.tsx ← 数字滚动 │ └── CodeSnippet.tsx ← 代码块动画 └── assets/ ├── colors.ts ← 品牌色常量 └── logo.svg核心文件解读Root.tsx 是整个视频的入口所有场景按时间轴顺序在这里拼接Root.tsx 结构示意import ./index.css;import { Composition } from remotion;import { HelloRunoob } from ./Composition;export const RemotionRoot: React.FC () {return (CompositionidHelloRunoobcomponent{HelloRunoob}durationInFrames{180}fps{30}width{1920}height{1080}//);};主视频组件用 Series 按顺序拼接场景:const MainVideo () { return ( Series Series.Sequence durationInFrames{90} {/* 3秒 */} Intro / /Series.Sequence Series.Sequence durationInFrames{210} {/* 7秒 */} FeaturesScene / /Series.Sequence Series.Sequence durationInFrames{450} {/* 15秒 */} StatsScene / /Series.Sequence Series.Sequence durationInFrames{300} {/* 10秒 */} Outro / /Series.Sequence /Series ); };安装依赖并预览Claude Code 生成代码后按照它的提示安装依赖npm install启动 Remotion Studio 预览视频效果npx remotion studio runoob-promo1.0.0 studio remotion studio Remotion Studio running at http://localhost:3000浏览器会自动打开 http://localhost:3000可以拖动时间轴实时预览每一帧的效果。预览时如果某个场景动画看起来太快或太慢直接告诉 Claude Code第 2 个场景的卡片入场动画太快延迟改长一些它会定位到对应代码并修改。用 Claude Code 迭代调整Remotion Studio 预览时发现问题可以直接在 Claude Code 中用自然语言描述无需手动改代码。常见调整场景问题描述告诉 Claude Code 的方式卡片动画太快FeaturesScene 里卡片的 spring stiffness 降低到 80背景色不对所有场景背景色改为 #0d1117数字计数器不流畅StatsScene 的 AnimatedCounter 用 easeOutCubic 缓动想增加一个场景在 StatsScene 后面加一个展示在线实例功能的场景10秒文字字体太小Intro.tsx 的主标题字体改为 96px直接在 Claude Code 终端描述问题它会找到对应文件并修改修改完毕后 Remotion Studio 会自动热更新。渲染输出最终视频效果满意后渲染成 MP4 文件渲染命令npx remotion render \src/index.ts \ # 入口文件RunoobPromo \ # Composition ID与 Root.tsx 中一致out/runoob-promo.mp4 \ # 输出路径--codech264 \ # 编码格式兼容性最好--width1920 \ # 输出宽度--height1080 # 输出高度Rendering RunoobPromo (1800 frames) Progress: ████████████████████ 100% Rendered in 2m 34s → out/runoob-promo.mp4Remotion 最佳实践让 AI 帮你做得更好渲染速度取决于场景复杂度与机器性能。如果视频较长且特效较多可以加上 --concurrency4 参数开启多线程并行渲染速度可提升 3~4 倍。在实际使用中有一些技巧可以让你的视频质量大幅提升。把这些说明加进你的 Prompt 里效果会明显不同 帧率与尺寸告诉 Claude Code 你要投哪个平台抖音用1080×1920 竖屏B站用1920×1080 横屏微信用1:1 方形。帧率fps推荐用30fps流畅或60fps超流畅文件更大。 动画节奏用 Remotion 的spring()函数做弹性动画比线性动画自然 10 倍。在 Prompt 里说使用弹性缓动效果。文字逐字出现时告诉 Claude 用stagger 延迟每个字间隔几帧依次出现。视频开头和结尾加 0.5 秒淡入淡出观感更专业。 视觉质感背景不要用纯色让 Claude 用渐变或网格纹理瞬间提升质感。加字幕时给文字加text-shadow暗色背景上白字更清晰。数据图表用remotion/motion-blur插件运动时有模糊感更像电影镜头。⚡ 渲染效率开发阶段用npx remotion preview预览觉得满意再渲染导出节省时间。如果视频很长让 Claude 开启--concurrency参数并行渲染速度快几倍。图片和字体资源用staticFile()引用避免路径报错。常见问题Claude Code 没有读取 skill如果生成的代码不符合 remotion-best-practices 的规范说明 skill 没有被正确读取。在 Prompt 开头明确加上这句话强制读取 skillBefore writing any code, read the remotion-best-practices skill file completely.Remotion Studio 启动报错常见原因是 Node.js 版本过低。检查并升级升级 Node.js# 使用 nvm 切换到 Node.js 20nvm install 20nvm use 20spring() 动画只显示第一帧这是因为 frame - delay 的值为负数时 spring 返回 0。加上 clamp 保护修复负帧问题const scale spring({frame: Math.max(0, frame - delay), // 确保传入值不为负数fps,config: { damping: 12, stiffness: 180 },});❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧